DEV Community

Cover image for Flask Black Dashboard - Product Update
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Flask Black Dashboard - Product Update

Hello Coders!

This article presents 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.



Flask Dashboard Black - Gif animated presentation.


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.

< 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
   |
   |-- ********************************************************
Enter fullscreen mode Exit fullscreen mode

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

$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard 
Enter fullscreen mode Exit fullscreen mode

Step #2 - Start in Docker

$ docker-compose pull   # download modules
$ docker-compose build  # local set up
$ docker-compose up     # start the app  
Enter fullscreen mode Exit fullscreen mode

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


Flask Black Dashboard - User Profile

Flask Black Dashboard - User Profile Page.


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


Thanks for reading! For more resources, please access:


Discussion (4)

Collapse
crearesite profile image
WebsiteMarket

Great design and useful seed starter.
An update to BS5 would be amazing.

Collapse
sm0ke profile image
Sm0ke Author

πŸš€πŸš€

Collapse
uithemes profile image
ui-themes

Thanks for sharing!

Collapse
sm0ke profile image
Sm0ke Author

πŸš€πŸš€