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.
Python is server side programming language and very powerful to build complex IoT, Image Processing and other types of system.
Flask is a REST API framework for Python. If you are from MEAN stack background, it is similar to “Express.js”.
Welcome | Flask (A Python Microframework)
Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions. And before you ask: It's BSD…
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.
- 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)
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`
Writing Server side code
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.
Angular client side code:
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:
Contribute to angular-python-flask-demo development by creating an account on GitHub.
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.