It is exciting to see your beautiful dash app running locally, but it would be even more interesting if others can interact with it over the web too!

1. Introduction

This documentation assumes some prior knowledge of Python and HTML/CSS. A minimum of being able to install Python, packages, and be able to execute code should get you a example visualisation. If you need assistance with Python, python.org provides documentation and tutorials.

In this documentation you will see the app that was built in Dash tutorial deployed onto an online cloud platform - Heroku, step by step. Although there are other providers you can choose from such as Microsoft Azure and Amazon Web Services, but Heroku offering a free plan which is sufficient for most of us. If you do require more scaled solutions, check out their websites.

If you simply want to share your Jupyter Notebook, find out options at Host Jupyter Notebook.

My codes for the app can be found here, and my dash app is published as dash-widgets.

2. Installation

To host a dash app with Heroku, you'll need the following (at minimum):

• Git
• Heroku account
• Heroku Command Line
• virtualenv

If you're using Jupyter notebook you'll need to change the extension .ipynb to .py. To do this, install nbconvert use the command pip install nbconvert,then jupyter nbconvert --to script app.ipynb for conversion.

3. Initialisation

Nagivates to the folder where your dash app located, and initialise the folder:

git init                  # initialises an git repo at current directory
virtualenv venv           # creates an virtual environment called "venv"
source venv/bin/activate  # enter the virtual environment

If you're using Windows, use source venv/Scripts/activate instead for the last command. If you close the terminal then you'll need to re-enter this command to activate virtualenv. Since this is a fresh environment we have to re-install dependencies, this depends on what packages you're using. My packages:

pip install dash
pip install plotly
pip install pandas
pip install numpy
pip install gunicorn # you have to install this to deploy the app

Now add three addition files Procfile, .gitignore, and requirements.txt to app's directory.

Procfile (without any file extension):

web: gunicorn app:server

NOTE: app and server refers to the python file app.py's filename and server variable:

app = dash.Dash(__name__)
server = app.server

You can change them to whatever you like.

.gitignore (prevent git upload files listed in this file):

venv
*.pyc
.DS_Store
.env

requirements.txt (specify dependencies for your environment), use the following command to generate this file automatically:

pip freeze > requirements.txt

4. Deployment

To continue, make sure you've installed Heroku Command Line. First create a named heroku app:

heroku create your-app-name

If this is the first time you use the heroku CLI then it will ask you for username and password.
Then push your directory to heroku:

git add .
git commit -m 'My dash app'
git push heroku master

If you're using Windows and encountering a similar message 'No matching distribution found for pywin32=323' when push to heroku, then go to the requirements.txt and delete the line pywin32=323, this should resolve the issue and you can execute git push heroku master again.
Last step, run the heroku app on web:

heroku ps:scale web=1

Type https://your-app-name.herokuapp.com in your browser and hit enter should get you to your first web dash app!

Whenever you've made changes to your .py file, you'll need to repeat commands from git add . onward to update the app.