Free Bootstrap 5 Dashboard - Built with Flask and Docker
Tags: flask, docker, webdev, opensource
Published: 2021-09-16 10:44:05

---
title: Free Bootstrap 5 Dashboard - Built with Flask and Docker
published: true
description: Simple open-source dashboard built with Flask and Docker on top of an open-source Bootstrap 5 design.
tags: flask, docker, webdev, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkfnbax3mnkr2s7jme96.jpg
canonical_url: https://blog.appseed.us/flask-volt-free-docker-ready-dashboard/
---
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](https://appseed.us/)**.

---

> **[Flask Volt Bootstrap 5](https://appseed.us/admin-dashboards/flask-dashboard-volt) - product page** (contains DEMO and sources)

---

![Bootstrap Admin Dashboard built with Flask and Docker.](https://raw.githubusercontent.com/app-generator/flask-dashboard-volt/master/media/flask-dashboard-volt-intro.gif)
 
---

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

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

---

> **Step #2** - Start in Docker

```bash
$ 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.

---

![Login page of an open-source Bootstrap Admin Dashboard built with Flask and Docker.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e9hpd51mlfqxnfzs5ku.png)

---

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

```docker
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

```yaml
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. 

```docker
...
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

---

![User Profile page of an open-source Bootstrap Admin Dashboard built with Flask and Docker.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scdo1v98y43vgq6trq69.jpg)

--- 

> **Thanks for reading!** For more resources, please access: 

---

- [Flask Dashboards](https://appseed.us/admin-dashboards/flask) - the page contains free & commercial products
- [Open-Source Dashboards](https://appseed.us/admin-dashboards/open-source) - a curated list provided by AppSeed