Deploy a Plotly Dash app on Heroku

Heroku is a cloud platform that lets developers build, deliver, and scale their apps — bypassing infrastructure headaches and focusing on deploying our apps to end-users. Sign up for a free Heroku account if you haven’t already.

Download & install the Heroku CLI. If you’re installing on Amazon Sagemaker Studio, take a moment to read my other blog post about how to install Heroku with AWS. This is basically the same as Linux installation.

If you’re installing on a Macbook, you’ll want to install brew first, if you don’t already have it.

After you install the CLI, run the heroku login -i command. You’ll be prompted to provide your Heroku username and password.

Fork & clone this repository on github. Then navigate into the folder you just cloned withcd 102-flying-dog-beers and explore the files with ls -l. The repo includes the following four essential files; these have already been prepared for you.

• app.py
• requirements.txt
• runtime.txt
• Procfile

You can run the app locally, just to confirm that it’s working properly, with the command python app.py. If you haven’t already done so, you’ll want to install Plotly Dash with the package manager of your choice, like pip install dash or conda install dash. Remember, every time you make a change you’ll want to save & run, just to check your work.

It can also be a good idea to use a virtual environment like venv or conda env, especially for more complex projects involving a lot of dependencies. But it’s not strictly necessary for this tutorial.

Checkout your git remote using git remote -v. You should see the remote repository called origin listed something like this:

origin git@github.com:austinlasseter/flying-dog-beers.git (fetch)
origin git@github.com:austinlasseter/flying-dog-beers.git (push)

Initialize Heroku as follows:

heroku create some-name-here

Make sure the name you use is unique — no two heroku apps can have the same name! You will get an error message if the name you chose is already taken, and you’ll have to try again. There are also a few other naming restrictions (cannot exceed 30 characters, etc.).

Now add files to the Heroku git repository (this is different from Github) as follows:

git add .
git commit -m 'some commit message here'
git push heroku main

When you run git push heroku main for the first time, all of the libraries will install (so the commit take a minute).

Once git is done pushing to Heroku, you can check your remote repositories using the same command as before: git remote -v. You should now see both origin (that’s Github) and heroku listed as remotes, something like this:

heroku https://git.heroku.com/polar-everglades-19622.git (fetch)
heroku https://git.heroku.com/polar-everglades-19622.git (push)
origin git@github.com:austinlasseter/flying-dog-beers.git (fetch)
origin git@github.com:austinlasseter/flying-dog-beers.git (push)

You can now view the finished app on the web with the command heroku open. Here’s a link to my version of the finished app; yours should look similar.

Every time you make additional changes to the files, you’ll need to push those changes to Heroku with git push heroku main. However, you’ll also want to push those same changes to github with git push origin main.

That’s it!