Sm0ke

Posted on Sep 13, 2020 • Updated on May 25, 2021

SB Admin - Free Flask Dashboard

#webdev #flask #dashboards #appseed

Hello Coders,

This article presents a simple Flask Dashboard coded on top of SB Admin, an iconic admin dashboard provided for free by Start Bootstrap and actively supported by open-source enthusiasts. With 2.6k Github stars, SB Admin is definitely a good choice if your next project is an admin dashboard.

Thanks for reading! - Content provided by App Generator.

SB Admin Flask - product page
SB Admin Flask - LIVE Deployment
SB Admin Flask - product documentation

This open-source project might be used by beginners to accommodate with a production-ready starter coded on top of best practices and modern tools/libraries.

SB Admin - UI KIT

UI Vendor Notes - SB Admin is a free, open-source, MIT licensed Bootstrap admin template. This template uses the default Bootstrap 4 styles along with a variety of plugins to create a powerful framework for creating admin panels, web apps, or dashboard UI's for your next project.

SCSS based theme with built-in scripts for compiling Pug and CSS
A flexbox based layout with fixed and static navigation options
Toggleable sidebar menu with intuitive toggled states
Custom panel styling
Interactive charts by Chart.js plugin
Interactive tables by dataTables plugin
Login, Registration, Forgot Password, 404, and Blank starter HTML pages

More information about this material-based UI can be found on the official product page and Github Repo.

Short-intro for beginners

In case you're not familiar with Python/Flask and this project looks like a nice playground, just follow a few steps to prepare your environment to compile the project locally.

Python Installation

Flask is a Python-based framework and to use his magic, of course, we need to install Python first. The Python installer for all supported distributions can be found on this page. Select the installer that matches your OS and hit the install button. Once the installation is finished, open a terminal window and type python --version. You should see something like this:

python --version
Python 3.8.5

GIT usage

Another tool used in this article and also used on a daily basis by many programmers is GIT - the command tool versioning system. We need GIT to download the project source code using the terminal.
The official GIT definition - Git is a distributed version control system for tracking changes in source code during software development.
Basically, programmers use GIT to manage and update a common codebase in a collaborative way. For instance, our project is published on Github by the AppSeed core team, located in Romania.
Other developers are using the project from USA, India, or Australia. GIT allows this distributed access by taking care of all issues that might occur in such a context.

Some (useful) GIT resources

Git Handbook - a good intro to version control system concept
Git - Cheat Sheet - a short-list with GIT most used commands

Now let's move on with our Sb Admin Flask Dashboard starters and say a few words about the app codebase & features. The project aims to help developers, not only beginners, to skip over the initial phase of a new project when you have nothing and the UI is just a bunch on flat, lifeless HTML files. What starter provide:

UI-Ready, HTML files already converted to Jinja
DBMS: SQLite, PostgreSQL (production)
DB Tools: SQLAlchemy ORM, Alembic (schema migrations)
Modular design with Blueprints
Session-Based authentication (via flask_login), Forms validation
Deployment scripts: Docker, Gunicorn / Nginx, Heroku

The starter hides the private pages and forces guest users to authenticate. This logical split inside the app is done via blueprints.
The simplified codebase structure of SB Admin Flask can be visualized below:

< PROJECT ROOT >
   |
   |-- app/             # Implements app logic
   |    |-- base/       # Base Blueprint - Authentication Flow
   |    |-- home/       # Home Blueprint - Serve UI Kit pages
   |    |
   |   __init__.py      # Initialize the app
   |
   |-- requirements.txt # Development modules
   |
   |-- .env             # Inject Env Configuration
   |-- config.py        # Set up the app
   |-- run.py           # Start the app - WSGI gateway
   |
   |-- ******************************************************

The app bootstrap flow is quite simple.

Flask executes run.py (entry point of our app)
run.py loads .env and use the settings
run.py configure the SQLite DB usage
- Call create_app defined in app/init.py
- Redirect the guest users to Login page
- Unlock the pages served by home blueprint (auth users)

SB AdminFlask - Compile the code

To compile the code and see the starter in action we need to complete a short-list with simple steps.

1 - Clone source code

$ git clone https://github.com/app-generator/flask-dashboard-sb-admin.git
$ cd flask-dashboard-sb-admin

The sources can be also downloaded (ZIP format) from the project page. Once the ZIP is downloaded, unZIP it, open a terminal window and change your current directory INSIDE directory (where all project files are saved).

2 - Install Modules

$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt

SB Admin Flask is coded on top of a short-list with dependencies listed in the [requirements.txt](https://github.com/app-generator/flask-dashboard-sb-admin/blob/master/requirements.txt) file:

flask - The Flask library
flask_login - Provides Login/Session-based functionality
flask_wtf - Help us with forms & fields validation
flask_sqlalchemy==2.* - Manipulate DB records with ease
python-decouple - Read .env settings
gunicorn - Used in HEROKU deployment

3 - Start the app

To start the app we can use the embedded (development ONLY) Flask server:

$ # 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 and SB Admin Flask is visible in the browser, we should see the LOGIN Page.

To pass the login and unlock the private pages, please register a new user (the app is not provided with default users).

SB Admin Flask - Charts Page

SB Admin - UI Tables

SB Admin - Error 404 page

SB Admin - Deploy on HEROKU

This simple starter is already configured for HEROKU, a popular deployment platform for many languages and frameworks, including Python/Flask.

The steps to deploy are listed below:

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

$ # Clone the source code & CD inside 
$ cd flask-dashboard-sb-admin
$
$ # Check Heroku CLI is installed
$ heroku -v
$
$ # Check Heroku CLI is installed
$ heroku login
$ # this command 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 the deployment is finished successfully (as it should), the new browser page should be identical to the official LIVE demo of SB Flask Dashboard - aka the LOGIN page.