Hello Coder,
This article is part of the tutorial Flask Dashboard Argon - from Zero to Full-Stack. The final product, coded during this tutorial, can be accessed here.
In this article explain the integration of Argon Dashboard design into an existing Flask application built in the previous step. In order to use the design 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
Enjoy this? Read more about Flask Dashboards.
Thank you!