DEV Community

loading...
Cover image for Flask AdminLTE - Free Flask Dashboard

Flask AdminLTE - Free Flask Dashboard

admindashboards profile image admin-dashboards Originally published at appseed.us Updated on ・4 min read

Hello Coders,

This article presents AdminLTE Flask, an open-source admin dashboard template coded in Flask. For newcomers, AdminLTE is a well-known design actively supported by 150+ contributors and 35k Github stars.



The project is released under the MIT license and is supported via Github (issues tracker) and Discord - AppSeed LIVE support service.


AdminLTE Flask - Charts Page.


Product Description

Using a starter to develop a new project, might help you to win some time based on the fact that the basic modules and configuration is already done and tested by others. Of course, this is not helpful all the time, and personally, I'm using starters in two cases:

  • Super simple projects
  • Projects a little bit complex, when I need some assistance

For me, in most of my projects, I need a basic authentication, a database, a decent ORM, and pre-configured deployment scrips. Well, this starter presented here, offer all those features "out-of-the-box".

For more information, please access the product page or get in touch with the support team that centralizes and processes all starter issues.


How to build the code

To build locally this free starter, we need to have a prepared environment, where Python3 is the main requirement. 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.

How to build the app

To built and start the app locally, follow the steps:

Get the source code

  • Download the ZIP from Github: Flask AdminLTE Sources
  • Using GIT tool in the terminal to clone the source code

Change the current directory to the source code directory.

Clone/download the sources

$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-adminlte.git
$ cd flask-dashboard-adminlte
Enter fullscreen mode Exit fullscreen mode

Set up the environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

Install modules

$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

Start the Flask application

$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Start the application (development mode)
$ flask run
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/
Enter fullscreen mode Exit fullscreen mode

Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.


Codebase structure

The project is coded using blueprints, app factory pattern, dual configuration profile (development and production), and an intuitive structure presented bellow:

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

Bonus - Deploy on Heroku

For newcomers, Heroku is a great platform for automated deployments. Using this platform, we can deploy Flask, Django project with ease - Flask AdminLTE it's a living sample:


Steps to deploy on Heroku

  • Create a FREE account on the HEROKU platform
  • Install the Heroku CLI that match your OS: Mac, Unix or Windows
  • Open a terminal window and authenticate via heroku login command
  • Clone the sources and push the project for LIVE deployment
$ # Clone the source code:
$ git clone https://github.com/app-generator/flask-dashboard-adminlte.git
$ cd flask-dashboard-adminlte
$
$ # Check Heroku CLI is installed
$ heroku -v
heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good
$
$ # Check Heroku CLI is installed
$ heroku login
$ # this commaond will open a browser window - click the login button (in browser)
$
$ # Create the Heroku project
$ heroku create
$
$ # Trigger the LIVE deploy
$ git push heroku master
$
$ # Open the LIVE app in browser
$ heroku open
Enter fullscreen mode Exit fullscreen mode

That was super easy, right?


Thanks for reading! Please find below some useful links, related to this content. Also, if you find this content useful, drop a message in the comments.


Links & resources

Discussion

pic
Editor guide