Angular + Python + Flask — Full stack demo

For JavaScript framework, MEAN stack is very famous in its way. I often get project requirement where people want to build server code using Python mostly because it is related to IoT, Image processing, Mathematics application or choice of language. Django is obvious choice for Python lovers to build server side rendered website.

If client is open for technologies, generally I propose them new technology stack of Angular + Python + Flask.

Note: I am leaving database out of this context (M of MEAN = MongoDb). You are free to use any database which can be accessed from Python. Most people prefer MySql and PostgreSQL. I will try to update this story with database example sometime later.

Angular

Angular is JavaScript (well, actually written in Typescript) framework for building Single Page Application.

Python

Python is server side programming language and very powerful to build complex IoT, Image Processing and other types of system.

Flask

Flask is a REST API framework for Python. If you are from MEAN stack background, it is similar to “Express.js”.

Full stack development

Below setup steps have been performed on Windows 10. For Linux flavor OS, steps might be different but pretty straight forward and Python is built-in newer versions of Linux.

Setup:

  1. Install Python stable version

2. Install “pip” package. Download below file and execute it. It should install pip. (Don’t know what is pip? It is similar to “npm” or “NuGet” for Python packages)

https://bootstrap.pypa.io/get-pip.py

3. Update pip and setup tools — `pip install — upgrade pip setuptools`

4. Install virtual environment for pip— `pip install virtualenv`

5. Install flask — `pip install Flask`

6. Install flask helper packages — ` pip install flask flask-jsonpify flask-sqlalchemy flask-restful`

A simple Python script can be upgraded to REST server by importing and initializing Flask packages.

In above gist, @app.route(“/”) maps incoming GET “/” request to function hello() and return a simple JSON object.

This approach works but it is not good OOPs solution. In real world application, we build projects in terms of classes and objects.

Scared? Don’t be! We can update our server code to be more OOPs oriented and that is why we have imported other Flask helper packages.

Let’s see what changed.

Line № 5- — We are importing “Api” package and creating it’s object from Flask’s “app” object.

Line № 7- “Employees” is simple Python class with a “get()” member function. “Resource” parameter passed to “Employees” class contains incoming REST API call information.

Line № 11- Here we are creating REST API route mapping. All REST APIs should be configured here with their target classes. In this example, whenever user navigate to ‘server-url/employees’ then ‘get()’ function of ‘Employees’ class shall be executed and its result shall be returned to user.

In this manner, you can continue writing your business logic in Python classes and create REST API configuration to map them to REST end points.

For Angular, it really doesn’t matter what technology is used for building REST API whether it is Java Springboot, ASP.NET Web API, Node.js, Python or any other. As long as resources can be accessed via HTTP commands, Angular is good.

To consume our Python REST API, just create a new Angular and call HttpClient methods (GET/PUT/POST/DELETE).

If you run server and client applications, you shall get CORS error.

Ideal solution is to server Angular from Python so that it won’t throw CORS error (that’s what MEAN stack is, isn’t it?). But for simplicity of this article, we shall skip CORS error.

Install CORS packages -`pip install -U flask-cors`

Once installed, just call CORS(app) function and you will not see that error again.

Here is client+ server source code:

Here is complete server side code for quick reference:

And that should be your first Angular + Python + Flask example up and running.

Hope you enjoyed it.

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store