Building a modular web application with python flask, Angular, and AWS : Part 1

When it comes to making a web application that can perform well, be spun up quick, and hosted on one of the most flexible cloud platforms; there is no better technologies then using python flask, developing with angular, and learning AWS outside of NodeJS.

In this multipart series I’ll be working on building a web app in this environment and deep diving the pros of cons. This will be a multipart series, so follow us on Twitter for instant notification when we publish the next part, https://twitter.com/comsciu
Firstly I’ll be developing in an Ubuntu virtual machine hosted inside of virtual box ( How to setup and create your own Linux Virtual Machines and using Visual Studio Code  as an IDE, other strong recommendation are Eclipse Web development base with the Python addin, or PyCharm which is amazing but requires a licence.  You could use AWS EC2 as your development environment and host a virtual desktop if you wish but I find a good ol’ VM to be easiest for now.

Then later we will be setting up an AWS account, creating an IAM user that can talk to a nosql dynamo database, installing the AWS python SDK named BOTO, and then bringing in Angular.  It sounds like a lot but with some perseverance, patience, and good ol’ grit we can get the job done.  Once we get the basic building blocks in place, we can then start adding features to our page such as user access, single sign on from Facebook and Google, messaging, posting, etc…

Once you get your development environment setup in such a way you can run Python whether it be Windows or the VM solution above next we need to install Flask.  This can be done by running “pip install flask” in a Terminal. Next step we create a new folder which will be our project, you can name it whatever you like, I’m going to name mine HelloPython. Now we should set up our project folder to host a simple page inside our environment.

Let’s create these sub-folders:

  1. app – app module
  2. app/controllers – these will host our back end python methods in a modular way
  3. app/static – this will make up the bulk of the front end web page
  4. app/templates – this will host one file, index.html , Flask uses this directory to render pages using it’s built in template engine.  We could use this as well for doing server side templating which is all well and good but then we don’t get the awesome power of Angular to drive the client side user interface.

Now lets create these files:

  1. run.py  – entry script
  2. app/__init__.py  – tells Python this is the app module and contains logic that runs when the module is bootstrapped by run.py
  3. app/views.py – this will be our demo view controller, which we will eventually move into the controllers directory as we build out the app

Our project:

HelloFlaskFolder.PNG

run.py:

IMPORTANT: You should not actually add the comments above the shebang line (#!/usr/bin/env python) otherwise the script will fail

runpy.PNG

__init__.py:

initpy.PNG

app/views.py:

views.PNG

With just these couple of files in place and the skeleton of our app defined we should now be able to locally serve content by running our app.py file for the root project folder.  First make sure the script is executable with 755 permissions if you are on a linux operating system and execute it with ./run.py which will serve our page using the localhost address 127.0.0.1 on port 5000. Later on in the project we will host our project on AWS’s elastic beanstalk and use Route57 to assign our page a domain name .  From Windows you can run “python run.py”  from the python developer I believe. Also by running our application with default=True , python will monitor our project for changes automatically and restart the internal server for us automatically, how awesome is that!

helloworld.PNG

 

Leave a Reply