Goal of this tutorial

Guild through how to deploy a dash app on Heroku.

Here is the final output, and of course, you can give your app a different name!

https://my-first-dash-app-brook-random.herokuapp.com/

What’s Dash?

Dash is a Python framework for building web analytic applications.

Written on top of Flask, Plotly.js, and React.js, Dash is ideal for building data visualization apps with highly custom user interfaces in pure Python. It’s particularly suited for anyone who works with data in Python.

What’s Heroku?

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Heroku is one of the easiest platforms for deploying and managing public Flask applications.

Prerequisite:

Heroko account and install Heroku CLI (https://www.heroku.com/)

Steps

  1. Create a folder and initiate git

    1
    2
    3
    $ mkdir your_dash_app_folder
    # cd your_dash_app_folder
    # git init

  2. Create a virtual environment. This will be the environment on which app will run.

    With python 3:

    1
    $ python3 -m venv your_venv_name

    With python 2
    first install virtualenv

    1
    $ virtualenv your_venv_name

  3. Activate virtual environment

    1
    $ source your_venv_name/bin/activate # uses the virtualenv

  4. Install dash, plotly and gunicorn, and any other packages required to run your app.

    1
    2
    3
    $ pip install plotly
    $ pip install dash
    $ pip install gunicorn # a Python Web Server Gateway Interface HTTP server

  5. Add app.py file. An example would be

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    import os
    import dash
    import dash_core_components as dcc
    import dash_html_components as html

    external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

    app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

    server = app.server

    app.layout = html.Div([
        html.H2('Hello World'),
        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)
  1. Add .gitignore file
    1
    2
    3
    4
    5
    venv
    *.pyc
    .DS_Store
    .env

  2. Add procfile
    1
    web: gunicorn app:server
    (Note that app refers to the filename app.py. server refers to the variable server inside that file).

  1. Run locally 

    1
    $ python app.py

  2. Add requirements.txt

    1
    $ pip freeze > requirements.txt

  3. Init and deploy by heroku
    As for now Heroku allows one “dyno” and five free apps to run.

    1
    2
    3
    4
    5
    $ heroku create my-dash-app # change my-dash-app to a unique name
    $ git add . # add all files to git
    $ git commit -m 'Initial app boilerplate'
    $ git push heroku master # deploy code to heroku
    $ heroku ps:scale web=1  # run the app with a 1 heroku "dyno"

  4. Redeploy

    1
    2
    3
    4
    $ git status # view the changes
    $ git add .  # add all the changes
    $ git commit -m 'a description of the changes'
    $ git push heroku master

Trouble shooting

  1. what if App deployment fails? Try find out the deployment details by heroku logs --tail

Reference:

https://dash.plotly.com/introduction
https://www.heroku.com/
https://dash.plotly.com/layout