Hello coder,
This article presents Flask Black Dashboard an open-source Flask starter provided with basic modules, authentication, and deployment scripts. This project can be downloaded directly from GitHub under the MIT license and based on the permissive license can be used for unlimited hobby & commercial projects.
- 👉 Black Dashboard Flask -
product page - 👉 Black Dashboard Flask -
LIVE Demo
** Short-Intro **
A basic introduction of terms for newcomers. In case you are familiar with the information presented in this section, please jump to the next section, and set up the environment.
What is Flask
Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.
Compared to his older brother Django, Flask provides a lightweight codebase and more freedom to the developer. This might be a good thing because you have more freedom in terms of app design and structure but at the same time, this freedom might inject problems when your application becomes complex.
✨ What is Admin Dashboard
A dashboard is a set of pages that are easy to read and offer information to the user in real time regarding his business. A dashboard usually consists of graphical representations of the current status and trends within an organization. Having a well-designed dashboard will give you the possibility to act and make informed decisions based on the data that your business provides - definition provided by Creative-Tim - Free Dashboard Templates.
✨ Black Dashboard Design
Black Dashboard is a beautiful Bootstrap4 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.
It combines colors that are easy on the eye, spacious cards,
beautiful typography, and graphics.
Besides the modern layout, the product is released under the MIT license and is actively supported and constantly improved.
The Environment
As mentioned, the product is built on top of Flask, a popular Python Web Framework. To build the app, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full list of dependencies and tools required to build the app:
- Python3 - the programming language used to code the app
- Git - used to clone the source code from the Github repository
If you are a little bit unsure how to set up the environment, might be a good idea to spare a few minutes and read the full documentation provided for this app: Flask Dashboard Black Docs.
Check Python (using the terminal)
$ # Check Python version
$ python --version
Python 3.7.2 # <--- All good
Check GIT command tool (using the terminal)
$ # Check git
$ git --version
$ git version 2.10.1.windows.1 # <--- All good
Flask Dashboard - code structure
The code-base generated by the AppSeed platform respects the best practices and tries to keep things as simple as possible. Like all other apps provided by the platform, Flask Dashboard Black comes only with a basic set of features, easy to extend by the anyone that has a basic programming knowledge.
< PROJECT ROOT >
|
|-- app/ # Implements app logic
| |-- base/ # Base Blueprint
| |-- home/ # Home Blueprint
| |
| __init__.py # Initialize the app
|
|-- requirements.txt # Development modules
|
|-- .env # Environment Configuration
|-- config.py # Set up the app
|-- run.py # Start the app - WSGI gateway
|
|-- *********************************
Build the dashboard
The first step is to pull the source code in our workstation. This can be done by download the ZIP archive of the code or using GIT to clone the project locally (the recommended way).
$ # Get the code
$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard
If GIT is properly installed in our system, the dashboard source code is now available in the flask-black-dashboard directory. Once we have the source code, the next step is to install the modules (aka dependencies). Usually, an application requires a set of modules used to implement the dashboard and our app is not an exception.
$ virtualenv env
$ source env/bin/activate
$
$ pip3 install -r requirements.txt
If all goes well, the dependencies listed in the requirements.txt are installed and ready to be used by the application. The next step is to update the environment where the app runs with a few variables used by Flask Framework.
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Set up the DEBUG environment
$ export FLASK_ENV=development
The first variable FLASK_APP informs Flask what file to execute first (the entry point). The second variable FLASK_ENV is optional, but recommended if we want to DEBUG our application and collect runtime information when something is not working as expected.
Well, let's see something nice on the screen
The last step, is to start the app. This can be done with one single command, using the server provided by the Flask Framework:
$ # Start the application (development mode)
$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
$ # --port=5000 - specify the app port (default 5000)
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/
By default, the app starts on port 5000. In case this port is already in use by another process, just execute the flask command with another value as the argument for the port variable:
$ # Start the dashboard on port 9999
$ flask run --port=999
$
$ # Access the app in the browser: http://127.0.0.1:9999/
If all goes well, we should see the login screen (the application redirects guests to the login page). Please create a new user using the registration page, and authenticate. Some nice pages should be visible on the screen :
Flask Dashboard Black - Main Dashboard Page
Flask Dashboard Black - UI Kit Notifications
Flask Dashboard Black - User profile page
Thanks for reading! For more resources, feel free to access:
- 👉 More Flask Dashboards crafted in Django, Flask, and
React - 👉 More Flask Apps - free & PAID
Top comments (3)
I always have a hard time running Creative Tim products on my machine.
The pattern used by the provider to build a product usually is a company decision. Sometimes, their choices have nothing in common with our expectations as consumers.
It's like debating Django vs Flask. A company sells the Django version of an app and I expect to receive a super slim Flask starter.
gotcha.