Flask Dashboards— Open-Source Flask Boilerplate Code

6 min readApr 8, 2020

Hello,

This article aims to help developers, especially beginners, start a new Flask Dashboard project faster by coding new features on top of simple, production-ready starters already enhanced with database, authentication, and deployment scripts. All dashboards presented in this article are released on Github and based on the permissive (MIT) license can be used for unlimited hobby & commercial products.

For newcomers, Flask is a lightweight web application framework written in Python. Sometimes classified as a microframework, Flask provides a lightweight codebase that can be easily extended to become an API, a simple web app, or a complex eCommerce platform.

✨ Flask Soft UI Dashboard

Admin dashboard built on top of Flask Framework. Designed for those who like bold elements and beautiful websites, Soft UI Dashboard is ready to help you create stunning websites and web apps. Soft UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

✅ Up-to-date Dependencies
✅ UI Kit: Bootstrap 5, Persistent Dark-Mode
✅ Basic Authentication, OAuth via Github
✅ API Generator Module — video presentation

✨ Datta Able Flask

Datta Able Bootstrap Lite is the most stylized Bootstrap 4 Lite Admin Template, around all other Lite/Free admin templates in the market. It comes with highly feature-rich pages and components with fully developer-centric code. Before developing Datta Able our key points were performance and design.

👉 Datta Able Flask — product page
👉 Datta Able Flask — LIVE Demo

✨ Flask Bootstrap 5 Volt

Volt is a free and open-source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages, and 3 customized plugins. Volt does not require jQuery as a dependency meaning that every library and script is jQuery-free.

👉 Flask Bootstrap 5 Volt — product page
👉 Flask Bootstrap 5 Volt — LIVE Demo

✨ Flask Atlantis Lite

Atlantis Lite Dark is a free bootstrap 4 admin dashboard that is beautifully and elegantly designed to display various metrics, numbers, or data visualization. Atlantis Lite admin dashboard has 2 layouts, many plugins, and UI components to help developers create dashboards quickly and effectively to save development time and help users make the right and fast decisions based on existing data.

👉 Flask Atlantis Lite — product page
👉 Flask Atlantis Lite — LIVE Demo

✨ Flask Dashboard Material

Material Dashboard is a free Material Bootstrap 4 Admin with a new design inspired by Google’s Material Design. Material Dashboard comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red, and purple) and an option to have a background image on the sidebar.

👉 Flask Dashboard Material — product page
👉 Flask Dashboard Material — LIVE deployment

✨ Flask Black Dashboard

Admin dashboard generated in Flask Framework on top of Black Dashboard design (free version) from Creative-Tim. The product comes with basic modules, a database (SQLite and PostgreSQL), and deployment scripts for Docker, HEROKU, and Gunicorn/Nginx stack.

👉 Black Dashboard Flask — LIVE Demo
👉 Black Dashboard Flask — Product page

Flask Starter -Black Dashboard — Flask Starter —Black Dashboard

✨ What is Flask

Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.

Compared to his older brother Django, Flask provides much freedom to the developer because only offers suggestions, but does not enforce any dependencies on the project layout.

By using a framework we can reuse modules and features already coded and tested by other developers. Reinventing the wheel for classic modules is time-consuming and for these cases, a framework comes to the rescue. To read more about Flask, please access the below links or chat with us on Discord in case of any issues:

Flask — official website
Flask Cheat Sheet — blog article with samples

✨ What is a dashboard

A dashboard is a set of pages that are easy to read and offer information to the user in real-time regarding his business. A dashboard usually consists of graphical representations of the current status and trends within an organization. Having a well-designed dashboard will give you the possibility to act and make informed decisions based on the data that your business provides.

✨ What’s in the Box

All admin dashboards, presented in this article were built with simplicity and usability in mind. The UI is already integrated (no need to manually process the HTML files), a basic set of features like authentication, database tools are already configured and ready to be used.

Dashboard features

MIT License — suitable for hobby and commercial projects
No account required to use the code — Sources published on Github
Simple, modular code-base using best practices
UI-ready, Jinja2 templating, forms validation
Blueprints, App factory pattern
Session-based authentication (flask_login)
Deployment scripts for multiple environments: Docker, Gunicorn/Nginx, Heroku

As mentioned, the projects are provided and actively supported by the AppSeed team. For support, use Github to report issues or talk directly with the AppSeed team on Discord.

How to use the samples

Let’s try to build a sample app, without leaving this page — Flask Dashboard Black, a popular starter used by many developers.

Please notice that we need to have a Python3 environment already set up. If you’re not sure, open a terminal and type python --version.

👉 #1 — Get the Source Code

The project can be downloaded from the product page or directly from the public repository published on Github. Let’s download the source code by using the GIT command tool:

$ # Get the code
$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard

👉 #2 — Install modules

Once we have the sources, the next step is to install the dependencies required by the application. We can visualize all dependencies by opening requirements.txt

$ # Virtualenv set up (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules
$ pip3 install -r requirements.txt

👉 #3 — Set up the environment

Set the FLASK_APP variable to point to our bootstrapper file.

$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"

All apps are started by run.py and Flask must know this information before starting the applications.

👉 #4 — Start the App

$ flask run

At this point, we can visit the app in the browser. By default, the app is not provisioned with users, and we need to create one using the registration form: