Single Page Apps with Flask and Angular 4|5 Tutorial Series
In this tutorial series we'll be using Python, Flask, SQLAlchemy and Angular 5 to build a modern RESTful web application with an architecture that consists of a front-end application with Angular 5 and a back-end REST API using Flask.
The application we'll be building is a simple CRUD (Create, Read, Update and Delete) system for managing customers. This can be further extended to build a fully featured Customer Management System by implementing more use cases.
The first tutorial will cover how to set up both the back-end and front-end applications and how to install the necessary dependencies.
- Introduction and Setting Up Flask and Angular (current tutorial)
- Using the SQLAlchemy ORM to Create Database Models
- Routing and Navigation with The Angular Router
- Angular State Management with ngrx
- Integrating Angular with Flask
- Building a REST API with Flask
- Consuming The REST API with Angular HttpClient
- Adding JWT Authentication
- Getting Ready for Production and Deployment
Before we dive into the practical steps let's briefly go over the technologies we are going to use in this tutorial:
Flask: a Python micro-framework for building web applications that's know to be light and scalable. Flask has many features such as:
- It's easy to setup and get started with
- It's has an active community
- It has a good documentation
- It's lighter than Django and may constitute a good lightweight alternative to Django for many projects
- It can be easily extended.
Angular 5 is the latest version of Angular, the most popular client side framework for building front-end applications with TypeScript. Angular is created, used and supported by Google.
SQLAlchemy is a Python ORM (Object Relational Mapper) and SQL toolkit that allows Python developers to use SQL-based databases (for data persistence and retrieval) without knowing or dealing with SQL but Python objects and methods instead.
Setting Up Flask and Angular
In this section we will learn how we can install both Flask and Angular to setup our development environment.
First of all, to complete this tutorial you will need:
- Python 3 installed. You can install it from the official website
- pipenv for managing dependencies (
pip install pipenv)
- Optionally docker for quickly setting up a database system. Otherwise just install PostgreSQL in your system since we'll need it to persist data (We'll use the SQLAlchemy ORM for data persistence so any database management system will work but just for the sake of following the exact instructions in this tutorial you'll need PostgreSQL)
- Node.js and NPM installed. You can install both of them from the official website. Please note that the Angular CLI requires Node
6.9.0or higher and NPM
Step 1—Creating the PostgreSQL Database
After installing Docker, you only need to run the following command in order to create a PostgreSQL database:
docker run --name crmdb \ -p 5432:5432 \ -e POSTGRES_DB=crmdb \ -e POSTGRES_PASSWORD=p4ssw0rd \ -d postgres
If you have PostgreSQL installed on your system and want to use it instead of docker run the following command:
Step 2—Installing the Angular CLI
Now you need to install the Angular CLI so head back to your terminal and run the following command:
npm install -g @angular/cli
You may need to add sudo before your command, depending on your npm configuration.
Step 3—Bootstrapping the Flask Application
Now that we have set up the PostgreSQL database and the Angular CLI. Let's bootstrap the back-end application with Python and Flask.
First create necessary folders for your project using:
mkdir flask-crm cd flask-crm mkdir backend
Navigate back to the root of
flask-crm then initialize a new Python 3 environment, using pipenv, that will be used to isolate the packages for our project from the system-wide packages.
Pipfile will be created in
You can now install the Python dependencies for our project i.e
- flask: the package for the Flask framework
- marshmallow: the package for serialization and deserialization of JSON objects
- sqlalchemy: the package for the SQLAlchemy ORM
- and psycopg2-binary: the PostgreSQL driver for SQLAlchemy ORM
Head back to your terminal and run the following commands:
pipenv install flask marshmallow sqlalchemy psycopg2-binary
After installing the Python dependencies, let's create a Flask application
Creating a Basic Flask Application
Head back to your terminal, navigate inside the
backend folder, create a
main.py file then add the following code just to say hello with Flask
from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!'
We first import the
Flask class from the
flask package, next we create an instance of that class (the
__name__ argument refers to the application module so we passed to tell flask where to find the other application's files).
Next we create a simple Python function that simply retruns the string Hello World!. This function is decorated with
@app.route('/') decorator which tells Flask to call this function and display its result when the user visits the
/ path or the home URL.
To run this application you need to run the following commands in your terminal:
pipenv shell cd backend export FLASK_APP=main.py flask run
First we activate the virtual environment, navigate inside the
backend folder then export FLASK_APP and run the application server (Exporting FLASK_APP tells flask what file to run, in our case it's the
You application server will be running on
http://127.0.0.1:5000/. If your visit this address with your web browser you will see a Hello World! displayed.
After creating the basic back-end application let's create the front-end
Step 4—Creating the Angular 5 Front-End Application
In the previous step we have installed the Angular CLI. Now let's use it to create a basic Angular 5 application. Head back to your terminal, make sure your are inside
flask-crm folder then run the following command to generate the front-end and serve it:
ng new frontend cd frontend ng serve
Your application will be running on
In this tutorial we have introduced the RESTful application that we are going to build throughout these series with Python, Flask and Angular 5.
We have also installed the back-end and front-end dependencies, bootstrapped the Angular 5 application that will be used as the front-end of our application ( for consuming the REST API and providing the UI interface) and the Flask application that will take care of exposing the REST API endpoints and connecting with the underlying PostgreSQL (or whatever SQL-based database management system you choose) database.
In the next tutorial you'll get introduced to the SQLAlchemy ORM and we'll use it to create the database models for our back-end application so stay tunned!
- Django 2 Ajax CRUD with Python 3.7 and jQuery
- PHP 7 Tutorial with MySQL: CRUD REST API & JWT
- Django 2 CRUD Tutorial: Generic Class-Based Views
- Angular 6|7 Tutorial — CRUD & Python REST API
- Python 3.7 Matplotlib — Data Visualization Tutorial
- Python 3.7 Data Classes — Tutorial by Example
- Ember 3 Tutorial: Building your First Application
- Django Authentication — Login, Logout and Password Change/Reset
- Ubuntu 18.04: Install Python 3.7 | 3.6, pip and venv
- Vertical Center in Bootstrap 4
- Angular 6|7 ngIf by Example
- Angular 6|7 ngFor Example
- JWT Auth with Vue, Vuex and Vue Router — Axios & Guards
- Node Express JWT Authentication — jsonwebtoken and bcryptjs
- Python Django JWT — djangorestframework-jwt Example
- Adonis Tutorial — CRUD REST API and JWT Authentication
- Adonis Tutorial — JWT Authentication
- Installing PostgreSQL on Ubuntu 18.04
- PostgreSQL & PostGIS Tutorial — Creating a Spatial Database
- Installing GDAL 2+ on Windows 7 & Windows 10
- Swift Vapor Tutorial — Creating a REST API
- es6 template strings or literals
- Django Form Example—Bootstrap 4 UI via django-crispy-forms
- Django TemplateView GET|POST Example — URLs, as_view and get_context_data
- CSS Grid Layout Tutorial—Styling a Django Template
- Vuex Tutorial
- Redux Tutorial
- Angular 7|6 with PHP and MySQL Example & Tutorial
- Ethereum Dapps with Truffle,Ganache, Metamask, OppenZippelin and React
- Angular 7|6 In-Memory Web API Tutorial | CRUD Example
- Using Vue.js in WordPress
- Learn Sails.js Tutorial 
- Using Vue.js in PHP Tutorial
- Angular 7|6 Material Data-Table Tutorial & Example