Flask Boilerplate - Material Kit Design | AppSeed

Overview

Flask Material Kit

Open-Source seed project generated by AppSeed in Django Framework on top of Material Kit design. Designed for those who like bold elements and beautiful websites, Material Kit 2 is ready to help you create stunning websites and web apps. Material Kit 2 is built with over 60 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.


Features:

  • Up-to-date dependencies: Flask 2.0.1
  • SCSS compilation via Gulp
  • UI Kit: Material Dashboard - v3.0.0 (Bootstrap 5 Version) by Creative-Tim
  • SQLite database, Flask-SQLAlchemy ORM
  • Session-Based auth flow (login, register)
  • Deployment: Docker, Gunicorn / Nginx, Heroku
  • Support via Github (issues tracker) and Discord.

Links


✨ Quick Start in Docker

Get the code

$ git clone https://github.com/app-generator/flask-material-kit.git
$ cd flask-material-kit

Start the app in Docker

$ docker-compose up --build 

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


Flask Material Kit 2 - Starter provided by AppSeed.


✨ Build from sources

$ # Clone the sources
$ git clone https://github.com/app-generator/flask-material-kit.git
$ cd flask-material-kit
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"
$
$ # Set up the DEBUG environment
$ # (Unix/Mac) export FLASK_ENV=development
$ # (Windows) set FLASK_ENV=development
$ # (Powershell) $env:FLASK_ENV = "development"
$
$ # Run the application
$ # --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 app in browser: http://127.0.0.1:5000/

Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.


✨ Code-base structure

The project has a super simple structure, represented as bellow:

< PROJECT ROOT >
   |
   |-- app/
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/
   |    |    |
   |    |    |-- includes/                 # Page chunks, components
   |    |    |    |
   |    |    |    |-- navigation.html      # Top bar
   |    |    |    |-- sidebar.html         # Left sidebar
   |    |    |    |-- scripts.html         # JS scripts common to all pages
   |    |    |    |-- footer.html          # The common footer
   |    |    |
   |    |    |-- layouts/                  # App Layouts (the master pages)
   |    |    |    |
   |    |    |    |-- base.html            # Used by common pages like index, UI
   |    |    |    |-- base-fullscreen.html # Used by auth pages (login, register)
   |    |    |
   |    |    |-- accounts/                 # Auth Pages (login, register)
   |    |    |    |
   |    |    |    |-- login.html           # Use layout `base-fullscreen.html`
   |    |    |    |-- register.html        # Use layout `base-fullscreen.html`  
   |    |    |
   |    |    |-- home/                      # UI Kit Pages
   |    |         |-- index.html            # Index page
   |    |         |-- 404-page.html         # 404 page
   |    |         |-- *.html                # All other pages
   |    |
   |   config.py                            # Provides APP Configuration 
   |   forms.py                             # Defines Forms (login, register) 
   |   models.py                            # Defines app models 
   |   views.py                             # Application Routes 
   |
   |-- Dockerfile                           # Deployment
   |-- docker-compose.yml                   # Deployment
   |-- gunicorn-cfg.py                      # Deployment   
   |-- nginx                                # Deployment
   |    |-- appseed-app.conf                # Deployment 
   |
   |-- requirements.txt
   |-- run.py
   |
   |-- ************************************************************************

✨ Recompile CSS

To recompile SCSS files, follow this setup:


Step #1 - Install tools

  • NodeJS 12.x or higher
  • Gulp - globally
    • npm install -g gulp-cli
  • Yarn (optional)

Step #2 - Change the working directory to assets folder

$ cd app/static/assets

Step #3 - Install modules (this will create a classic node_modules directory)

$ npm install
// OR
$ yarn

Step #4 - Edit & Recompile SCSS files

$ gulp scss

The generated file is saved in static/assets/css directory.


✨ Deployment

The app is provided with a basic configuration to be executed in Docker, Heroku, Gunicorn, and Waitress.

Heroku


Steps to deploy on Heroku

  • Create a FREE account on Heroku platform
  • Install the Heroku CLI that match your OS: Mac, Unix or Windows
  • Open a terminal window and authenticate via heroku login command
  • Clone the sources and push the project for LIVE deployment
$ # Clone the source code:
$ git clone https://github.com/app-generator/flask-material-kit.git
$ cd flask-material-kit
$
$ # Check Heroku CLI is installed
$ heroku -v
heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good
$
$ # Check Heroku CLI is installed
$ heroku login
$ # this commaond will open a browser window - click the login button (in browser)
$
$ # Create the Heroku project
$ heroku create
$
$ # Trigger the LIVE deploy
$ git push heroku master
$
$ # Open the LIVE app in browser
$ heroku open

Gunicorn


Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.

Install using pip

$ pip install gunicorn

Start the app using gunicorn binary

$ gunicorn --bind 0.0.0.0:8001 run:app
Serving on http://localhost:8001

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


