CoreUI - Admin Dashboard available as Jinja2 theme and Flask, Django web apps

#coreui #flask #django #appseed

Hello coders,

This article presents the well-known 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.

✨ CoreUI Django - product page Django Version
✨ CoreUI Flask - product page Flask Version

✨ 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

$ # 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

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 - the product page
CoreUI Flask Demo - LIVE Deployment

Code-base structure

< 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 file, shipped along with the source code. Here is a simplified version:

$ # 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 Django

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 - the product page
CoreUI Django Demo - LIVE Deployment

How to use the code

$ # 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

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 - LIVE Demo
CoreUI Jinja Template - 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:

$ 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.