loading...
Cover image for Star Admin - Flask Dashboard Example

Star Admin - Flask Dashboard Example

sm0ke profile image Sm0ke ・5 min read

Hello Coders,

This article presents another free Flask Dashboard Example coded on top of a nice UI - Star Admin (Free Version), provided by BootstrapDash.

The Flask Dashboard source code, released under the MIT License on Github, is actively supported by AppSeed via Github (issues tracker) and Discord - 24/7 LIVE Service.


Star Admin Flask - Links

Star Admin - Coded in Flask with database, authentication and deploy scripts by AppSeed.


Star Admin - HTML Version

Vendor Notes (BootstrapDash) - Star Admin is a free responsive admin template built with Bootstrap 4. The template has a colorful, attractive yet simple and elegant design. The template is well crafted, with all the components neatly and carefully designed and arranged within the template.

Star Admin is packed with all the features that fit your needs but not cramped with components you would not even use. It is an excellent fit to build admin panels, e-commerce systems, project management systems, CMS, or CRM.

In case anyone has the curiosity to build the HTML files, please access the official repository - Star Admin Free Dashboard, clone the code and follow the instructions provided in the README file.


Star Admin - HTML files build

$ # Clone the sources
$ https://github.com/BootstrapDash/StarAdmin-Free-Bootstrap-Admin-Template.git star-admin
$ cd star-admin
$
$ # Install Moduled
$ yarn
$
$ # Compile files 
$ gulp serve

The tooling provided in the HTML version is using Gulp to compile SCSS and JS Vendor libs. This toolchain is not state-of-the-art but is working and does the job.


Star Admin - Flask Version

The project is a simple, unopinionated Flask starter coded with a short-list of modules and deployment scripts for some well-known platforms: Docker, Heroku - app features:

  • SQLite, PostgreSQL, SQLAlchemy ORM
  • Alembic (DB schema migrations)
  • Modular design with Blueprints
  • Session-Based authentication (via flask_login)
  • Forms validation
  • Deployment scripts: Docker, Gunicorn / Nginx, Heroku
  • Active Support via Github and Discord.

How to use the code

To use the stater, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full-list with dependencies and tools required to build the app:

  • Python3 - the programming language used to code the app
  • GIT - used to clone the source code from the Github repository
  • Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.

For more information on how to set up your environment please access the resources listed below. In case I've missed something, feel free to ask me anything in the comments - I'm here on Dev almost daily.


App Codebase (simplified)

Starter uses a simple codebase, with two Blueprints and a structure presented below:

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

Compile the sources

To built and start the Star Admin Flask locally, we need to clone the public repository or download the ZIP archive and after prepare and compile the source code.

$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-staradmin.git
$ cd flask-dashboard-staradmin
$
$ # 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 Database
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"
$
$ # Set up the DEBUG environment
$ # (Unix/Mac) export FLASK_ENV=development
$ # (Windows) set FLASK_ENV=development
$ # (Powershell) $env:FLASK_ENV = "development"
$
$ # Start the application (development mode)
$ flask run 
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/

If all goes well, we should see the app running in the browser. To unlock the private pages and pass the login, first, we need to create a new user using the registration page:

Star Admin - Flask, registration page

After we pass the login, the app will unlock some nice pages:


Star Admin - Flask, UI Elements

Star Admin - Flask, UI Elements.


Star Admin - Flask, Dashboard Page

Star Admin - Flask, Dashboard Page.


Star Admin - Flask, ChartsPage

Star Admin - Flask, Charts Page.


Thanks for reading! Let me know your thoughts in the comments.


Links & Resources


More about Flask

Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.

By using a framework we can reuse modules and features already coded and tested by other developers. Using Flask we can skip over coding from scratch a few modules, common to many web apps:

  • Authentication - we need to know who is using our app
  • ORM - to manipulate the database information with ease
  • Routing - for sure we can code our own routing system .. but, why?!
  • Deployment - Flask is well documented when we need to deploy our work in production.
  • Community - using a Framework we can get help from other fellow developers that might face the same issues

Compared to his older brother Django, Flask provides much freedom to the developer because only offers suggestions, but does not enforce any dependencies for project layout.
To read more about Flask, please access:

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide