Flask DataTables Sample

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
• 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

✨ Quick Start in Docker

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.

✨ How to use it

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
   |
   |-- ************************************************************************

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/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.

Deployment

The project comes with a basic configuration for 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/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

---

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 Framework - The official website

---

Flask DataTables Sample - Provided by AppSeed App Generator.