Flask Black Dashboard - Product Update
Tags: webdev, flask, dashboards, opensource
Published: 2021-11-06 08:50:42

---
title: Flask Black Dashboard - Product Update
published: true
description: A popular open-source dashboard with a modern dark-theme design updated to use the latest Flask Stable Verison plus other improvements.
tags: webdev, flask, dashboards, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx4polf02h1u2od79s9y.jpg
canonical_url: https://blog.appseed.us/flask-black-dashboard-update/
---
Hello Coders!

This article presents [Flask Dashboard Black](https://appseed.us/admin-dashboards/flask-dashboard-black), a simple open-source project crafted on top of **Black Dashboard** BS4 design. The product was recently updated to use the latest Flask stable version, plus a new codebase structure and Gulp tooling for SCSS compilation. For newcomers, **Flask** is a popular Python web framework actively supported by many open-source enthusiasts. The project might help developers to code faster a new dashboard or simply by beginners for eLearning purposes. 

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

--- 

- ✨ [Flask Dashboard Black](https://appseed.us/admin-dashboards/flask-dashboard-black) - product page
- ✨ [Flask Dashboard Black](https://flask-black-dashboard.appseed-srv1.com/) - LIVE deployment

---

![Flask Dashboard Black - Gif animated presentation.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11dknxjg7mw0485fkix6.gif)

---

## Update Summary

- Bump Codebase: Flask Dashboard v2.0.0
- Dependencies update (all packages)
- Flask==2.0.1 (latest stable version)
- Better Code formatting
- Improved Files organization
- Optimized imports
- Docker Scripts Update
- Gulp Tooling (SASS Compilation)

The codebase was updated to a new, more intuitive structure and optimized Docker scripts.

```bash
< PROJECT ROOT >
   |
   |-- apps/
   |    |
   |    |-- home/                     # Serves HTML files
   |    |-- authentication/           # Handles auth routes
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>    # CSS files, Javascripts files
   |    |
   |    |-- templates/                # Templates used to render pages
   |    |    |-- includes/            # HTML chunks and components
   |    |    |-- layouts/             # Master pages
   |    |    |-- accounts/            # Authentication pages
   |    |    |-- home/                # UI Kit Pages
   |    |         |-- index.html      # Index page
   |    |         |-- 404-page.html   # 404 page
   |    |         |-- *.html          # All other pages
   |    |    
   |  config.py                       # Set up the app
   |    __init__.py                   # Initialize the app
   |
   |-- requirements.txt               # Development modules
   |
   |-- Dockerfile                     # Deployment
   |-- docker-compose.yml             # Deployment
   |-- gunicorn-cfg.py                # Deployment   
   |-- nginx                          # Deployment
   |    |-- appseed-app.conf          # Deployment 
   |
   |-- .env                           # Inject Configuration 
   |-- run.py                         # Start the app - WSGI gateway
   |
   |-- ********************************************************
```

Once we get familiar with the structure, we can use the Docker scripts shipped by the product to compile and start the product. Let's go!

> **Step #1** - Clone/download sources

```bash
$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard 
```

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

```bash
$ docker-compose pull   # download modules
$ docker-compose build  # local set up
$ docker-compose up     # start the app  
```

Once all the above commands are executed, we should see **Flask Dashboard Black** running in the browser `http://localhost:85`.

![Flask Black Dashboard - Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bacpczfpm90htd1ppf0h.png)

---

> **Flask Black Dashboard** - User Profile

![Flask Black Dashboard - User Profile Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7588ruiehbwma7pb3za3.png)

---

## Black Dashboard - Design Info

**Black Dashboard** is a beautiful Bootstrap 4 Admin Dashboard with a huge number of components built to fit together and look amazing. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you.

**Black Dashboard** features over 16 individual components, giving you the freedom of choosing and combining. This means that there are thousands of possible combinations. All components can take variations in color, that you can easily modify using SASS files. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

![Black Dashboard - Official Product Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yd4xnd79yrausm44t8z.png)

---

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

---

- AppSeed for [support](https://appseed.us/support) and more [Flask Dashboards](https://appseed.us/admin-dashboards/flask)
- [Flask Black Dashboard PRO](https://appseed.us/admin-dashboards/flask-dashboard-black-pro) - for more pages and components