Open-source sample provided by AppSeed. The project implements paginated access to data using Flask and Simple-DataTables, a lightweight, extendable, dependency-free javascript HTML table plugin (no jQuery dependency).
Features:
- DataTables managed by
Simple-DataTables
(Vanilla) JS - Stack: Flask, SqlAlchemy, Flask-Migrate, Flask-RestX
- Data Tables Implementation(s):
- Loaded from
Data
table by a controller (route) - Served by
/api/data
API node and consumed from JS - Loaded without any processing from a file:
app/static/datatables/data.json
- Inline Edit / Delete
- Loaded from
- UI Kit: Volt Dashboard (Free Version) by Themesberg
- Deployment scripts: Docker, Gunicorn/Nginx, HEROKU
- Support via Github (issues tracker) and Discord.
Links:
- 👉 Flask DataTables Sample - LIVE Demo (coming soon)
- 👉 More Free Samples - provided by AppSeed
Get the code
$ git clone https://github.com/app-generator/flask-volt-datatables.git
$ cd flask-volt-datatables
Start the app in Docker
$ docker-compose up --build
Visit http://localhost:85
in your browser. The app should be up & running.
Clone Sources (this repo)
$ git clone https://github.com/app-generator/flask-volt-datatables.git
$ cd flask-volt-datatables
Install Modules using a Virtual Environment
$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt
Or for Windows-based Systems
$ virtualenv env
$ .\env\Scripts\activate
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
Set up the environment
$ export FLASK_APP=run.py
$ export FLASK_ENV=development
Or for Windows-based Systems
$ # CMD terminal
$ set FLASK_APP=run.py
$ set FLASK_ENV=development
$
$ # Powershell
$ $env:FLASK_APP = ".\run.py"
$ $env:FLASK_ENV = "development"
Load Sample Data
media/data.csv
$ flask load_data # randomize the timestamp
// OR
$ flask load_random_data # randomize the timestamp and values
Start the APP
$ flask run
The paginated information is available in three ways:
- Loaded from
Data
table by a controller (route) - Served by
/api/data
API node and consumed from JS - Loaded without any processing from a file:
app/static/datatables/data.json
## Code-base structure
The project has a simple structure, represented as bellow:
< PROJECT ROOT >
|
|-- app/__init__.py
|-- 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)
| | |
| | index.html # The default page
| | login.html # Auth Login Page
| | register.html # Auth Registration Page
| | page-404.html # Error 404 page (page not found)
| | page-500.html # Error 500 page (server error)
| | *.html # All other pages provided by the UI Kit
|
|-- requirements.txt
|
|-- run.py
|
|-- ************************************************************************
To recompile SCSS files, follow this setup:
Step #1 - Install tools
Step #2 - Change the working directory to assets
folder
$ cd app/base/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
The generated files (css, min.css) are saved in static/assets/css
directory.
The project comes with a basic configuration for Docker, HEROKU, Gunicorn, and Waitress.
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/jinja-volt-dashboard.git
$ cd jinja-volt-dashboard
$
$ # 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 '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 (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.
- Flask Framework - The official website
Flask DataTables Sample - Provided by AppSeed App Generator.