Flask Dashboard Material Admin

Open-Source Admin Dashboard coded in Flask Framework on top of Material Admin Dashboard design (free version) - Provided by AppSeed Web App Generator.

Dashboard Features



Dashboard technology stack





Flask Dashboard Material Admin - Open-Source Dashboard.


Prepare your environment


The product is built on top of Flask, a popular Python Web Framework. To build the app, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full-list with dependencies and tools required to build the app:


Check Python (using the terminal)

$ # Check Python version
$ python --version
Python 3.7.2 # <--- All good


Check GIT command tool (using the terminal)

$ # Check git
$ git --version
$ git version 2.10.1.windows.1 # <--- All good


For more information on how to set up your environment please access the resources listed below. In case we've missed something, contact us on Discord.


Project Structure


The boilerplate code is built with a modular structure that follows the recommended pattern used by many open-source projects. The most important files and directories are shown below:


< PROJECT ROOT >                          # application root folder
    |
    |--- app/__init__.py                  # application constructor  
    |--- app/base/                        # base blueprint
    |--- app/base/static/assets           # Img, CSS, Janascript files
    |--- app/base/templates               # Jinja2 files (layouts, login pages)
    |                |---<errors>         # Dir with Error pages: 404, 500
    |                |---<login>          # Dir with Login and Registration pages
    |                |---<site_template>  # Dir with Login and Registration pages
    |
    |
    |--- app/home/                        # home blueprint
    |--- app/home/templates               # Jinja2 files (Pages): index, icons, tables
    |                |---- index.html     # Main dashboard page
    |                |---- chat.html      # Chat Page
    |                |---- contacts.html  # Contacts Page
    |                |---- alert.html     # Alerts Page
    |                |---- analytics.html # Analytics
    |
    |--- .env                             # store env variables
    |--- config.py                        # app configuration profiles: Debug, Production
    |
    |--- requirements.txt                 # Development requirements - SQLite storage
    |--- requirements-pgsql.txt           # Production requirements - PostgreSQL BDMS
    |
    |--- run.py                           # bootstrap the app
    |
    |-----------------------------


Build from sources


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


Deployment


The app is provided with a basic configuration to be executed in Docker, Gunicorn, and Waitress.


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-dashboard-material-admin.git
$ cd flask-dashboard-material-admin

Start the app in Docker

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

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

Start the app using gunicorn binary

$ gunicorn --bind 0.0.0.0:8001 run:app
Serving on http://localhost:8001

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

Start the app using waitress-serve

$ waitress-serve --port=8001 run:app
Serving on http://localhost:8001

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


Flask Material Admin - App Screens



Flask Dashboard Material Admin - Charts page.


Flask Dashboard Material Admin - Login page.


Flask Dashboard Material Admin - UI Buttons.




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.


What is dashboard

In information technology, a dashboard is a user interface that, somewhat resembling an automobile's dashboard, organizes and presents information in a way that is easy to read. However, a computer dashboard is more likely to be interactive than an automobile dashboard (unless it is also computer-based). To some extent, most graphical user interfaces (GUIs) resemble a dashboard - by Techtarget


Material Admin

Material Admin is a free admin template that is entirely built using the framework Google’s Material Design for the Web to comply with the Material Design guidelines. It comes with the basic components and set of pre-built pages required to lay the foundation for any application - provided by BootstrapDash.



Flask Dashboard Material Admin - Provided by AppSeed Web App Generator.