Datta Able

Datta Able#

Open-Source Flask Template built with a minimum set of features on top of Datta Able, a modern dashboard design from CodedThemes. This template can be used to start a new project quickly by adding new features on top of the existing ones or simply for learning purposes.

👉 New to App-Generator? Sign IN with GitHub or Generate Web Apps in no time (free service).

Features#

  • Simple, Easy-to-Extend codebase, Blueprint Pattern

  • Up-to-date Dependencies

  • Datta Able Full Integration

  • Bootstrap CSS Styling

  • Authentication: Session Based, GitHub OAuth

  • DB Persistence: SQLite (default), can be used with MySql, PgSql

  • Dynamic DataTables - manage data without coding

  • Docker

  • CI/CD integration for Render

Datta Able - Open-Source Seed project powered by Flask - actively supported by App Generator

Prerequisites#

A few tools need to be installed in the system to use the starter efficiently:

  • Python

  • A modern code editor like VsCode, or Sublime

  • (optional) GIT - for pulling the source code and work under a version control system

  • (optional) Docker for isolated execution

  • (optional) DB Servers: - MySql - PostgreSQL

Download Source Code#

The product can be downloaded from the official product page or directly from GitHub (public repository)

git clone https://github.com/app-generator/flask-datta-able.git
cd flask-datta-able

Once the source code is unzipped, the next step is to start it and use provided features.

Start in Docker#

The fastest way to start the product is to execute the Docker set up:

docker-compose up --build

If Docker is properly installed in the system, you can visit the browser at http://localhost:5085. Product should be up and running.

Codebase#

The project is coded using a simple and intuitive structure presented below:

  • Core: holds the project settings

  • Home: the application that integrates the Datta Able Design

  • Api: the generated API

< PROJECT ROOT >
    |
    |-- apps/
    |    |
    |    |-- authentication/                 # Handles auth routes (login and register)
    |    |    |-- routes.py                  # Define authentication routes
    |    |    |-- models.py                  # Defines models
    |    |    |-- forms.py                   # Define auth forms (login and register)
    |    |
    |    |-- home/                           # A simple app that serve HTML files
    |    |    |-- routes.py                  # Define app routes
    |    |
    |    |-- dyn_dt/                          # Dynamic Data Tables Module
    |    |    |-- routes.py                  # Define app routes
    |    |
    |    |-- static/
    |    |    |-- <css, JS, images>          # CSS files, Javascripts files
    |    |
    |    |-- templates/                      # Templates used to render pages
    |    |    |-- includes/                  # HTML chunks and components
    |    |    |    |-- navigation.html       # Top menu component
    |    |    |    |-- sidebar.html          # Sidebar component
    |    |    |    |-- footer.html           # App Footer
    |    |    |    |-- scripts.html          # Scripts common to all pages
    |    |    |
    |    |    |-- layouts/                   # Master pages
    |    |    |    |-- base-fullscreen.html  # Used by Authentication pages
    |    |    |    |-- base.html             # Used by common pages
    |    |    |
    |    |    |-- accounts/                  # Authentication pages
    |    |    |    |-- login.html            # Login page
    |    |    |    |-- register.html         # Register page
    |    |    |
    |    |    |-- home/                      # UI Kit Pages
    |    |         |-- index.html            # Index page
    |    |         |-- 404-page.html         # 404 page
    |    |         |-- .html                 # All other pages
    |    |
    |  config.py                             # Set up the app
    |    __init__.py                         # Initialize the app
    |
    |-- requirements.txt                     # App Dependencies
    |
    |-- .env                                 # Inject Configuration via Environment
    |-- run.py                               # Start the app - WSGI gateway

Manual Build#

It’s best to use a Python Virtual Environment for installing the project dependencies. You can use the following code to create the virtual environment

virtualenv env

To activate the environment execute env\Scripts\activate.bat for Windows or source env/bin/activate on Linux-based operating systems.

Having the VENV active, we can proceed and install the project dependencies:

pip install -r requirements.txt

Environment#

The starter loads the environment variables from .env file. Here are the critical ones:

  • DEBUG: set by default to False (development mode)

  • SECRET_KEY: a random value used by Django to secure sensitive information like passwords and cookie information

  • Database Credentials: DB_ENGINE, DB_USERNAME, DB_PASS, DB_HOST, DB_PORT, DB_NAME

    • if detected, the database is switched automatically from the default SQLite to the specified DBMS

Setting up the Database#

By default, the application uses SQLite for persistence. In order to use MySql / PostgreSQL, you’ll need to install the Python driver(s):

pip install mysqlclient # for MySql
# OR
pip install psycopg2    # for PostgreSQL

To connect the application with the database, you’ll need to fill in the credentials int the .env file and run the migrations.

.env#
DB_ENGINE=mysql
# OR
DB_ENGINE=postgresql

# DB credentials below
DB_HOST=localhost
DB_NAME=<DB_NAME_HERE>
DB_USERNAME=<DB_USER_HERE>
DB_PASS=<DB_PASS_HERE>
DB_PORT=3306

Set up the environment

export FLASK_APP=run.py

Use the following commands to set up the database:

# Init migration folder
flask db init # to be executed only once

flask db migrate # Generate migration SQL
flask db upgrade # Apply changes

Running the project#

The following command starts the project using Flask development server:

flask run              # Starts on default PORT 5000
flask run --port 8999  # Starts on PORT 8999 (custom port)

By default Flask starts on port 5000 but this can be easily changed by adding the PORT number as argument. At this point, the app runs at http://127.0.0.1:5000/

Datta Able - Open-Source Seed project powered by Flask - actively supported by App Generator

Create Users#

By default, the app redirects guest users to authenticate. In order to access the private pages, follow this set up:

  • Start the app

  • Access the registration page and create a new user: - http://127.0.0.1:5000/register/

  • Access the sign in page and authenticate - http://127.0.0.1:5000/login/

Dynamic DataTables#

This pattern allows to manage the information saved in any model without coding effort. Here is how it works:

  • Define a new model or update an existing one

  • Migrate your database using Flask-Migrate Module

    • $ flask db migrate - generate the SQL

    • $ flask db upgrade - apply changes in DB

  • Update Configuration to activate the dynamic table view

    • apps.config.DYNAMIC_DATATB section

  • Access the dynamic datatable route in the browser and access the model

Configuration#

The dynamic datatable module loads the configuration from DYNAMIC_DATATB variable, saved in the Configuration class, where the dictionary structure is used to:

  • key: datatable URI path

  • value: the import path for the Model to be managed

Below set up will expose the URI /dynamic-dt/products for the model apps.models.Product

class Config(object):

basedir = os.path.abspath(os.path.dirname(__file__))

...(tuncated output)

DYNAMIC_DATATB = {
    "products": "apps.models.Product"
}

UI View#

Once the configuration is saved, the application automatically build the dataTable view for the speficied model with a set of common helpers like:

  • pagination

  • filters

  • search

  • number of items per page

Dynamic DataTable view - Manage data without coding in Flask

Add Features with our Flask Generator (free service)#

Using the sevice, developers can customize:

  • Select design: Datta Able, Soft Dashboard

  • Design Database: edit models and fields

  • Add fields to Extended user model

  • Enable OAuth for GitHub and Google (soon)

  • Add Celery (async tasks)

  • Enable Dynamic Tables Module

  • Docker Scripts

  • CI/Cd Scripts for Render

The generated Flask project is available as a ZIP Archive and also uploaded to GitHub.

Flask App Generator - User Interface for choosing the Design