Step 1. Create a new folder for your new Dash app

Here we will create a new folder to put our project in

$ mkdir my_dash_app
$ cd my_dash_app

Step 2. Init the folder with git and a virtualenv

$ git init                          # initializes an empty git repo
$ virtualenv venv                   # creates a virtualenv called "venv"
$ source venv/bin/activate          # uses the virtualenv

Step 3. (Pip) install Dash and Gunicorn package

$ pip install dash
$ pip install plotly
$ pip install gunicorn

Step 4. Initialize the folder with sample app for deployment

Create the following files in the project folder

app.py

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

top_markdown_text = '''
This is my first deployed app
'''

app.layout = html.Div([

    dcc.Markdown(children=top_markdown_text),

])

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

.gitignore

venv
*.pyc
.env

Procfile

(Note that app refers to the filename app.py. server refers to the variable server inside that file).

web: gunicorn app:server

requirements.txt

This is needed for heroku buildpacks to recognize that this is a python project. Basic requirements.txt

dash
plotly
gunicorn

or you can fill this with:

$ pip freeze > requirements.txt

Step 5. Installing Heroku CLI (if you have not)

The CLI tool can be downloaded and installed on your system. There are few ways to install based on your operating system. As for myself, I am using FreeBSD, therefore I will just install the NPM package using yarn.

Note: The method I am using will install heroku cli tools to the dash project locally.

$ sudo pkg install yarn             # Make sure yarn is installed
$ yarn add heroku                   # Will add heroku to the local project folder
$ yarn run heroku                   # this will run heroku and print help messages
$ yarn run heroku [cmd]             # To run heroku command

Step 6. Initialize Heroku, add files to Git, and deploy

Note: as stated above, as I am running the heroku cli as a npm package installed locally, I need to use yarn run command.

$ yarn run 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 commit'
$ git push heroku master             # deploy code to heroku
$ yarn run heroku ps:scale web=1     # run the app with a 1 heroku "dyno"

After this, you should be able to view your app at https://my-dash-app.herokuapp.com or whatever the app name you have set to.

Step 7. Update the code and redeploy

When you have made changes to the git repo, you can update heroku again using,

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