DEV Community

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

Posted on • Updated on

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

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 - Free admin dashboard coded in Flask.


✨ 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
Enter fullscreen mode Exit fullscreen mode

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.



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
   |
   |-- ****************************************************************
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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

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


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/
Enter fullscreen mode Exit fullscreen mode

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.



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/
Enter fullscreen mode Exit fullscreen mode

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.


Links & Resources

Top comments (2)

Collapse
 
crearesite profile image
WebsiteMarket

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

Collapse
 
sm0ke profile image
Sm0ke

Agree. :) Thanks for reading!