DEV Community

Cover image for Flask Dashboard - Simple Open-Source Starters
Sm0ke
Sm0ke

Posted on • Edited on

Flask Dashboard - Simple Open-Source Starters

Hello Coders,

In this article, I will present a curated list with Flask Dashboards crafted on top of modern, actively supported UI Kits. The apps are published on Github under permissive licenses (MIT, LGPL) and anyone can use them for unlimited hobby and commercial products. For newcomers, Flask is a lightweight web application framework written in Python that provides a lightweight codebase and 3rd party libraries.

The starters are provided with a minimum set of features (authentication, ORM, Database, DB Migration Tools, Deployment Scripts) and might a good knowledge base for beginners to start new projects on top of functional, tested starters.


Product Design License - -
Flask Datta Able CodedThemes MIT Demo Source
Flask Dashboard Volt Themesberg MIT Demo Source
Flask Dashboard Black Creative-Tim MIT Demo Source
Flask Admin Material Creative-Tim MIT Demo Source
Flask Atlantis Dark ThemeKita MIT Demo Source
Flask Star Admin BootsrapDash MIT Demo Sources

(New) Datta Able Flask

Open-source dashboard generated by AppSeed in Flask Framework. Datta Able Bootstrap Lite is the most stylised Bootstrap 4 Lite Admin Template, around all other Lite/Free admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code. Before developing Datta Able our key points were performance and design.



Flask Datta Able - Starter project coded in Flask.


Flask Dashboards Features

All starters are built using an automatized workflow, and the code-base is quite similar to all Flask dashboards - The common features:

  • MIT License (of course), UI-Ready
  • Dual DB profile: SQLite (development), PostgreSQL for production
  • DB Tools: Flask-SqlAlchemy ORM, Alembic for Db Migration
  • Session-based login, hashed passwords
  • Deployment scripts: Docker, Gunicorn / Nginx
  • Modern UI Kits, actively supported by publishers

The code follows the best practices, with a simple, modular code-base. Apps are documented via comprehensive README files, along with separated detailed docs accessible here: Admin Dashboards - Usage


How to use the code

As mentioned, all admin panels are published on Github. Let's built a sample app, and see something nice on the screen: Flask Dashboard Black

To build successfully the starters, we need a Python3 environment properly set up, and (optionally) GIT tool, to grab the source code directly from Github. For those unfamiliar with Git, feel free to access the repository and download the ZIP. All we need to do is to open a terminal and type a few commands:

Clone/download the source code

$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard
Enter fullscreen mode Exit fullscreen mode

Built a virtual environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv --no-site-packages env
$ # .\env\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

Install dependencies

$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

Set up the environment

$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
Enter fullscreen mode Exit fullscreen mode

Start the app

$ # Start the application (development mode)
$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
$ # --port=5000    - specify the app port (default 5000)  
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/
Enter fullscreen mode Exit fullscreen mode

If this super simple set up works well, we should see the login page in the browser. By default, the app redirects guests users to the login page for authentication. After passing the login, we should see the main dashboard screen:

Flask Dashboard Black - Main dashboard screen.

Profile Page

Flask Dashboard Black - User Profile Page.

From this point, we can play with the code to add more pages, update the title or labels for authentication pages or add more features like: remember password.

At some point, might be a good idea to go LIVE with our app we can reuse some basic deployment configurations already provided for all starters:


Docker execution

The application can be easily executed in a docker container. The steps:

Get the code

$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard
Enter fullscreen mode Exit fullscreen mode

Start the app in Docker

$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:5005 in your browser. The app should be up & running.


Gunicorn

Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.

Install using pip

$ pip install gunicorn
Enter fullscreen mode Exit fullscreen mode

Start the app using gunicorn binary

$ gunicorn --bind 0.0.0.0:8001 run:app
Serving on http://localhost:8001
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:8001 in your browser. The app should be up & running.


Waitress

Waitress (Gunicorn equivalent for Windows) is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library.

Install using pip

$ pip install waitress
Enter fullscreen mode Exit fullscreen mode

Start the app using waitress-serve

$ waitress-serve --port=8001 run:app
Serving on http://localhost:8001
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:8001 in your browser. The app should be up & running.

In case of any issues, it might be a good idea to access the official docs provided in the public space.


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

Top comments (6)

Collapse
 
vinci141 profile image
Vinil mehta

I am going to read it again , learn from it, & implement it. Thanks a ton for this article.

Collapse
 
sm0ke profile image
Sm0ke • Edited

Hello Vinil!
Thanks for reading. In case I've missed something, might be a good idea to take a look at the official docs provided for each product. The full-index available here.
Happy coding & stay safe!

Collapse
 
burdier profile image
Burdier

Nice work man.

Collapse
 
sm0ke profile image
Sm0ke

Thank you!
God is a programmer. I'm just a humble messenger. .. <('_')> ..

Collapse
 
crearesite profile image
WebsiteMarket

Nice. Thanks for sharing!

Collapse
 
sm0ke profile image
Sm0ke

Yw