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

Comments

[WebsiteMarket]

Sounds like a simple setup ..

[Sm0ke]

🚀🚀

[ui-themes]

Thanks for sharing! The design looks neat.

[Sm0ke]

🚀🚀