Light Bootstrap Dashboard - Simple Flask Dashboard

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 (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.

• ✨ Flask Light Bootstrap - product page
• ✨ Flask Light Bootstrap - LIVE Demo

✨ 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.

Codebase 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
   |-- 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:

$ # 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
• Setup CentOS for development
• Setup Ubuntu for development
• Setup Windows for development

$ # 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 Flask - Google Maps page

✨ 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 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:
$ 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 crafted in Django, Flask, and React
• 👉 More Flask Apps - free & PAID