SB Admin - Free Flask Dashboard
Tags: webdev, flask, dashboards, appseed
Published: 2020-09-13 09:18:55

---
title: SB Admin - Free Flask Dashboard
published: true
description: A simple Flask Dashboard starter coded with basic modules and deployment scripts on top of SB Admin design
tags: webdev, flask, dashboards, appseed
cover_image: https://raw.githubusercontent.com/app-generator/flask-dashboard-sb-admin/master/media/flask-dashboard-sb-admin-screen.png
---
Hello Coders, 

This article presents a simple **Flask Dashboard** coded on top of **[SB Admin](https://appseed.us/admin-dashboards/flask-dashboard-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](https://appseed.us/admin-dashboards/flask-dashboard-sb-admin)** is definitely a good choice if your next project is an admin dashboard.

*Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

- [SB Admin Flask](https://appseed.us/admin-dashboards/flask-dashboard-sb-admin) - product page
- [SB Admin Flask](https://flask-sb-admin.appseed-srv1.com/) - LIVE Deployment
- [SB Admin Flask](https://docs.appseed.us/products/flask-dashboards/sb-admin) - product documentation

---

![SB Admin - open-source Flask Dashboard with material design.](https://raw.githubusercontent.com/app-generator/flask-dashboard-sb-admin/master/media/flask-dashboard-sb-admin-screen.png)

--- 

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](https://startbootstrap.com/templates/sb-admin/?ref=appseed) and Github [Repo](https://github.com/StartBootstrap/startbootstrap-sb-admin). 

---

## 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](https://www.python.org/downloads/). 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:

```bash
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](https://guides.github.com/introduction/git-handbook/) - a good intro to `version control system` concept
- [Git - Cheat Sheet](https://training.github.com/downloads/github-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](https://flask.palletsprojects.com/en/1.1.x/blueprints/). 
The simplified codebase structure of **SB Admin** Flask can be visualized below:

```bash
< 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

```bash
$ 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

```bash
$ # 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: 

```bash
$ # 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. 

![Sb Admin Flask - Login page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-sb-admin/master/media/flask-dashboard-sb-admin-screen-login.png)

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 Flask - Charts page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-sb-admin/master/media/flask-dashboard-sb-admin-screen-charts.png)

---

> SB Admin - UI Tables

![Sb Admin Flask - UI Tables page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-sb-admin/master/media/flask-dashboard-sb-admin-screen-charts.png)

---

> SB Admin - Error 404 page

![Sb Admin Flask - Error 404 page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-sb-admin/master/media/flask-dashboard-sb-admin-screen-404-page.png)

---

> SB Admin - Deploy on [HEROKU](https://www.heroku.com/)

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](https://www.heroku.com/) platform
- Install the [Heroku CLI](https://devcenter.heroku.com/articles/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

---

```bash
$ # 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](https://flask-sb-admin.appseed-srv1.com/) of SB Flask Dashboard - aka the LOGIN page. 

---

> Thanks for reading! For more resources, please access:

---

- More [Flask Dashboards](https://appseed.us/admin-dashboards/flask) - a curated index
- More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) - provided by AppSeed