Flask Dashboard - Gradient Able Design
Tags: flask, dashboard, opensource, appseed
Published: 2020-05-24 15:28:48

---
title: Flask Dashboard - Gradient Able Design
published: true
description: A simple Flask starter coded on top of GradientAble design, released under the MIT License
tags: flask, dashboard, opensource, appseed
cover_image: https://raw.githubusercontent.com/app-generator/flask-dashboard-gradientable/master/media/flask-dashboard-gradientable-screen.png
---
Hello coders, 

This article aims to help beginners to get starting with Flask, the super-popular Python framework, by building and coding simple tasks on top of an open-source starter: **[Flask Gradient Able](https://appseed.us/admin-dashboards/flask-gradient-able)**. The project can be downloaded directly from Github and used in commercial projects (MIT License). 

---

- ✨ [Flask Gradient Able](https://appseed.us/admin-dashboards/flask-gradient-able) - product page
- ✨ [Flask Gradient Able](https://flask-gradient-able.appseed-srv1.com/) - LIVE Demo

---

For newcomers, **[Flask](https://docs.appseed.us/content/what-is/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 Dashboard Gradientable - Open-source admin dashboard coded in Flask.](https://raw.githubusercontent.com/app-generator/flask-dashboard-gradientable/master/media/flask-dashboard-gradientable-screen-1.png)

---

This Flask starter being coded on top of a nice Ui Kit and released under the MIT license can be used for unlimited hobby & commercial products. Besides this, the code-base is clean and easy to digest by the main audience: beginners. Other features: 

---

- UI Kit: Gradient Able Dashboard (Free Version)
- Modular codebase coded with **Blueprints**
- SQLite/PostgreSQL database, ORM, Alembic for migrations
- Session-based authentication, basic form validation
- Deployment scripts: Docker, Gunicorn / Nginx

In case you like this simple Flask starter, we can build it using a terminal and a few basic commands. The app is coded in Python3 and to have a successful build we need a Python3 interpreter properly installed in our workstation. If you are not sure about it, please open your preferred terminal and type: 

```bash
$ python -V
Python 3.7.2 <--- All good
```
If the `python version` check returns a `3.x` version, we're all good. 

> Let's clone the [source code](https://github.com/app-generator/flask-dashboard-gradientable)

As mentioned, the app is published on Github and we can `clone` the code using `GIT` command tool or simply download the ZIP archive. 

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

After cloning/copying the sources we need to install the app dependencies listed in the [requirements.txt](https://github.com/app-generator/flask-dashboard-gradientable/blob/master/requirements.txt) file.

```bash
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
```

The next step is to set the value for `FLASK_APP` variable and we're all set. 

```bash
$ # 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"
$
$ # 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/
``` 

If all goes well, by visiting the dashboard in browser we should the login screen: 

![Flask Dashboard Gradientable - The login page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-gradientable/master/media/flask-dashboard-gradientable-screen-login.png)

By default, this Flask starter is not provisioned with default users and to pass the authentication and access the private pages we need to create a new user first by using the registration page. 

After login, we should be able to access the dashboard pages: 

> Main Dashboard Page

![Flask Dashboard Gradientable - Main dashboard page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-gradientable/master/media/flask-dashboard-gradientable-screen.png)

> Google Maps page

![Flask Dashboard Gradientable - Main dashboard page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-gradientable/master/media/flask-dashboard-gradientable-screen-2.png)

> UI Tables

![Flask Dashboard Gradientable - UI Tables page.](https://raw.githubusercontent.com/app-generator/flask-dashboard-gradientable/master/media/flask-dashboard-gradientable-screen-3.png)

---

## Code-base structure

The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:

```bash
< 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 - SQLite storage
   |-- requirements-mysql.txt    # Production modules  - Mysql DMBS
   |-- requirements-pqsql.txt    # Production modules  - PostgreSql DMBS
   |
   |-- .env                      # Inject Configuration via Environment
   |-- config.py                 # Set up the app
   |-- run.py                    # Start the app - WSGI gateway
   |
   |-- ************************************************************************
```

---

## How app starts

- `run.py` loads the `.env` file
- 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_app` defined in app/init.py
- Redirect the guest users to Login page
- Unlock the pages served by HOME blueprint for authenticated users

--- 

## App Deployment

The starter comes equipped with a basic deployment enhancement for [Docker](https://www.docker.com/). To start the app in a dockerized container we need to type a single line in the terminal (commands provided for Linux distros): 

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

If all goes well, we should see the app running in the browser by visiting `http://localhost:5005`. 

--- 

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

- 👉 More [Flask Dashboards](https://appseed.us/admin-dashboards/flask/) crafted in Django, Flask, and `React`
- 👉 More [Flask Apps](https://appseed.us/apps/flask/) - free & PAID