Flask Boilerplate - Argon Dashboard
Tags: flask, boilerplate, appseed
Published: 2019-07-03 15:06:32

---
title: Flask Boilerplate - Argon Dashboard
published: true
description: Learn to code a Flask Boilerplate on top of Argon Dashboard design
cover_image: https://github.com/app-generator/static/blob/master/admin-dashboards/argon-dashboard-coded-in-flask-cover.jpg?raw=true
tags: flask,  boilerplate,  appseed
canonical_url: https://appseed.us/admin-dashboards/flask-boilerplate-dashboard-argon
---
Hello coder,

This *learn-by-coding* tutorial will describe step by step how to build a **[Flask  Boilerplate](https://appseed.us/product/argon-dashboard/flask/)**, 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](https://appseed.us/)**.

---

- ✨ [Flask Argon Dashboard](https://appseed.us/product/argon-dashboard/flask/) - product page
- ✨ [Flask Argon Dashboard](https://flask-argon-dashboard.appseed-srv1.com/) - LIVE Demo

---

The **admin panel** coded during this tutorial, **[Flask Dashboard Argon](https://appseed.us/admin-dashboards/flask-boilerplate-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**

```bash
$ git clone https://github.com/app-generator/flask-boilerplate-dashboard-argon.git
$ cd flask-boilerplate-dashboard-argon
```

---

> ✨ **2# - Install modules/dependencies**

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

---

> ✨ **3# - Set up environment & start the APP**

```bash
$ # 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. 

---

![Flask Argon Dashboard - Open-Source Admin Dashboard.](https://raw.githubusercontent.com/app-generator/flask-boilerplate-dashboard-argon/master/media/flask-boilerplate-dashboard-argon-screen.png)

--- 

### ✨ 1# - Setup the environment

To start coding our **[Flask](https://appseed.us/admin-dashboards/flask/)** starter we need [Python](https://www.python.org/) an [Flask](http://flask.pocoo.org/) to be correctly installed on our system.  
For newcomers, Python can be [downloaded](https://www.python.org/downloads/) 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:

```bash
$ python --version
$ Python 3.7.2
```  

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

```bash
$ 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* ) 

---

```bash
< 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
   |
   |-- ************************************************************************
```

---

```python
# run.py

from app import app

if __name__ == "__main__":
    app.run()
```

---

```python
# __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:

```bash
$ 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](https://raw.githubusercontent.com/app-generator/static/master/flask-argon-dashboard-tutorial/flask-app-first-run.jpg)

---

### ✨ 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](https://www.creative-tim.com/product/argon-dashboard?ref=appseed) crafted by **Creative-Tim**.  

----

```bash
$ 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](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/templates/layouts/default.html)

---

![Flask Boilerplate Argon Design - Jinja2 master page](https://raw.githubusercontent.com/app-generator/static/master/flask-argon-dashboard-tutorial/flask-app-integrate-design-master-page.jpg)

---

 - [Footer](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/templates/includes/footer.html) Jinja Template - source code
 - [Header](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/templates/includes/header.html) Jinja Template - source code
 - [Sidenav](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/templates/includes/sidenav.html) 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:

---

```python
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](https://raw.githubusercontent.com/app-generator/static/master/flask-argon-dashboard-tutorial/flask-app-integrate-design-original-page.jpg)

---

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

- 👉 More [Flask Dashboards](https://appseed.us/admin-dashboards/flask/) crafted in Django, Flask, and `React`
- 👉 More [Flask Apps](https://appseed.us/apps/flask/) - free & PAID