The goal of this article is to help developers, especially the beginners to code a fully functional Flask Dashboard, enhanced with database, authentication, and a fully functional user interface.
The final product, coded during this tutorial, can be accessed here. Is fully documented and the source code is available on Github. Enjoy it!
Final app features
- Design - Light Dashboard crafted by Creative-Tim
- Backend - Python3 / Flask
- Modular design, documented source code
- Database: SQLite
- Database ORM: Flask-SQLAlchemy
- Templating: Jinja2
- Static Export - via Frozen-Flask
Flask Dashboard Light - App preview.
Topics / Sub Sections
- What is Flask - short introduction
- What is a dashboard, and why is useful
- Prepare the environment
- Explain the project structure
- Integrate the dashboard design
- Adding a database
- Integrate SQLAlchemy ORM
- Play with the Flask console
- Add basic authentication - login, logout, register
- Enhance the authentication with encryption
- Add a custom command to Flask console
- Build the app statically - via Frozen-Flask
What is Flask
First, goes first. Flask is a popular Python web framework, meaning it is a third-party Python library used for developing web applications. Coding in Flask can be a breeze, if you have the patience to read the docs. For instance, to bootstrap a new web app, from scratch you need a few lines of code:
from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, from Flask!' if __name__ == '__main__': app.run()
Issues understanding this code? Ask us anything on Discord.
The above code shows "Hello, From Flask!" on http://localhost:5000 by typing the command
python app.py in a terminal. Of course, Python and Flask should be installed.
What is a Dashboard
Data dashboards organize, store, and display important information from multiple data sources into one, easy-to-access place. The information is shown based on a logical relevance, for instance: weekly sales, traffic growth, usually boring information, presented in a "catchy" way. You can read here, a much more detailed definition for data dashboards.
Prepare the environment
To successfully code our dashboard we need Python installed on our workstation. Just access the official website, choose the installer based on your OS and click a few times. To check the installation, open a terminal window and type `python --version`. You should see something similar to this:
$ python --version $ Python 3.7.2
We have a running python, let's install Flask. The easier way is to use PIP, the official package installer for Python. We can install Flask, globally or using a virtual environment. To stay simple, we will install Flask globally:
$ pip install Flask $ python $ >>> from flask import Flask $ >>>
First line, calls pip to install Flask, and later we test the installation. If your screen is not getting red, Flask was installed successfully.
The project structure
What makes Flask a great framework is the flexibility. An app coded in Flask can have all code in one file or use one package for each helper and class. Anyway, the most used patters for flask apps are:
- Single module structure, where all files are saved in the same directory. This structure is suitable for a small project, or learning projects.
- Basic Package structure - the recommended pattern, easier to extend and intuitive for newcomers.
We can see now a much more organized directory structure where each file represents:
- run.py - the app launcher, it's the first file executed by Flask
- the app components (views, forms, models) are isolated into app directory and available as a package
Minimal project structure
Based on this structure, to have a functional Flask app we need only two files:
<ROOT> / run.py / app / / app / __init__.py
contents of run.py
from app import app if __name__ == "__main__": app.run()
contents of __init.py
from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello Coder, you are up!'
Basically, with less than 15 lines, we have a running app. To execute the code one small setup should be present in the environment: set the value for FLASK_APP variable to `run.py` to inform Flask the entry point of our app.
$ export FLASK_APP=run.py # unix $ set FLASK_APP=hello.py # WinOS CMD $ $env:FLASK_APP = "run.py" # Powershell
Navigate to the directory where
run.py was saved, and type
flask run.By visiting
localhost:5000 in your preferred browser you should see the app running.
What's next? Integrate the design
The famous Light Dashboard design is translated into Jinja2 templates and added to our Flask dashboard.
Something is missing? Ask us anything on Discord.