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.
Thank you for reading! TL;DR; links (for fast runners)
- Light Bootstrap Dashboard - Demo
- Light Bootstrap Dashboard - Flask (the product page)
- Support via Discord - 24/7 LIVE Service
This lightweight UI kit is provided for free by Creative-Tim, a super active player in the open-source ecosystem. The HTML version, actively supported and versioned, can be downloaded directly from Github under the MIT License.
The official product description
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.
Project stats: 1.3k Github Stars, ~= 500 Forks, 98k downloads
For more information, please access the official product page: Light Bootstrap Dashboard
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.
- 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.
< 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
- 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_appdefined in app/init.py
- Redirect the guest users to Login page
- Unlock the pages served by home blueprint for authenticated users
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
Light Bootstrap Flask - User profile page
Light Bootstrap Flask - Google Maps page
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
- 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!