Flask Dashboard - Corona Dark Design

Hello coders,

This article presents an open-source, MIT licensed Flask state coded on top of modern design - Corona Dashboard Dark (Free Version). The product is actively supported via Github and Discord and based on the licensing model can be used for unlimited hobby & commercial projects.

Thanks for reading! - Content provided by App Generator.

• ✨ Flask Corona Dark - product page
• ✨ Flask Corona Dark - LIVE Demo

✨ What is Flask

Short intro for newcomers - Flask is a micro web framework written in Python. It is classified as a microframework because 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.
This framework can be used to code API servers, full-stack apps, SPA's, or microservices.

Personally, I like it based on simplicity and opinionated architecture - for more information please access:

• What is Flask - the official website
• Flask Docs

✨ Code-Base Structure

The app is coded using a simple code-base that uses Blueprints and app-factory pattern, enhanced with basic modules and features:

• Session-Based authentication, Forms validation
• Dual DMBS config: SQLite(dev) / PostgreSQL (prod)
• DB Tools: SQLAlchemy ORM, Alembic for migration
• Deployment: Docker, Nginx/Gunicorn stack

Files structure

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

App 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

✨ How to build the app

To see the app running locally, we need a basic toolchain properly installed in the workstation:

• Python3 - the programming language used to code the app
• GIT command tools - 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, just in case I've missed something:

• How to set up Python
• Setup CentOS for development
• Setup Ubuntu for development
• Setup Windows for development

Now, the actual build, executed in a terminal window, basically does a few simple things like cloning the source code from Github, prepare the environment and install the app dependencies and start the app in development mode using Flask embedded server.

For full build instructions, please access the project README.

$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-corona-dark.git
$ cd flask-dashboard-corona-dark
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable (Unix based systems)
$ export 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 the build goes well, we can visit the app in the browser. The first thing we should see is the login page. To unlock the private pages, we need to use the registration page to create a new user, and after authenticate. For authenticated users, the all will unlock some nice dark-designed pages:

✨ Flask Corona dark - Charts Page

✨ Flask Corona Dark - UI Tables Page

✨ Flask Corona Dark - Registration Page

Thanks for reading!

Links & Resources

Links

• More Flask Admin Dashboards - a curated index
• Open-Source Admin Dashboards - index hosted by AppSeed