Flask Light Bootstrap - Learn Flask by coding

Hello Coders,

This article presents a super simple Flask Dashboard coded with basic modules on top of a free design - Light Bootstrap Dashboard. The project might be useful in a few scenarios:

• You like to learn-by-coding new features on top of open-source projects
• You want to deliver a new project on top of a new design without reinventing the wheel and code basic features

Anyway, the goal of this project is to help developers to code less and skip over the common features, usually required by many projects: database, ORM, tested codebase, and deployment scripts.

Thank you for reading! The relevant links are below:

• Flask Light Bootstrap - product page
• Flask Light Bootstrap - LIVE Demo

Light Bootstrap Dashboard

This simple material-based design is provided for free by Creative-Tim, an active player in the open-source ecosystem. The HTML version can be downloaded directly from Github (no account required) and can be used directly without limitations in hobby & commercial projects.

Light Bootstrap Dashboard is Bootstrap 4 admin dashboard template designed to be beautiful and simple. It is built on top of Bootstrap 4 and it is fully responsive. It comes with a big collection of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM.

The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard contains multiple handpicked and optimized plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access Creative Tim is a customization of this product.

Flask Codebase

The features provided out-of-the-box aim to help any developer with basic Python/Flask knowledge to code faster a new project without coding the bottom layer for his project. Here are the features:

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

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

Flask Light Bootstrap - Compile

Once we have the Python3 environment up & running, we can start compiling the app and acommodate with the structure.To built and start the app locally, follow the steps:

Get the source code

• Download the ZIP from Github Repository
• Using GIT tool in the terminal to clone the source code

Change the current directory to source code directory and type:

$ # Make sure you are running the commands INSIDE source code directory
$
$ # Set up Virtualenv (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Run the application
$ flask run
$
$ # Access the app in browser: http://127.0.0.1:5000/

At this point, we can visit the app in the browser http://127.0.0.1:5000/. By default, the app will redirect guest users to the login page. To access the private pages:

• Create a new user using the registration page
• Authenticate using the login page

App Codebase (simplified)

Starter uses a simple codebase with 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
   |
   |-- ************************************************************************

The 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

Flask Light Bootstrap - Screens

The UI kit is provided with a nice set of UI components and pre-built pages to help you getting started fast.

User Profile Page

Google Maps Page

UI Alerts Page

**Thanks for reading!

This simple Flask starter coded with basic modules, database and deployment scripts, migth help developers to win time without reinventing wheel once a new project is started.
In case of any issues using this project, feel free to contact me in private or via the comments section.

Links & Resources

• More Open-Source Starters provided by AppSeed
• More Flask Dashboards - a curated list