Dash App Template

Nick Earl

Overview

This repository provides a fully functional Flask/Dash app template with built-in support for:

• Multi-page Dash application structure
• Authentication via Google SSO
• Background task processing using Celery & Redis
• Example pages and components to kickstart development

This template is designed to streamline Dash app development for both humans and AI agents with modularity, scalability, and deployability in mind.

Features

• Multi-Page Support: Easily add new pages following the provided structure.
• Google SSO Authentication: Secure login functionality using Google OAuth.
• Celery & Redis Integration: For background job processing and scheduling.
• Prebuilt Example Pages: Includes sample pages with interactive Dash components.
• Deployment Ready: Includes a Procfile for deployment on services like Heroku.
• Data Connectors: connectors.py provides prebuilt integrations for Amazon S3 and Amazon Athena.

Project Structure

dash-template/
│── dash-template/
│   │── app.py                  # Main Dash app entry point
│   │── conf.py                 # Configuration settings
│   │── connectors.py           # Handles external API/database connections
│   │── biutils.py              # Utility functions
│   │── .env                    # Environment variables (not included in repo)
│   │── Procfile                # Deployment configuration
│   │── dash_app/
|   |   |── pages/
|   |   |   | home.py           # UX entry point          
|   |   |   | example.py        # Example app page
|   |   |── assets/             # Stylesheets, images,  data files
│   │   │── dash_app.py         # Dash configuration
│   │   │── callbacks.py        # Dash interactivity logic
│   └── README.md               # Project documentation

Installation

Prerequisites

• Python 3.8+
• Redis (for background tasks)
• Virtual environment (optional but recommended, using pyenv and pyenv-virtualenv)

Optional: Install pyenv and pyenv-virtualenv

If you prefer managing Python versions and virtual environments with pyenv, follow these steps:

1. Install pyenv (Linux/macOS):

   curl https://pyenv.run | bash

   Follow the instructions to update your shell configuration.
2. Install pyenv-virtualenv:

   git clone https://github.com/pyenv/pyenv-virtualenv.git ~/.pyenv/plugins/pyenv-virtualenv

   Enable it in your shell profile (e.g., .bashrc or .zshrc):

   eval "$(pyenv init --path)"
   eval "$(pyenv virtualenv-init -)"

3. Restart your terminal and install Python:

   pyenv install 3.10.6  # Install your desired Python version
   pyenv virtualenv 3.10.6 dash-template-env
   pyenv activate dash-template-env

Setup

1. Clone the repository:

   git clone https://github.com/your-repo/dash-template.git
   cd dash-template

2. Create and activate a virtual environment (using pyenv-virtualenv if installed):

   pyenv virtualenv 3.10.6 dash-template-env
   pyenv activate dash-template-env

   Alternatively, use venv:

   python -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`

3. Install dependencies:

   pip install -r requirements.txt

4. Set up Environment Variables:

   • Copy .env.example to .env and configure required variables.
   • Generate secure keys for Flask and encryption:

     python -c "import secrets, base64, os; print(f'FLASK_SECRET_KEY=\"{secrets.token_hex(16)}\"'); print(f'ENCRYPTION_SECRET_KEY=\"{base64.urlsafe_b64encode(os.urandom(32)).decode()}\"')"

     Copy the generated output and paste it into your .env file.

5. Run the App Locally (from project folder):

   flask --app app run -p 1701 

6. Start Redis and Celery:

   redis-server &
   celery -A app:celery_app worker --loglevel=INFO --concurrency=2 

Usage

• Access the app at http://127.0.0.1:1701/.
• Authentication requires setting up Google OAuth credentials.
• Additional pages can be added in the dash_app/ folder following the provided examples.
• The connectors.py module enables integration with Amazon S3 and Amazon Athena, allowing seamless data retrieval and storage.

heroku create my-dash-app
heroku addons:create heroku-redis:hobby-dev
heroku config:set $(cat .env | xargs)
git push heroku main
heroku ps:scale worker=1

Deployment

To deploy on a cloud platform like Heroku or AWS:

1. Ensure Procfile is correctly set up.
2. Configure required environment variables.
3. Use gunicorn to serve Flask (gunicorn -w 4 app:server).

heroku create my-dash-app
heroku addons:create heroku-redis:hobby-dev
heroku config:set $(cat .env | xargs)
git push heroku main
heroku ps:scale worker=1