Flask Dashboard Argon - from Zero to Full-Stack

Hello Coder,

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

Install Flask

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

$ pip install Flask

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

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

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()
__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!'

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/

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

Flask Argon Dashboard - First run

Future Steps

Resources

Enjoy this? Read more about Flask Dashboards.  

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.