DEV Community

Cover image for Flask Boilerplate - Argon Dashboard
Sm0ke
Sm0ke

Posted on • Updated on • Originally published at appseed.us

Flask Boilerplate - Argon Dashboard

Hello coder,

This learn-by-coding tutorial will describe step by step how to build a Flask Boilerplate, on top of Argon Dashboard a modern UI kit built with 100+ individual components and pre-built pages (login, dashboard, user profile). By using this modern design you will save a lot of time going from prototyping to full-functional code because all elements are implemented.

Thanks for reading! - Content provided by App Generator.



The admin panel coded during this tutorial, Flask Dashboard Argon is released under the MIT license. Feel free to use it in your projects.

This simple starter can be compiled and start locally without much effort, just by typing a few commands in the terminal.


1# - Clone the code

$ git clone https://github.com/app-generator/flask-boilerplate-dashboard-argon.git
$ cd flask-boilerplate-dashboard-argon
Enter fullscreen mode Exit fullscreen mode

2# - Install modules/dependencies

$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

3# - Set up environment & start the APP

$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Start the application (development mode)
$ flask run 
$
$ # Access the dashboard in the browser: http://127.0.0.1:5000/
Enter fullscreen mode Exit fullscreen mode

By default, this simple Flask start is not provided with a default user. To create a new one, access the registration page and use the same credentials (user/password) to authenticate.


Flask Argon Dashboard - Open-Source Admin Dashboard.


✨ 1# - Setup the environment

To start coding our Flask starter 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 your 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
Enter fullscreen mode Exit fullscreen mode

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

$ pip install Flask
Enter fullscreen mode Exit fullscreen mode

✨ 2# - Hello from Flask

Set up a new project, with Flask is quite easy. We need only two files and a small update in our environment:

  • run.py - the app launcher
  • init.py - the file that represents the app constructor
  • Set up FLASK_APP variable export FLASK_APP=run.py to point to the app launcher file ( e.g. run.py )

< 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
   |
   |-- ************************************************************************
Enter fullscreen mode Exit fullscreen mode

# run.py

from app import app

if __name__ == "__main__":
    app.run()
Enter fullscreen mode Exit fullscreen mode

# __init__.py

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello from Flask!'
Enter fullscreen mode Exit fullscreen mode

Start the application by typing flask run and visit the browser:

$ flask run
 * Serving Flask app "run.py" (lazy loading)
 * Environment: production
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Running on http://127.0.0.1:5000/
Enter fullscreen mode Exit fullscreen mode

Flask Boilerplate - First run


✨ 3# - Integrate Argon Design

Our boilerplate now runs, but it's an empty, unstyled page. In order to provide something useful, let's integrate a nice UI, equipped with basic UI modules and designed by professionals: Argon Dashboard crafted by Creative-Tim.


$ pip install Jinja2
$ 
$ python # lunch Python console
$ >>>
$ >>> from jinja2 import Template
$ >>> template = Template('Hello {{ my_variable }}!')
$ >>> template.render(my_variable='from Jinja2')
$ 'Hello from Jinja2!'
$ >>>
Enter fullscreen mode Exit fullscreen mode

The design integration phase usually is time-consuming and boring. Because I'm a lazy person I've written a tool that automates almost entirely this HTML to Jinja2 templating translation. The basic steps are:

  • detect the master page layout and save it as a template where the page-specific chunks are injected
  • extract containers for header, footer, and other repetitive HTML components shared among pages
  • replace the hardcoded texts with variables. For instance, the page title should change for each page. For doing this, each time a page loads, the page title is injected into the page using a new value.

Argon Dashboard, Jinja2 master page - source here


Flask Boilerplate Argon Design - Jinja2 master page


  • Footer Jinja Template - source code
  • Header Jinja Template - source code
  • Sidenav Jinja Template - source code

At this point, we need to effectively use the templates and show the new UI interface to the user. Updates in the code are:


from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template(  'layouts/default.html',
                             content=render_template( 'pages/index.html') )
Enter fullscreen mode Exit fullscreen mode

The integration code is quite intuitive, and does the following:

  • import render_template helper to load and process the Jinja2 templates
  • index() method use the render_template helper to build the page
  • render the page via Jinja templating engine

Flask boilerplate - Jinja2 render


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

Top comments (0)