loading...
Cover image for Flask Boilerplate - Argon Dashboard

Flask Boilerplate - Argon Dashboard

sm0ke profile image Sm0ke Updated on ・5 min read

Hello coder,

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


In case you want to start faster your next admin dashboard project check out this index with Open Source Admin Dashboards already coded with authentication, database, and deploy scripts - Provided by AppSeed.


The admin panel coded during this tutorial, Flask Dashboard Argon is released as an open-source project, under the MIT license. Feel free to use it in your projects. In case you want to build the app, without leaving this page, just type:

$ # 1. Get the code
$ git clone https://github.com/app-generator/flask-boilerplate-dashboard-argon.git
$ cd flask-boilerplate-dashboard-argon
$
$ # install modules using a virtualenv
$ virtualenv --no-site-packages env
$ source env/bin/activate
$ 
$ # 2. Install requirements
$ # SQLIte version (no PostgreSQL)
$ pip install -r requirements-sqlite.txt
$ 
$ # OR with PostgreSQL connector
$ pip install -r requirements.txt
$
$ # 3. Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=appseed-app.py
$ (Windows) set FLASK_APP=appseed-app.py
$ (Powershell) $env:FLASK_APP = ".\appseed-app.py"
$
$ # 4. Run the application
$ flask run --host=0.0.0.0
$
$ # 5. Go to http://127.0.0.1:5000/, create an account and log in

Flask Argon Dashboard - Open-Source Admin Dashboard.


What is Flask

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 a production-ready admin dashboard.


What is a Boilerplate Code

In computer programming, boilerplate code refers to sections of code that have to be included in many places with little or no alteration. Write once, and reuse over and over. You may read more about boilerplate code on Wikipedia.


Argon Dashboard

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 official Argon Dashboard product page.


Setup the environment

To start coding our flask boilerplate 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

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

$ pip install Flask

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 )

Flask Boilerplate - Image with the minimal file structure.

# run.py

from app import app

if __name__ == "__main__":
    app.run()
# __init__.py

from flask import Flask

app = Flask(__name__)

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

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/

Flask Boilerplate - First run


Integrate Argon Dashboard 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.

In my Flask application, I'm using Jinja2, a popular templating engine.

Jinja2 is a modern and designer-friendly templating language for Python, modeled after Django’s templates. It is fast, widely used and secure with the optional sandboxed template execution environment.

Install Jinja2 - by using PIP, and test the installation

$ 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!'
$ >>>

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 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

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') )

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


Related topics


Not here what you're looking for? Please suggest in the comments.


Other Flask Starters


Resources


Thank you!

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide