This article aims to help beginners to get starting with Flask, the super-popular Python framework, by building and coding simple tasks on top of an open-source starter: Flask Gradient Able. The project can be downloaded directly from Github and used in commercial projects (MIT License).
For newcomers, Flask is a lightweight web application framework written in Python. Sometimes classified as a microframework, Flask provides a lightweight codebase that can be easily extended to become an API, a simple web app, or a complex eCommerce platform.
This Flask starter being coded on top of a nice Ui Kit and released under the MIT license can be used for unlimited hobby & commercial products. Besides this, the code-base is clean and easy to digest by the main audience: beginners. Other features:
- UI Kit: Gradient Able Dashboard (Free Version)
- Modular codebase coded with Blueprints
- SQLite/PostgreSQL database, ORM, Alembic for migrations
- Session-based authentication, basic form validation
- Deployment scripts: Docker, Gunicorn / Nginx
In case you like this simple Flask starter, we can build it using a terminal and a few basic commands. The app is coded in Python3 and to have a successful build we need a Python3 interpreter properly installed in our workstation. If you are not sure about it, please open your preferred terminal and type:
$ python -V Python 3.7.2 <--- All good
python version check returns a
3.x version, we're all good.
Let's clone the source code
As mentioned, the app is published on Github and we can
clone the code using
GIT command tool or simply download the ZIP archive.
$ # Get the code $ git clone https://github.com/app-generator/flask-dashboard-gradientable.git $ cd flask-dashboard-gradientable
After cloning/copying the sources we need to install the app dependencies listed in the requirements.txt file.
$ # Install modules - SQLite Database $ pip3 install -r requirements.txt
The next step is to set the value for
FLASK_APP variable and we're all set.
$ # Set the FLASK_APP environment variable $ (Unix/Mac) export FLASK_APP=run.py $ (Windows) set FLASK_APP=run.py $ (Powershell) $env:FLASK_APP = ".\run.py" $ $ # Start the application (development mode) $ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1) $ # --port=5000 - specify the app port (default 5000) $ flask run --host=0.0.0.0 --port=5000 $ $ # Access the dashboard in browser: http://127.0.0.1:5000/
If all goes well, by visiting the dashboard in browser we should the login screen:
By default, this Flask starter is not provisioned with default users and to pass the authentication and access the private pages we need to create a new user first by using the registration page.
After login, we should be able to access the dashboard pages:
Main Dashboard Page
Google Maps page
The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:
< PROJECT ROOT > | |-- app/ # Implements app logic | |-- base/ # Base Blueprint - handles the authentication | |-- home/ # Home Blueprint - serve UI Kit pages | | | __init__.py # Initialize the app | |-- requirements.txt # Development modules - SQLite storage |-- requirements-mysql.txt # Production modules - Mysql DMBS |-- requirements-pqsql.txt # Production modules - PostgreSql DMBS | |-- .env # Inject Configuration via Environment |-- config.py # Set up the app |-- run.py # Start the app - WSGI gateway | |-- ************************************************************************
- Initialize the app using the specified profile: Debug or Production
- If env.DEBUG is set to True the SQLite storage is used
- If env.DEBUG is set to False the specified DB driver is used (MySql, PostgreSQL)
- Call the app factory method
create_appdefined in app/init.py
- Redirect the guest users to Login page
- Unlock the pages served by HOME blueprint for authenticated users
The starter comes equipped with a basic deployment enhancement for Docker. To start the app in a dockerized container we need to type a single line in the terminal (commands provided for Linux distros):
$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d
If all goes well, we should see the app running in the browser by visiting
Thanks for reading! Let me know your thoughts in the comments