Jinja Template - Argon Dashboard
Tags: webdev, jinja, argon, appseed
Published: 2020-08-15 09:07:37

---
title: Jinja Template - Argon Dashboard
published: true
description: Argon Design (free version) is now available as Jinja2 template under the MIT license
tags: webdev, jinja, argon, appseed
cover_image: https://raw.githubusercontent.com/app-generator/jinja-template-argon-dashboard/master/media/jinja-template-argon-dashboard-screen.png
---
This article presents a free **Jinja Template** generated by the AppSeed platform using **Argon Dashboard** design, crafted by Creative-Tim, as input. The project is basically a lightweight Flask app (no database or hard dependencies) that can be used for production-ready Python projects like Django/Flask dashboards. For newcomers, **Argon Dashboard** is an open-source Bootstrap 4 design provided with many components, pages, and SASS files. 

**Thanks for reading!**

---

- [Jinja Template - Argon Dashboard](https://github.com/app-generator/jinja-template-argon-dashboard), the source code
- [Flask Argon Dashboard](https://appseed.us/admin-dashboards/flask-boilerplate-dashboard-argon) - enhanced version

---

![Jinja Template - Argon Dashboard, animated presentation.](https://raw.githubusercontent.com/app-generator/jinja-template-argon-dashboard/master/media/jinja-template-argon-dashboard-intro.gif) 

---

## [What is Jinja](https://docs.appseed.us/what-is/jinja/)

**Jinja** 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. Jinja is basically an engine used to generate HTML or XML returned to the user via an HTTP response.

For those who have not been exposed to a templating language before, such languages essentially contain variables as well as some programming logic, which when evaluated (or rendered into HTML) are replaced with actual values.

---

## Why do we need Jinja?

**Sandboxed Execution** - It provides a protected framework for automation of testing programs, whose behavior is unknown and must be investigated.

**HTML Escaping** Jinja 2 has a powerful automatic HTML Escaping, which helps to prevent Cross-site Scripting (XSS Attack). There are special characters like >,<,&, etc. which carry special meanings in the templates. So, if you want to use them as regular text in your documents then, replace them with entities. Not doing so might lead to XSS-Attack.

**Template Inheritance** - This feature helps us to generate new pages starting from a base template that we *inherit* a common structure. 

--- 

> How to get Jinja2

To start playing with it, just open a terminal and type:

```bash
$ pip install jinja2
```

---

## Jinja in action

> Simple runtime replace 

```python
>>> from jinja2 import Template
>>> t = Template("Hello {{ token }}!")
>>> t.render(token="Jinja2")
u'Hello Jinja2!'
```

The engine will replace the inner `token` with value `Jinja2`. This is quite useful when we use this block for different `token` values.

> Jinja Links

- [Jinja2](https://palletsprojects.com/p/jinja/) - the official website
- [Jinja2 Documentation](https://jinja.palletsprojects.com/)

--- 

### Jinja Argon Dashboard

To use or compile the project we need at least Python3 properly installed in our workstation. If you're not sure about it, please open a terminal window and type `python --version`. 

```bash
$ # Check Python version
$ python --version
Python 3.7.2 # <--- All good
```
Using GIT to clone the source code is also recommended but optional. We can download the sources in ZIP format, no need to be familiar with a versioning system like GIT, in our case.

---

> Codebase structure

```bash
< PROJECT ROOT >
   |
   |-- app/__init__.py
   |-- app/
   |    |-- static/
   |    |    |-- <css, JS, images>         # UI KIT assets
   |    |
   |    |-- templates/
   |    |    |
   |    |    |-- includes/                 # HTML chunks
   |    |    |    |
   |    |    |    |-- navigation.html      # Top bar
   |    |    |    |-- sidebar.html         # Left sidebar
   |    |    |    |-- scripts.html         # JS scripts
   |    |    |    |-- footer.html          # The common footer
   |    |    |
   |    |    |-- layouts/                  # App Layouts
   |    |    |    |
   |    |    |    |-- base.html            # Used by common pages 
   |    |    |    |-- base-fullscreen.html # Used by auth pages 
   |    |    |
   |    |  index.html                      # The default page
   |    |  login.html                      # Auth Login Page
   |    |  register.html                   # Registration Page
   |    |  page-404.html                   # Error 404 page 
   |    |  page-500.html                   # Error 500 page
   |    |    *.html                        # All other pages 
   |
   |-- requirements.txt
   |
   |-- run.py
   |
   |-- ********************************************
```

---

> How to compile the source

The following (simplified) snippet is extracted from the [README](https://github.com/app-generator/jinja-template-argon-dashboard/blob/master/README.md) file. For full set up (major OSs) please access the project sources and follow the build instructions related to your OS. In case of any issues, don't hesitate to ask anything in the comments or request for LIVE support via [Discord](https://discord.gg/fZC6hup).

```bash
$ # Clone the sources
$ git clone https://github.com/app-generator/jinja-template-argon-dashboard.git
$ cd jinja-template-argon-dashboard
$
$ # Virtualenv set up
$ virtualenv env
$ source env/bin/activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Run the Jinja Template
$ flask run
$
$ # Access the UI in browser: http://127.0.0.1:5000/
```

If all goes well, we should see in the browser some nice pages, rendered by Jinja:

- [UI Icons](https://jinja-template-argon-dashboard.appseed.us/icons.html)
- [Google Maps](https://jinja-template-argon-dashboard.appseed.us/map.html)
- [UI Tables](https://jinja-template-argon-dashboard.appseed.us/tables.html)
- [Register Page](https://jinja-template-argon-dashboard.appseed.us/register.html)
- [User Profile](https://jinja-template-argon-dashboard.appseed.us/profile.html)

---

![Jinja Template - Argon Dashboard, user profile.](https://raw.githubusercontent.com/app-generator/jinja-template-argon-dashboard/master/media/jinja-template-argon-dashboard-screen-3.png)

---

> UI Tables

![Jinja Template - Argon Dashboard, UI Tables.](https://raw.githubusercontent.com/app-generator/jinja-template-argon-dashboard/master/media/jinja-template-argon-dashboard-screen-5.png)

---

> Google Maps 

![Jinja Template - Argon Dashboard, Google Maps.](https://raw.githubusercontent.com/app-generator/jinja-template-argon-dashboard/master/media/jinja-template-argon-dashboard-screen-4.png)

---

>  Thank you!

---

### Links & resources

- [Jinja Template - Argon Sources](https://github.com/app-generator/jinja-template-argon-dashboard), published on Github
- More [Flask/Jinja Templates](https://appseed.us/admin-dashboards/flask) - a curated list