Free Bootstrap 5 Dashboard - Built with Flask and Docker

Hello Coders!

This article presents a simple Admin Dashboard built with Flask and Docker on top of a modern Bootstrap 5 design: Volt Dashboard. The product can be used in many ways from simple learning to bootstrap a production-ready project with speed. For newcomers, Flask is a popular lightweight web framework, and Docker is a virtualization software used to build and deliver software.

Thanks for reading! - Content provided by App Generator.

Flask Volt Bootstrap 5 - product page (contains DEMO and sources)

Probably the most easier way to start and use this free product is to download the sources from the product page and start the app in Docker.

Step #1 - Download and unzip sources

$ unzip flask-dashboard-volt.zip
$ cd flask-dashboard-volt

Step #2 - Start in Docker

$ docker-compose pull 
$ docker-compose build 
$ docker-compose up

Once all the above commands are executed, we can visit Flask Volt in the browser http://localhost:85 and interact with the UI.

The relevant files, listed below, can be used to Dockerize any Flask project with ease:

• Dockerfile - the entry point for Docker setup
• docker-compose.yml - configure the modules and network layers used to deploy the project
• gunicorn-cfg.py - configure the Gunicorn (WSGI) Server
• Nginx - the HTTP server that handles the browser requests

Dockerfile - File contents

FROM python:3.9

COPY . .

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# install python dependencies
RUN pip install --upgrade pip
RUN pip install --no-cache-dir -r requirements.txt

# gunicorn
CMD ["gunicorn", "--config", "gunicorn-cfg.py", "run:app"]

The file basically copy the sources inside the Docker container, uses Python 3.9 as runtime environment, install the dependencies and Gunicorn as WSGI server.

docker-compose.yml - Docker stack configurator

version: '3.8'
services:
  appseed-app:
    container_name: appseed_app
    restart: always
    env_file: .env
    build: .
    networks:
      - db_network
      - web_network
  nginx:
    container_name: nginx
    restart: always
    image: "nginx:latest"
    ports:
      - "85:85"
    volumes:
      - ./nginx:/etc/nginx/conf.d
    networks:
      - web_network
    depends_on: 
      - appseed-app
networks:
  db_network:
    driver: bridge
  web_network:
    driver: bridge 

The above settings will expose the app on port 85 (see ports node)

To integrate the files to another project, all we need is to edit the Dockerfile to match the new app signature (run:app for this sample) and just copy all mentioned files.

...
CMD ["gunicorn", "--config", "gunicorn-cfg.py", "run:app"]

When the project runs in the browser, we can create, authenticate and access all private pages provided by this simple Flask Dashboard.

Full Features:

• Up-to-date dependencies: Flask 2.0.1
• SCSS compilation via Gulp
• DBMS: SQLite, PostgreSQL (production)
• DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
• Modular design with Blueprints, simple codebase
• Session-Based authentication (via flask_login), Forms validation
• Deployment scripts: Docker, Gunicorn / Nginx, Heroku

Thanks for reading! For more resources, please access:

• Flask Dashboards - the page contains free & commercial products
• Open-Source Dashboards - a curated list provided by AppSeed