Flask Dashboard - A simple starter with StarAdmin design (Free Version)

Published Jun 24, 2020Last updated Feb 26, 2021

Hello Coders,

This article presents a simple Flask Dashboard starter, coded on top of StarAdmin design (Free Version) released by BootstrapDash agency under the MIT License.

Dashboard Features

The goal of this starter is to help developers to star faster a new project. With this goal in mind, the starter comes with a basic set of modules and features, usualy coded by web apps with an average complexity.

UI-ready, Simple Flask Codebase
SQLite/PostgreSQL, SQLAlchemy ORM, Alembic (DB migration)
Session-based authentication, via Flask-Login
Deployment scripts: Docker, Gunicorn / Nginx, Heroku
MIT License, codebase provided by AppSeed

Dashboard Links

Flask StarAdmin - LIVE Demo
Flask StarAdmin - Source code, released on Github
Flask StarAdmin - the product page

Flask Dashboard - StarAdmin design coded in Flask.

How to build the app

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.

$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-staradmin.git
$ cd flask-dashboard-staradmin
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
$
$ # OR with PostgreSQL connector
$ # pip install -r requirements-pgsql.txt
$
$ # 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"
$
$ # Set up the DEBUG environment
$ # (Unix/Mac) export FLASK_ENV=development
$ # (Windows) set FLASK_ENV=development
$ # (Powershell) $env:FLASK_ENV = "development"
$
$ # 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/

At this point, we can visit the app in the browser http://127.0.0.1:5000/. By default, the app will redirect guest users to the login page. To access the private pages:

Create a new user using the registration page
Authenticate using the login page

Flask Dashboard - StarAdmin design coded in Flask.

Using the app locally, is quite nice, but we can play around and deploy the app on Heroku, a well-known deployment platform.

What is Heroku

Heroku's a fully-managed platform that helps developers to deploy apps with ease. Heroku is a cloud-based, fully-managed platform as a service (Paas) for building, running, and managing apps.
A short-list with features:

Runtime - Heroku empowers developers to deliver products using a CLI, called Heroku Toolbelt
PostgreSQL DBMS - a powerful database already configured to be production-ready
Automatic scaling - Heroku scales in an instant, both vertically and horizontally.
Github integration - trigger production builds directly from Github commits

Our sample starter comes pre-configured for LIVE deployment. The relevant files, shipped along with the app sources:

runtime.txt - specify the Python version used by Heroku during the build and deploy
Procfile - configuration file that informs Heroku where to look for the WSGI interface
requirements.txt - must contain the gunicorn module

Gunicorn module

Gunicorn Green Unicorn is a Python WSGI HTTP Server for UNIX. It’s a pre-fork worker model ported from Ruby’s Unicorn project. The Gunicorn server is broadly compatible with various web frameworks, simply implemented, light on server resources, and fairly speedy.

For basic usage please access the PyPi page or the official docs.

runtime.txt

To build the deploy any python-based app, Heroku uses a default Python version python-3.6.10 or the one specified in the runtime.txt file. Supported environment, as per Heroku official documentation - Specifying a Python version:

python-3.8.3
python-3.7.7
python-3.6.10 <-- The Default Version
python-2.7.18

Procfile

Heroku apps include a Procfile that specifies the commands that are executed by the app on startup. As specified in the official docs, the Procfile is always a simple text file that is named Procfile without a file extension.

web: gunicorn run:app --log-file=-

For our sample, gunicorn is called with run:app argument.

How to deploy on Heroku

To see the app runing in the browser, from a public domain/subdomain we need to follow a few simple steps:

Create a FREE account on Heroku platform
Install the Heroku CLI that match your OS: Mac, Unix or Windows
Open a terminal window and authenticate via heroku login command
Clone the sources and push the project for LIVE deployment

The commands to complete the deployment

$ # Clone the source code:
$ git clone https://github.com/app-generator/flask-dashboard-staradmin.git
$ cd flask-dashboard-staradmin
$
$ # Check Heroku CLI is installed
$ heroku -v
heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good
$
$ # Check Heroku CLI is installed
$ heroku login
$ # this commaond will open a browser window - click the login button (in browser)
$
$ # Create the Heroku project
$ heroku create
$
$ # Trigger the LIVE deploy
$ git push heroku master
$
$ # Open the LIVE app in browser
$ heroku open

If all goes well, we should see the app running in the browser.