Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Flask Dashboard - Gradient Able Design
Sm0ke
Sm0ke

Posted on • Edited on

     

Flask Dashboard - Gradient Able Design

Hello coders,

This article aims to help beginners to get starting with Flask, the super-popular Python framework, by building and coding simple tasks on top of an open-source starter:Flask Gradient Able. The project can be downloaded directly from Github and used in commercial projects (MIT License).



For newcomers,Flask is a lightweight web application framework written in Python. Sometimes classified as a microframework, Flask provides a lightweight codebase that can be easily extended to become an API, a simple web app, or a complex eCommerce platform.


Flask Dashboard Gradientable - Open-source admin dashboard coded in Flask.


This Flask starter being coded on top of a nice Ui Kit and released under the MIT license can be used for unlimited hobby & commercial products. Besides this, the code-base is clean and easy to digest by the main audience: beginners. Other features:


  • UI Kit: Gradient Able Dashboard (Free Version)
  • Modular codebase coded withBlueprints
  • SQLite/PostgreSQL database, ORM, Alembic for migrations
  • Session-based authentication, basic form validation
  • Deployment scripts: Docker, Gunicorn / Nginx

In case you like this simple Flask starter, we can build it using a terminal and a few basic commands. The app is coded in Python3 and to have a successful build we need a Python3 interpreter properly installed in our workstation. If you are not sure about it, please open your preferred terminal and type:

$python-VPython 3.7.2 <--- All good
Enter fullscreen modeExit fullscreen mode

If thepython version check returns a3.x version, we're all good.

Let's clone thesource code

As mentioned, the app is published on Github and we canclone the code usingGIT command tool or simply download the ZIP archive.

$# Get the code$git clone https://github.com/app-generator/flask-dashboard-gradientable.git$cdflask-dashboard-gradientable
Enter fullscreen modeExit fullscreen mode

After cloning/copying the sources we need to install the app dependencies listed in therequirements.txt file.

$# Install modules - SQLite Database$pip3install-r requirements.txt
Enter fullscreen modeExit fullscreen mode

The next step is to set the value forFLASK_APP variable and we're all set.

$# Set the FLASK_APP environment variable$(Unix/Mac)exportFLASK_APP=run.py$(Windows)setFLASK_APP=run.py$(Powershell)$env:FLASK_APP=".\run.py"$$# 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/
Enter fullscreen modeExit fullscreen mode

If all goes well, by visiting the dashboard in browser we should the login screen:

Flask Dashboard Gradientable - The login page.

By default, this Flask starter is not provisioned with default users and to pass the authentication and access the private pages we need to create a new user first by using the registration page.

After login, we should be able to access the dashboard pages:

Main Dashboard Page

Flask Dashboard Gradientable - Main dashboard page.

Google Maps page

Flask Dashboard Gradientable - Main dashboard page.

UI Tables

Flask Dashboard Gradientable - UI Tables page.


Code-base structure

The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:

< PROJECT ROOT>   |   |-- app/# Implements app logic   |    |-- base/# Base Blueprint - handles the authentication   |    |-- home/# Home Blueprint - serve UI Kit pages   |    |   |   __init__.py# Initialize the app   |   |-- requirements.txt# Development modules - SQLite storage   |-- requirements-mysql.txt# Production modules  - Mysql DMBS   |-- requirements-pqsql.txt# Production modules  - PostgreSql DMBS   |   |-- .env# Inject Configuration via Environment   |-- config.py# Set up the app   |-- run.py# Start the app - WSGI gateway   |   |--************************************************************************
Enter fullscreen modeExit fullscreen mode

How app starts

  • run.py loads the.env file
  • Initialize the app using the specified profile: Debug or Production
    • If env.DEBUG is set toTrue the SQLite storage is used
    • If env.DEBUG is set toFalse the specified DB driver is used (MySql, PostgreSQL)
  • Call the app factory methodcreate_app defined in app/init.py
  • Redirect the guest users to Login page
  • Unlock the pages served by HOME blueprint for authenticated users

App Deployment

The starter comes equipped with a basic deployment enhancement forDocker. To start the app in a dockerized container we need to type a single line in the terminal (commands provided for Linux distros):

$sudodocker-compose pull&&sudodocker-compose build&&sudodocker-compose up-d
Enter fullscreen modeExit fullscreen mode

If all goes well, we should see the app running in the browser by visitinghttp://localhost:5005.


Thanks for reading! For more resources, feel free to access:

Top comments(3)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
andalinux profile image
InformáticoDeGuardia 👨‍💻
  • Joined

Thanks@sm0ke for sharing this project 👍🏻

I've programmed with Flask before but I can improve my code using your example as a guide.

I only need to know how do you recommend including oAuth (using Google account) as loging into the app.

Maybe an idea for a next article? 😉 (If not some code would be appreciated 😅👍🏻)

CollapseExpand
 
sm0ke profile image
Sm0ke
#Automation, my favorite programming language
  • Location
    Constanta, Romania
  • Education
    Hack Land
  • Work
    Founder @ AppSeed.us
  • Joined

That's a super idea. Noted!
& thanks for reading!

CollapseExpand
 
andalinux profile image
InformáticoDeGuardia 👨‍💻
  • Joined

Nice to see you like the idea, Sm0ke
It will be great know how do you implement that blueprint with Google oAuth 👍
And if you explain how to save authorization token to use your web until we log out it could be wonderful 😉😇

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

#Automation, my favorite programming language
  • Location
    Constanta, Romania
  • Education
    Hack Land
  • Work
    Founder @ AppSeed.us
  • Joined

More fromSm0ke

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp