loading...
Cover image for CoreUI - Admin Dashboard available as Jinja2 theme and Flask, Django web apps

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

sm0ke profile image Sm0ke Updated on ・5 min read

Hello coders,

This article presents the well-known CoreUI design (Free Version) in three different flavors, all released under the MIT licenses on Github:


CoreUI - Free admin dashboard coded in Flask.


CoreUI Design

With 10k GH stars and 2.7k forks, CoreUi is definitely a popular admin dashboard design, actively supported by the mother web agency. The product is published on Github (MIT License) with modern tooling that uses PUG to Html file translations.

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 - Jinja2 Theme

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.

Links


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/theme-jinja2-coreui.git
$ cd theme-jinja2-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.


CoreUI - Jinja2 Theme, the Colors page

CoreUI - Jinja2 Theme, the LOGIN page.


CoreUI - Flask version

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

Links


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 - Flask version, the registration page


CoreUI - Django version

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

The bootstrap flow

  • Django bootstrapper manage.py uses core/settings.py as the main configuration file
  • core/settings.py loads the app magic from .env file
  • Redirect the guest users to Login page
  • Unlock the pages served by app node for authenticated users

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


Links & Resources

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide
 

CoreUI is quite a nice UI kit, nicely supported & versioned.

 

Agree. :) Thanks for reading!