Flask Dashboard Argon

Flask Dashboard Argon - from Zero to Full-Stack

This 'learn-by-coding' tutorial will describe step by step how to build a Flask Dashboard, on top of Argon Dashboard design, crafted by Creative-Tim.

The final product, coded during this tutorial, can be accessed here. Is fully documented and the source code is available on Github. Enjoy it!

Flask Dashboard Argon - Admin Panel coded in Flask

Design description

Argon Dashboard is a free product designed by Creative-Tim, released under MIT license. The design includes more than 100 components and can be easily customized via SaaS files. For more information, and design details please access the product page.

Flask - a short introduction

Flask (source code) is a Python web framework built with a small core and modularity in mind. With a small footprint, well documented and supported by a growing community, Flask can be a good choice to implement on top a nice production-ready Admin Dashboard.

Setup the environment

To start coding our dashboard we need Python an Flask to be correctly installed on our system. For newcomers, Python can be downloaded from the official website. Just select the installer for you operating system and click a few times. To check the installation, open a terminal and type `python --version`. You should see something similar to this:

$ python --version
$ Python 3.7.2
12

Install Flask

The most easier way to install Flask is to use PIP (python package manager):

$ pip install Flask
1

To double check the installation, open a python terminal and import Flask:

$ python
$ Python 3.7.2 ... on win32
$ >>>
$ >>> from flask import Flask
$ >>> 
12345

If all goes well, no errors will be displayed after Flask import.

Let's Code

Flask let the developer to decide the app structure (and this in my option, it's amazing). We will add the minimum amount of files to have a running Flask application.

Flask Argon Dashboard - the minimal structure

Where each file represents:

run.py - the app luncher, responsible to put all resources in one place

from app import app

if __name__ == "__main__":
    app.run()
1234

__init.py - it's a special file that `constructs` our app

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello from Flask!'
1234567

Update the environment

Before running your app you must set the variable FLASK_APP, to inform Flask what should be executed first

• Set up for Unix: export FLASK_APP=run.py

• Set up for Windows CMD set FLASK_APP=hello.py

• Set up for Windows Powershell $env:FLASK_APP = "run.py"

Exec the app

type `flask run` in the directory where run.py is saved

$ flask run
 * Serving Flask app "run.py" (lazy loading)
 * Environment: production
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 163-791-149
 * Running on http://127.0.0.1:5000/
12345678

If all goes well, access http://localhost:5000 in your preferred browser. You shout see this:

Flask Argon Dashboard - First run

Future Steps

• Integrate Argon Dashboard design

• Add SQLLite Database and SQLAlchemy ORM

• Add Authentication (register and login)

• Connect the dashboard to real data

• Deployment

Resources

• Live demo - something to click on

• Sources - published on Github

• App info - read more about this product

• Documentation - learn to build an customize the app

Enjoy this? Read more about Flask Dashboards.

Docs - Demo Reference : https://blog.appseed.us/flask-dashboard-argon-zero-to-full-stack/