Flask Dashboard Argon - Integrate the design

Hello Coder,

This is part of the tutorial Flask Dashboard Argon - from Zero to Full-Stack. Thank you for reading!

In this article we will integrate the Argon Dashboard design into the Flask application built in the previous step.  Of course the first step is to download the html files, unzip the archive and to tale a closer look. In order to use the HTML files into our Flask application, all HTML must be converted to Jinja2 templates, the native templating system used by Flask

Adding Jinja2 templating

Jinja2 can be installed easily using PIP or easy install

easy_install Jinja2
pip install Jinja2 # recommended

To test the installation and to accommodate with Jinja2 templates, just run:

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

Basically, this code snippet, load a simple HTML chunk represented by the string `Hello from {{ my_variable }}` and inject the value into the template. In a similar way we can build complex pages from smaller parts.

Convert HTML to Jinja2

The original page

Let's take a look at the untouched dashboard page, as we downloaded from the publisher. The index.html, saved in the root of the archive corresponds  to the main dashboard view:

The original HTML

Now the mission is to translate the HTML into Jinja2 templates

Fortunately, we have developed tools to translate automatically HTML into Jinja2, and the result is:

Master page, where all other content will be injected

Now we can see a simplified structure compared to the HTML version. All page chunks are extracted and saved separate files:

• Footer, Header, Scripts, Sidenav
• All other pages (profile, icons tables) are processed in the same way

Now, we need to use all those templates and see something closer to a real dashboard. In order to load the template the code of __init.py should be updated as bellow:

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 code is quite simple and intuitive, and the updates are:

• import `render_template` helper to load and process the Jinja2 templates
• index() method update to use the `render_template` helper

the result is similar with the original page, but now is rendered via Jinja2 templating:

Future Steps

• Add SQLite Database and SQLAlchemy ORM
• Add Authentication (register and login)
• Connect the dashboard to real data
• Deployment

Argon Dashboard Resources

• 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

Thank you for reading!