Waitress


Waitress (Gunicorn equivalent for Windows) is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library.

Install using pip

$ pip install waitress

Start the app using waitress-serve

$ waitress-serve --port=8001 run:app
Serving on http://localhost:8001

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


✨ Credits & Links



Flask Material Kit - Provided by AppSeed App Generator.

You might also like...
This is a boilerplate for a basic backend app using Python, Django and SQLite, as developed after tutorials with Programming with Mosh

This is a boilerplate for a basic backend app using Python, Django and SQLite, as developed after tutorials with Programming with Mosh

Brif is a boilerplate tool based on Docker and FastAPI, designed to streamline the development and deployment of IIIF compliant platforms.

brif A boilerplate tool based on Docker, designed to streamline the development and deployment of IIIF compliant platforms. Embedded with FastAPI, Cel

Cookiecutter Flask OpenAPI is a template for jumpstarting production-ready Flask projects quickly.
Cookiecutter Flask OpenAPI is a template for jumpstarting production-ready Flask projects quickly.

Cookiecutter Flask OpenAPI is a template for jumpstarting production-ready Flask projects quickly. It has a well organized and scalable structure. It uses API design first

The starter repository for submissions to the GeneDisco challenge for optimized experimental design in genetic perturbation experiments

GeneDisco ICLR-22 Challenge Starter Repository The starter repository for submissions to the GeneDisco challenge for optimized experimental design in

simple flask starter app utilizing docker

Simple flask starter app utilizing docker to showcase seasonal anime using jikanpy (myanimelist unofficial api).

This is the starter for the Flask React project.

Flask React Project This is the starter for the Flask React project. Getting started Clone this repository (only this branch) git clone https://github

Setup a flask project using a single command, right from creating virtual environment to creating Procfile for deployment.

AutoFlask-Setup About AutoFlask-Setup can help you set up a new Flask Project, right from creating virtual environment to creating Procfile for deploy

CRUD app to create and save code snippets, Flask/Python restful Api/backend and React/Typescript frontend
CRUD app to create and save code snippets, Flask/Python restful Api/backend and React/Typescript frontend

MS3 Cheat-Hub A cheatsheet hub. An app that organizes your code snippets into collections of cheat sheets and allows you to view, like and save others

Open-source full-stack seed project that uses a React UI powered by a simple Flask API Server
Open-source full-stack seed project that uses a React UI powered by a simple Flask API Server

React Flask Authentication Open-source full-stack seed project that uses a React UI powered by a simple Flask API Server.

Releases(v1.0.10)
Owner
App Generator
App Generator and Boilerplate Code.
App Generator
Launchr is an open source SaaS starter kit, based on Django.

Launchr Launchr is an open source SaaS starter kit. About Launchr is a fully-equipped starter template, ready to start a SaaS web app. It implements t

Jannis Gebauer 183 Jan 6, 2023
A boilerplate for Django web applications

Django Hackathon Starter A boilerplate application for Django web applications. If you've attented hackathons, you already know how much time can be w

David Leonard 1.6k Dec 31, 2022
A full stack boilerplate for FastAPI

A full stack boilerplate for FastAPI

Tyler M. Kontra 94 Dec 13, 2022
Backend Boilerplate using Django,celery,Redis

Backend Boilerplate using Django,celery,Redis

Daniel Mawioo 2 Sep 14, 2022
A boilerplate Django project for quickly getting started.

The Definitive Django Learning Platform. Django Project Boilerplate This repository is a boilerplate Django project for quickly getting started. Getti

Le Huynh Long 1 Nov 1, 2021
A template repository implementing HTML5 Boilerplate 8.0 in Sanic using the Domonic framework.

sanic-domonic-h5bp A template repository implementing HTML5 Boilerplate 8.0 in Sanic using the Domonic framework. If you need frontend interactivity,

PyXY 3 Dec 12, 2022
Boilerplate for starting a python project

Python Project Boilerplate Simple boilerplate for starting a python proect. Using the repo Follow following steps to install client on server Create a

Prajwal Dahal 1 Nov 19, 2021
A Boilerplate repo for Scientific Python Open Science projects

A Boilerplate repo for Scientific Python Open Science projects Installation Clone this repo If you need a fresh python environment, run $ conda env cr

Vincent Choqueuse 2 Dec 23, 2021
King is a simple boilerplate from a bigger Discord Bot project created for my Discord Server.

King A simple Discord bot boilerplate. King is a simple boilerplate from a bigger Discord Bot project created for my Discord Server. I intend to showc

Xminent 0 Aug 21, 2021
This is a FastAPI, React, MongoDB stack Boilerplate. It's as glorious as a highland coo.

Coo - F.A.R.M stack BoilerPlate F.A.R.M - FastAPI, React, MongoDB This boilerplate utilizes FastAPI to build a REST API, MongoDB for data storage, and

Peter Waters 2 Feb 6, 2022