How to use Bootstrap with Flask
Open-source Flask project enhanced with session-based authentication via Flask-Login
and a simple UI powered by Bootstrap
. For newcomers, Flask is a popular web framework used to code from simple one-page websites to complex eCommerce solutions and Bootstrap is the most popular JS/CSS framework.
Have questions?
Contact Support (Email & Discord) provided by AppSeed
Free Version | PRO Version | π Custom - $3,999 |
---|---|---|
β Bootstrap 5 | Everything in Free, plus: | Everything in PRO, plus: |
β Flask-Login | β Premium Bootstrap 5 Design | β 1mo Custom Development |
β Session-based Authentication | β
Auth Provided by Flask-Security-Too |
β Dedicated Developer |
- | β
Extended User Model |
β Weekly Sprints |
- | β
Users Roles |
β Technical SPECS |
- | β
Private REPO Access |
β Documentation |
- | β PRO Support - Email & Discord | β 30 days Delivery Warranty |
- | β Deployment Assistance | - |
- | - | - |
--------------------------------- | --------------------------------- | --------------------------------- |
β LIVE Demo | π LIVE Demo PRO |
π Order : $3,999 (GUMROAD) |
π Step #1 - Clone sources (this repo)
$ git clone https://github.com/app-generator/sample-flask-bootstrap.git
$ cd sample-flask-bootstrap
π Step #2 - Create a virtual environment
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
π Step #3 - Install dependencies
$ # Install requirements
$ pip3 install -r requirements.txt
π Step #4 - Set Up Environment
$ # 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"
π Step #5 - Create Tables (SQLite persistance)
$ # Create tables
$ flask shell
$ >>> from app import db
$ >>> db.create_all()
π Step #6 - (optional) Enable DEBUG Environment (local development)
$ # Set up the DEBUG environment
$ # (Unix/Mac) export FLASK_ENV=development
$ # (Windows) set FLASK_ENV=development
$ # (Powershell) $env:FLASK_ENV = "development"
π Step #7 - Start the project
$ # 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/
The project has a super simple structure, represented as bellow:
< PROJECT ROOT >
|
|-- app/
| |-- static/
| | |-- <css, JS, images> # CSS files, Javascripts files
| |
| |-- templates/
| | |
| | |-- index.html # Index File
| | |-- login.html # Login Page
| | |-- register.html # Registration Page
| |
| |
| config.py # Provides APP Configuration
| forms.py # Defines Forms (login, register)
| models.py # Defines app models
| views.py # Application Routes
|
|-- requirements.txt
|-- run.py
|
|-- ************************************************************************
- Free Admin Dashboards - index provided by AppSeed
- Flask User Authentication - blog article
- Flask Social Login - blog article (includes a free sample)
How to use Bootstrap with Flask - Free sample provided by AppSeed.