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
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.
- Up-to-date dependencies: Flask 2.0.1
SCSS compilation via
- 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: