CoreUI - Admin Dashboard available as Jinja2 theme and Flask, Django web apps
Tags: coreui, flask, django, appseed
Published: 2020-06-09 17:10:05

---
title: CoreUI - Admin Dashboard available as Jinja2 theme and Flask, Django web apps
published: true
description: CoreUI design migrated to Jinja2, Flask, and Django
tags: coreui, flask, django, appseed
cover_image: https://raw.githubusercontent.com/app-generator/flask-dashboard-coreui/master/media/flask-dashboard-coreui-screen.png
---
Hello coders, 

This article presents the well-known **[CoreUI](https://appseed.us/admin-dashboards/django-dashboard-coreui)** design (Free Version) in three different flavors, all released under the MIT licenses on Github. For newcomers, **CoreUI** is an Open-source Bootstrap Admin Template with 10k GH stars and 2.7k forks on Github actively supported by the agency with the same name as the product - CoreUI.

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

- ✨ [CoreUI Django](https://appseed.us/admin-dashboards/django-dashboard-coreui) - product page **Django Version**
- ✨ [CoreUI Flask](https://appseed.us/admin-dashboards/flask-dashboard-coreui) - product page **Flask Version**

--- 

![CoreUI - Free admin dashboard coded in Flask.](https://raw.githubusercontent.com/app-generator/flask-dashboard-coreui/master/media/flask-dashboard-coreui-screen-3.png)

---

## ✨ CoreUI Design

*Vendor notes* - **CoreUI** is an Open Source Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high-quality icons.

---

> How to build the HTML 

```bash
$ # Clone the HTML
$ git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git
$ cd coreui-free-bootstrap-admin-template
$ 
$ yarn # install modules
$ yarn serve # development built 
$
$ yarn build # production build
$ # HTML files generated in dist/ folder
```

--- 

## ✨ [CoreUI Flask](https://appseed.us/admin-dashboards/flask-dashboard-coreui)

The Flask starter is coded using a simple code-base enhanced with a database, Flask SqlAlchemy ORM, **Blueprints**, **app-factory** pattern, and deployment scripts for Docker and Gunicorn/Nginx stack. 

---

- [CoreUI Flask](https://appseed.us/admin-dashboards/flask-dashboard-coreui) - the product page
- [CoreUI Flask Demo](https://flask-coreui.appseed-srv1.com/) - LIVE Deployment 

--- 

> Code-base structure

```bash
< PROJECT ROOT >
   |
   |-- app/                   # Implements app logic
   |    |-- base/             # Base Blueprint - handles login
   |    |-- 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
   |
   |-- ****************************************************************
```

---

> App bootstrap flow

- `run.py` loads the `.env` file
- Initialize the app using the specified profile: *Debug* or *Production*
  - If env.DEBUG is set to *True* the SQLite storage is used
  - If env.DEBUG is set to *False* the specified DB driver is used (MySql, PostgreSQL)
- Call the app factory method `create_app` defined in app/__init__.py
- Redirect the guest users to Login page
- Unlock the pages served by *home* blueprint for authenticated users

--- 

> Hot to use the code

The full instruction are saved in the [README](https://github.com/app-generator/flask-dashboard-coreui/blob/master/README.md) file, shipped along with the source code. Here is a simplified version: 

```bash
$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-coreui.git
$ cd flask-dashboard-coreui
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$ 
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/
```

By default, the app is not provisioned with any provisioning (users, roles). To unlock the private pages, please access the registration page and create a new user. 

> CoreUI - Flask version, the registration page

![CoreUI - Flask version, the registration page](https://raw.githubusercontent.com/app-generator/flask-dashboard-coreui/master/media/flask-dashboard-coreui-screen-register.png)

--- 

## [CoreUI Django](https://appseed.us/admin-dashboards/django-dashboard-coreui)

The Django version uses a similar code-base in terms of features and deployment options: 

- UI-Ready app, SQLite Database, Django Native ORM
- Modular design, clean code-base
- Session-Based Authentication, Forms validation
- Deployment scripts: Docker, Gunicorn / Nginx

---

- [CoreUI Django](https://appseed.us/admin-dashboards/django-dashboard-coreui) - the product page
- [CoreUI Django Demo](https://django-coreui.appseed-srv1.com/) - LIVE Deployment 

--- 

> How to use the code

```bash
$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-coreui.git
$ cd django-dashboard-coreui
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Start the app - custom port
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in the browser: http://127.0.0.1:8000/
```

If all goes well, we should see the `Login` page rendered in the browser. To access the private pages (dashboard, widgets, charts), please create a new user and authenticate. Some nice dashboard pages should be revealed after. 

--- 

> Thanks for reading! Feel free to AMA in the comments. 

--- 

## ✨ [CoreUI Jinja Template](https://github.com/app-generator/jinja-coreui)

In my daily workflow, I'm using usually Python backends (Flask & Django) and this conversion to Jinja2 is the first thing that comes into my mind when I work with a new design. 

This theme is bundled in a super simple Flask app, no database, ORM or any other helpers involved in the equation - just Jinja2 files rendered by the Flask magic. 

---

- [CoreUI Jinja Demo](https://jinja-coreui.appseed-srv1.com/) - LIVE Demo
- [CoreUI Jinja Template](https://github.com/app-generator/jinja-coreui) - the source code

---

The theme can be easily built & rendered locally if you have already GIT & Python3 installed - let's open a terminal and type a few simple commands: 

```bash
$ git clone https://github.com/app-generator/jinja-coreui.git
$ cd jinja-coreui
$
$ # Install Flask
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ flask run
$
$ # Access the UI in browser: http://127.0.0.1:5000/
```

If all goes well, the CoreUI design should be visible in your preferred browser. There is no login/registration lock, and all pages provided by the HTML theme must be rendered without errors. 

--- 

> CoreUI - Jinja2 Theme, the LOGIN page

![CoreUI - Jinja2 Theme, the LOGIN page.](https://raw.githubusercontent.com/app-generator/theme-jinja2-coreui/master/media/theme-jinja2-coreui-screen-login.png) 

--- 

> CoreUI - Jinja2 Theme, the Colors page

![CoreUI - Jinja2 Theme, the LOGIN page.](https://raw.githubusercontent.com/app-generator/theme-jinja2-coreui/master/media/theme-jinja2-coreui-screen-3.png) 

---

### Links & Resources

- [Jinja2 Theme - CoreUI](https://github.com/app-generator/jinja-coreui)
- [Flask CoreUI](https://appseed.us/admin-dashboards/flask-dashboard-coreui)
- [Django CoreUI](https://appseed.us/admin-dashboards/django-dashboard-coreui)
- More starters coded on top of [CoreUI](https://appseed.us/agency/coreui) design