Flask Dashboard Light - Learn Flask by coding an Admin Panel

Hello,

The goal of this article is to help any developer to code a fully functional Admin Dashboard in Flask.

Btw, My real name is Adrian, or Sm0ke on some platforms. Thanks for reading!  

App Features

In a rush? Access Flask Dashboard Light resources without an account.

Light Dashboard - Open-Source Flask Dashboard

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.

Flask project - single module structure

  • Basic Package structure - the recommended pattern, easier to extend and intuitive for newcomers.

Flask Project structure - package pattern

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.

Learn Flask - app first run.

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.

Show Comments

Get the latest posts delivered right to your inbox.