black-dashboard-flask
black-dashboard-flask copied to clipboard
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
: ifTrue
the app runs in develoment mode- For production value
False
should be used
- For production value
-
ASSETS_ROOT
: used in assets management- default value:
/static/assets
- default value:
-
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:
- Make sure that you are using the latest version of the Black Dashboard Flask. Check the CHANGELOG from your dashboard on our website.
- Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
- 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