Light Bootstrap Dashboard - Simple Flask Dashboard
Tags: dashboards, flask, webdev, appseed
Published: 2020-09-16 13:59:34

---
title: Light Bootstrap Dashboard - Simple Flask Dashboard
published: true
description: A simple Flask dashboard coded with basic modules, database, and deployment scripts on top of Light Bootstrap Dashboard design
tags: dashboards, flask, webdev, appseed
cover_image: https://raw.githubusercontent.com/app-generator/flask-dashboard-light-bootstrap/master/media/flask-dashboard-light-bootstrap-screen.png
---
Hello Coders, 

This article presents a simple **Flask Dashboard** generated by the **AppSeed** platform with basic modules, database, and deployment scripts on top of **[Light Bootstrap Dashboard](https://appseed.us/admin-dashboards/flask-dashboard-light-bootstrap)** (free version). Light Bootstrap Dashboard is a Bootstrap4 admin dashboard template designed to be beautiful and simple. It is built on top of Bootstrap 4 and it is fully responsive. 
The project might be used for hobby & commercial projects by any developer with basic-knowledge in Python/Flask. 

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

---

- ✨ [Flask Light Bootstrap](https://appseed.us/admin-dashboards/flask-dashboard-light-bootstrap) - product page
- ✨ [Flask Light Bootstrap](https://flask-light-bootstrap.appseed-srv1.com/) - LIVE Demo

---

![Light Bootstrap Dashboard - Flask, an open-source starter coded with basic modules by AppSeed.](https://raw.githubusercontent.com/app-generator/flask-dashboard-light-bootstrap/master/media/flask-dashboard-light-bootstrap-screen.png)

---

### ✨ UI KIT - Light Bootstrap

**Light Bootstrap Dashboard** is Bootstrap 4 admin dashboard template designed to be beautiful and simple. It is built on top of Bootstrap 4 and it is fully responsive. It comes with a big collection of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS, or CRM.

The product represents a big suite of front-end developer tools that can help you jump-start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard contains multiple handpicked and optimized plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customization of this product.

---

Being a simple starter, **Light Bootstrap Flask** might be used also by students and beginners to accommodate with a production-ready codebase built on top of industry best practices. 
Along with some basic features, the starter can be deployed on HEROKU with just a few commands provided in the README file. 

> ✨ Starter Features

- 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
- Support via **Github** and [Discord](https://discord.gg/fZC6hup).

---

## Codebase structure

```bash
< 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
   |-- config.py        # Set up the app
   |-- run.py           # Start the app - WSGI gateway
   |
   |-- ******************************************************
```

> ✨ How app starts

- `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 compile the app

In case you like the design and have some time to spare, the app can be compiled with just a few lines typed in the terminal. 
To see **Bootstrap Light Flask** running in the browser we need a Python3 environment up & running and GIT (command tool) to download the sources from the public repository. 

If you're not sure if Python3 is installed, please open a terminal and type `python --version`. On my PC, I have an out as below: 

```bash
$ # Check Python version
$ python --version
Python 3.7.2 # <--- All good
``` 

In the command return errors, you might try to set up the workstation before continuing with this tutorial by accessing: 

- [How to set up Python](https://docs.appseed.us/how-to/install-python)
- [Setup CentOS for development](https://docs.appseed.us/how-to/setup-centos-for-development/)
- [Setup Ubuntu for development](https://docs.appseed.us/how-to/setup-ubuntu-for-development/)
- [Setup Windows for development](https://docs.appseed.us/how-to/setup-windows-for-development/)

---

```bash
$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-light-bootstrap.git
$ cd flask-dashboard-light-bootstrap
$
$ # Virtualenv set up
$ virtualenv 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, this simple Flask starter should be visible in the browser on PORT `5000`.

---

> ✨ Light Bootstrap Flask - User profile page

![Light Bootstrap Dashboard - Flask version, user profile page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-light-bootstrap/master/media/flask-dashboard-light-bootstrap-screen-user.png)

---

> ✨ Light Bootstrap Flask - Google Maps page

![Light Bootstrap Dashboard - Flask version, google maps page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-light-bootstrap/master/media/flask-dashboard-light-bootstrap-screen-maps.png)

---

### ✨ Deploy on HEROKU

To start from 0 and see the app running locally might be nice .. but we can do more and deploy **Light Bootstrap Flask** in the wild with some help from HEROKU, a popular deployment platform for many languages and frameworks (Flask included).

**Steps to deploy on Heroku**

- [Create a FREE account](https://signup.heroku.com/) on Heroku platform
- [Install the Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-python#set-up) 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:
$ git clone https://github.com/app-generator/flask-dashboard-light-bootstrap.git
$ cd flask-dashboard-light-bootstrap
$
$ # 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 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 the browser
$ heroku open
```

If the compilation is successful, we should see the app successfully deployed and usable via a public domain.

---

> **Thanks for reading!** For more resources, feel free to access:

- 👉 More [Flask Dashboards](https://appseed.us/admin-dashboards/flask/) crafted in Django, Flask, and `React`
- 👉 More [Flask Apps](https://appseed.us/apps/flask/) - free & PAID