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.

---

• ✨ Flask Argon Dashboard - product page
• ✨ Flask Argon Dashboard - LIVE Demo

---

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

---

✨ 2# - Install modules/dependencies

$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt

---

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

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.

---

---

✨ 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

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

$ pip install Flask

---

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

---

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

---

---

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

---

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

---

---

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

---

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

---

---

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

• 👉 More Flask Dashboards crafted in Django, Flask, and React
• 👉 More Flask Apps - free & PAID