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!
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
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.
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.
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:
- Set up for Windows CMD
- 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:
- Integrate Argon Dashboard design
- Add SQLLite Database and SQLAlchemy ORM
- Add Authentication (register and login)
- Connect the dashboard to real data
- 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.