loading...
Cover image for Iconic Admin Dashboards - AdminLTE, CoreUI, Black Design coded in Flask

Iconic Admin Dashboards - AdminLTE, CoreUI, Black Design coded in Flask

sm0ke profile image Sm0ke ・7 min read

Hello Coders,

This article presents a short-list with simple Flask starters coded with basic modules on top of well-known, iconic UI Kits: AdminLTE, CoreUI, Black Dashboard, Adminator, and Material Design.

All projects are actively versioned and supported via Github (issues tracker) and Discord by the AppSeed platform and based on the permissive (MIT) license can be used for unlimited hobby & commercial projects.
Thanks for reading!.


Admin Dashboards - Links (for fast runners)


Admin Dashboard - Black Design, animated presentation.


Flask Codebase

All apps presented in this article are prototyped and generated using a common codebase and a short-list with features:

  • UI-Ready, Jinja2 templating
  • SQLite/PostgreSQL database, ORM, Alembic for DB migrations
  • Session-based authentication via Flask-Login
  • Blueprints and app-factory pattern
  • Deployment scripts are provided for Docker, Heroku

The goal of such starters is to skip over the manual work involved when we start a new project, usually spent with a repetitive list of tasks:

  • process the UI to convert to a usable, production-ready template engine
  • add necessary scripts for database, configuration
  • design the codebase to be updated and versioned with ease
  • deploy scripts

Well, using these starters, the above tasks are already solved and tested to empower any developer with a basic Python/Flask knowledge to code new features with ease.


For more information, feel free to AMA in the comments. Dev is a platform that I access almost daily.


Admin Dashboard - Flask AdminLTE

As mentioned, the project is simple, with an unopinionated codebase structure presented below:


< PROJECT ROOT >
   |
   |-- app/                   # Implements app logic
   |    |-- base/             # Base Blueprint - handles the auth
   |    |-- home/             # Home Blueprint - Serve HTML pages
   |    |
   |   __init__.py            # Initialize the app
   |
   |-- requirements.txt       # Development modules 
   |-- requirements-mysql.txt # Production modules  - Mysql DMBS
   |-- requirements-pqsql.txt # Production modules  - PostgreSql
   |
   |-- .env                   # Inject configuration 
   |-- config.py              # Set up the app
   |-- run.py                 # Start the app - WSGI gateway
   |
   |-- ***************************************************************

Being an open-source project, we can compile and start the app by typing just a few commands in the terminal. Of course, we need to be familiar with the terminal and have Python3 and GIT properly installed in the workstation. In case you're not sure, please access the helper links below, read a little bit and come back here to continue with the content.


Flask AdminLTE - Compile sources

This snippet, extracted from the project README, is a simplified version that explains the build for Unix distros. The full setup is documented in the README file and official docs of the product. In case something is missing, let me know.

$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-adminlte.git
$ cd flask-dashboard-adminlte
$
$ # 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/

By default, Flask development server starts on port 5000, and we can visit now the app in our preferred browser.
To pass the login and access the private pages, please register a new user first. If the compilation and set up was executed without errors, we should be able to see some nice pages crafted in the AdminLTE theme.


Flask AdminLTE - UI Widgets

Admin Dashboard - Flask AdminLTE, UI widgets.


Admin Dashboard - Flask AdminLTE, Calendaar page.


Admin Dashboard - Flask Black

This modern UI is provided and actively supported by Creative-Tim, a well-known web agency. The codebase being identical with the previous starter, I'll say a few words about the UI, by quoting from the product page:


Black Dashboard

Black Dashboard is a beautiful Bootstrap 4 Admin Dashboard with a huge number of components built to fit together and look amazing. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics. Black Dashboard comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful.

The UI comes with many components and a few pre-built pages, RTL support but no authentication pages.


Black Dashboard - User profile page

Admin Dashboard - Black Design, user profile page.


Black Dashboard - UI Alerts

Admin Dashboard - Black Design, UI alerts page.


To code the app, please access the README file and follow the instructions. Being a product used by many developers (~=100 GH Stars, 50 Forks), compiling the app should be an easy task if you're familiar with Flask.


Admin Dashboard - Core UI

CoreUI design is provided by an agency with the same name as the product. HTML version is actively supported and the UI looks super nice IMO.


CoreUI Dashboard - animated presentation.

Admin Dashboard - CoreUI, provided in Jinja.


How to compile the app

$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-coreui.git
$ cd flask-dashboard-coreui
$
$ # 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/

As mentioned for previous starters, to unlock the private pages, please create a new user first and use the same information to authenticate. To see the app running, without compiling the code, please access the links:


Admin Dashboard - Flask Adminator

Adminator UI, crafted by ColorLib, comes with a fresh, modern UI, as we can see below, in this animated presentation.


Admin Dashboard - Adminator, coded in Jinja2 by AppSeed.


The app can be compiled locally using a similar instruction set as the previous starters. To see the app in action, just click the app links:


Flask Adminator - Start in Docker

The starter is configured for Docker and we can Flask Adminator by typing a single line in the terminal.

$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d

Note: Before running the command, make sure you have the port 5005 free - Docker will expose that port to allow us interacting with the app.


Admin Dashboard - Flask Material

This Material Design is released by the Creative-Tim agency and comes with a nice set of UI components and basic pages for app dashboard, user profile page, RTL support.


Admin Dashboard - Material Design coded in Flask.


In case we still have the energy we can compile the app in the terminal with just a few commands - Fast-runners might click the DEMO link, and decide later to use the app.

$ # Get the code
$ git clone https://github.com/app-generator/flask-material-dashboard.git
$ cd flask-material-dashboard
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
$
$ # OR with PostgreSQL connector
$ # pip install -r requirements-pgsql.txt
$
$ # 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"
$
$ # Set up the DEBUG environment
$ # (Unix/Mac) export FLASK_ENV=development
$ # (Windows) set FLASK_ENV=development
$ # (Powershell) $env:FLASK_ENV = "development"
$
$ # 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/

thanks for reading this (long) post! Let me know your thoughts or suggestions in the comments. Where to go from here:


Admin Dashboard - Flask Gradient PRO.

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide