dash app

1 minute read

DASH APP: Getting Started

Using this

Deploying to Heroku – same as reg flask app

DEPLOYING: (Because if we can’t push it live what are we even doing here)

This order didn’t give me errors. I’m not SUPER stitious but I’m a little stitious

STEP 1: Make the thing

mkdir your_dashapp
cd your_dashapp
python3 -m venv venv
source venv/bin/activate
pip3 install flask
git init
heroku login
pip3 install gunicorn
pip3 freeze > requirements.txt
touch Procfile

STEP 2: Add this to Procfile

web: gunicorn app:server

STEP 3: Add actual app.py

from flask import Flask, render_template, url_for
import dash
import dash_core_components as dcc
import dash_html_components as html

server = Flask(__name__)


@server.route('/')
def index():
    return 'Hello Flask app'

app = dash.Dash(
    __name__,
    server=server,
    routes_pathname_prefix='/dash/'
)

# app.layout = html.Div("My Dash app")

app.layout = html.Div([
    html.H2('PICK A CITY, ANY CITY!'),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='display-value')
])

@app.callback(dash.dependencies.Output('display-value', 'children'),
            [dash.dependencies.Input('dropdown', 'value')])

def display_value(value):
    return 'You have selected "{}"'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

STEP 4: PUSH IT LIVEEEE

heroku create awesome_dashapp_name
git add .
git commit -m "WHEEE FLASK"
git push heroku master
heroku open
pip3 install dash==1.8.0
pip3 freeze > requirements.txt
git status
touch .gitignore

STEP 5: Add a gitignore:

(should probably do this before pushing live but again, lil stition)

venv
history
*.pyc
.DS_Store
.env

DASH COMPONENTS:

LAYOUT

  • what the app looks like