Flask Dashboard - Black Design

Published Jul 20, 2020Last updated Feb 26, 2021

Hello Coders,

This article aims to help developers, especially the beginners, to accommodate with a simple Flask admin dashboard, coded on top of a free, beautiful design - Black Dashboard.

This minimal starter is provided by the AppSeed platform with a basic set of modules, quite common to many admin dashboards used for hobby and production projects:

UI-Ready, using Jinja2 templates (no more manual work on HTML files)
Database - SQLite for development, and PostgreSQL for production
Flask-SqlAlchemy ORM - to manipulate database information with ease
Codebase: Blueprints, App Factory pattern
Session-Based authentication - login, register
Deployment scripts for Docker, Nginx/Gunicorn stack and HEROKU

App Links - for fast-runers

Flask Dashboard - Black Design, the product page
Flask Dashboard Black Demo - LIVE app, default login - test / pass

Flask Dashboard - Black Design, dashboard screen.

What is Flask

Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. Classified as a microframework, Flask is written in Python and it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

Flask can be used from super simple one-page sites to complex eCommerce platforms, API servers or microservices. For more information about this amazing fraemwork, please access the links:

Flask - the official website
Flask Documentation - a must-read resource for every aspire flask developer
More Flask Dashboards coded with basic modules

Set up environment

To use the stater, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full-list with dependencies and tools required to build the app:

Python3 - the programming language used to code the app
GIT - used to clone the source code from the Github repository
Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.

For more information on how to set up your environment please access the resources listed below, in case I've missed something, or feel free to ask me anything in the comments:

App Codebase (simplified)

The starter uses a simple codebase with two Blueprints and the wsgi app created using the app-factory pattern.

< 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
   |
   |-- **************************

The bootstrap flow

run.py loads the .env file
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_app defined in app/init.py
Redirect the guest users to Login page
Unlock the pages served by home blueprint for authenticated users

Build the app

To built and start the app locally, follow the steps:
Get the source code

Download the ZIP from Github Repository
Using GIT tool in the terminal to clone the source code
Change the current directory to source code directory

$ # Get the code
$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard
$
$ # Virtualenv modules installation
$ virtualenv --no-site-packages env
$ source env/bin/activate
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Start the application (development mode)
$ flask run
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/

If all goes well, we can access the app in the browser. By default, the app is not provided with default users. Please create a new user using the registration page, and after authenticate and access the private pages:

Flask Black Dashboard - User Profile Page

Flask Black Dashboard - UI Alerts

Flask Black Dashboard - UI Icons

Short Endnote

Being a free product, this simple Flask Dashboard can be used as a starting point to learn new things in Python, Flask and web development.
Thanks for reading! Feel free to ask me anything in the comments. I'll be super glad to find out that someone uses this free starter or just learn something new only by reading this short tutorial.
For more releated resources, please access the links below.