creativetimofficial / black-dashboard-flask

Black Dashboard - Flask Template | Creative-Tim

Black Dashboard Flask

Features:

• ✅ Up-to-date dependencies
• ✅ Black Dashboard, BS4 Design
• ✅ DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
• ✅ Persistence: SQLite (dev), MySql (prod)
• ✅ Authentication: Session Based, OAuth via Github
• ✅ Deployment: Docker, Page Compression (Flask-Minify)

Table of Contents

• Demo
• Docker Support
• Quick Start
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Demo

To authenticate use the default credentials test / pass or create a new user on the registration page.

• Black Dashboard Flask Login Page

Docker Support

Get the code

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

Start the app in Docker

$ docker-compose up --build 

Visit http://localhost:5085 in your browser. The app should be up & running.

Create/Edit .env file

The meaning of each variable can be found below:

• DEBUG: if True the app runs in develoment mode
  • For production value False should be used
• ASSETS_ROOT: used in assets management
  • default value: /static/assets
• OAuth via Github
  • GITHUB_ID=<GITHUB_ID_HERE>
  • GITHUB_SECRET=<GITHUB_SECRET_HERE>

Manual Build

UNZIP the sources or clone the private repository. After getting the code, open a terminal and navigate to the working directory, with product source code.

👉 Set Up for Unix, MacOS

Install modules via VENV

$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt

Set Up Flask Environment

$ export FLASK_APP=run.py
$ export FLASK_ENV=development

Start the app

$ flask run
// OR
$ flask run --cert=adhoc # For HTTPS server

At this point, the app runs at http://127.0.0.1:5000/.

👉 Set Up for Windows

Install modules via VENV (windows)

$ virtualenv env
$ .\env\Scripts\activate
$ pip3 install -r requirements.txt

Set Up Flask Environment

$ # CMD 
$ set FLASK_APP=run.py
$ set FLASK_ENV=development
$
$ # Powershell
$ $env:FLASK_APP = ".\run.py"
$ $env:FLASK_ENV = "development"

Start the app

$ flask run
// OR
$ flask run --cert=adhoc # For HTTPS server

At this point, the app runs at http://127.0.0.1:5000/.

Recompile SCSS

The SCSS/CSS files used to style the Ui are saved in the apps/static/assets directory. In order to update the Ui colors (primary, secondary) this procedure needs to be followed.

$ yarn # install modules
$ # # edit variables 
$ vi apps/static/assets/scss/black-dashboard/custom/_variables.scss 
$ gulp # SCSS to CSS translation

The _variables.scss content defines the primary and secondary colors:

$default:       #344675 !default; // EDIT for customization
$primary:       #e14eca !default; // EDIT for customization
$secondary:     #f4f5f7 !default; // EDIT for customization
$success:       #00f2c3 !default; // EDIT for customization
$info:          #1d8cf8 !default; // EDIT for customization
$warning:       #ff8d72 !default; // EDIT for customization
$danger:        #fd5d93 !default; // EDIT for customization
$black:         #222a42 !default; // EDIT for customization

Documentation

The documentation for the Black Dashboard Flask is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

< PROJECT ROOT >
   |
   |-- apps/
   |    |
   |    |-- home/                           # A simple app that serve HTML files
   |    |    |-- routes.py                  # Define app routes
   |    |
   |    |-- authentication/                 # Handles auth routes (login and register)
   |    |    |-- routes.py                  # Define authentication routes  
   |    |    |-- models.py                  # Defines models  
   |    |    |-- forms.py                   # Define auth forms (login and register) 
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>          # CSS files, Javascripts files
   |    |
   |    |-- templates/                      # Templates used to render pages
   |    |    |-- includes/                  # HTML chunks and components
   |    |    |    |-- navigation.html       # Top menu component
   |    |    |    |-- sidebar.html          # Sidebar component
   |    |    |    |-- footer.html           # App Footer
   |    |    |    |-- scripts.html          # Scripts common to all pages
   |    |    |
   |    |    |-- layouts/                   # Master pages
   |    |    |    |-- base-fullscreen.html  # Used by Authentication pages
   |    |    |    |-- base.html             # Used by common pages
   |    |    |
   |    |    |-- accounts/                  # Authentication pages
   |    |    |    |-- login.html            # Login page
   |    |    |    |-- register.html         # Register page
   |    |    |
   |    |    |-- 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                     # App Dependencies
   |
   |-- .env                                 # Inject Configuration via Environment
   |-- run.py                               # Start the app - WSGI gateway
   |
   |-- ************************************************************************

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Demo: https://www.creative-tim.com/live/black-dashboard-flask
• Download Page: https://www.creative-tim.com/product/black-dashboard-flask
• Documentation: https://demos.creative-tim.com/black-dashboard-flask/docs/1.0/getting-started/getting-started-flask.html
• License Agreement: https://www.creative-tim.com/license
• Support: https://www.creative-tim.com/contact-us
• Issues: Github Issues Page

Reporting Issues

We use GitHub Issues as the official bug tracker for the Black Dashboard Flask. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Black Dashboard Flask. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser-specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2019 - present Creative Tim
• Licensed under Creative Tim EULA

Useful Links

• More products from Creative Tim
• Tutorials
• Freebies from Creative Tim
• Affiliate Program (earn money)

Social Media

• Twitter: https://twitter.com/CreativeTim
• Facebook: https://www.facebook.com/CreativeTim
• Dribbble: https://dribbble.com/creativetim
• Instagram: https://www.instagram.com/CreativeTimOfficial

---

Black Dashboard Flask - Provided by Creative Tim and AppSeed