Step-by-step guide to your first interactive dash app — Part VII

Welcome to the last part of my guide to create and deploy an interactive dash app from scratch! You might be here because you read parts I to VI and are now ready to deploy the monkeypox-tracking app that you have assembled bit by bit. Or you might have your own app prepared and ready to be shared with the world. In both cases, the final step in your app development is the deployment. Today we will learn how to do it for free on Heroku. By default, Dash apps run on localhost , that is they only run locally on your machine. To share a Dash app, you need to deploy it to a server. Dash of course advertises its own paid service for deployment, called Dash Enterprise, as their recommended method (why wouldn’t they?). However, on their website, Dash also suggests Heroku as a free alternative.

Disclaimer

Unfortunately, as things happen, Heroku’s policy changed as I was in the middle of writing this guide. Starting November 28th, 2022, free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis® will no longer be available. If you have apps using any of these resources, you must upgrade to paid plans by this date to ensure your apps continue to run and to retain your data. That’s a bummer, of course. Heroku’s dynos start at $7 / month, which is not terribly expensive, but can scale up quickly. And if you want to deploy your app just for fun or as a hobby, you don’t necessarily want to pay anything at all. There are still free alternatives, and this guide might help you decide in which direction to go. For instance, render.com still has a free tier and is supported by plotly (thanks to Andrew Hossack for pointing that out to me).

For the sake of consistency, I will still explain to you how to deploy your app on Heroku here, because that’s what I learned. Also, it’s what Plotly/Dash recommends on their website as an alternative to Dash Enterprise, and I will follow these steps. It’s up to you to decide if you want to go down the Heroku way or choose a different provider such as Render.

Opening an account on Heroku and installing git & virtual environment

Creating an account on Heroku is fairly easy. Go to heroku.com and follow the steps indicated on the website. You will need to provide an email and two-factor authentication is strongly recommended either via an authenticator app or phone number.

In order to upload and update the repository on Heroku, you will need git, a free and open source software for version control. You might be familiar with it if you use software repository management resources like GitLab and GitHub, but if you don’t you can find instructions on how to install and run git on its website or on this guide. Don’t worry if you don’t know all the git commands. You will need to use only the basic syntax, which I’ll explain later.

Finally, to manage all the python packages you need to install for your app, you will require another managing package called virtualenv. This tool allows you to create separate python environments with different versions of the packages you need. Imagine you need to bake 5 different cakes. The cakes require different ingredients. Maybe you’re baking a standard sponge cake, but also a gluten free cake with no wheat flour, and another cake with no eggs and dairy for your vegan friend. You don’t want the ingredients to mix up and end up in the wrong cake. At the same time, you might need slight different versions of the same ingredient for different cakes: one type will require white flour, but another will need whole-grain flour. Wouldn’t it be practical to have five different pantries with the ingredients for your cake already selected and pre-portioned? Translating this problem into coding terms, this is exactly what virtualenv does. The cakes are different programs you created, and the ingredients are the different packages (and versions) you need for each program. Virtualenv allows you to create copies of your python environment with different versions which are activated only when you need to run the program. Apart from making things neater and saving time, virtualenv also prevents conflicts when two different programs require different version of the same package. To install virtualenv depending on your system you can take a look at the official installation guide.

Getting to know Heroku

If you want to be more comfortable with the deployment process, I recommend you run through the Heroku step-by-step tutorial on deploying a python app. This is not a Dash app, but a Django app (which is provided by Heroku), but along the way you will learn all the concepts you need to maintain your app on Heroku, such as:

• how to activate and scale up dynos — virtualized Linux containers that execute the app code and form the building blocks of your app execution.
• define a Procfile — a text file in the root directory of your app that declares what commands should be executed to start your app.
• view the logs to monitor the status of your app.
• run the app via Heroku locally to quickly check whether it works or not, or manage changes.
• updated the app and push changes
• etc.

If you’re only interested in the minimal example of uploading your app to Heroku and running it, you don’t need to follow the tutorial above and can simply go through the steps in the next section. However, you will eventually want to learn more about the managing capabilities of Heroku, so it’s worth doing this tutorial at some point.

Prepare the project

The first thing you need to do is to choose a location on your computer where to put your project. Create a folder and go to that directory by typing the following commands in your console (I will still use the monkeypox app as an example but feel free to change the name!):

mkdir monkeypox-deploy
cd monkeypox-deploy

Then, initialize a new empty git repository for version management, create the virtual environment for your packages, and activate it with:

git init
virtualenv monkeypox-venv
source monkeypox-venv/bin/activate

Since the virtual environment creates a new instance of your Python, you will need to re-install all the packages you used in your app (check part I of my guide for the complete list you need for the monkeypox app). Furthermore, you need to install gunicorn, a Python WSGI (Web Server Gateway Interface) HTTP server, or in simpler terms a software that allows your python to communicate with the internet via the HTTP protocol (this is a quick explanation of what gunicorn does if you are more curious). Gunicorn is best installed via pip:

pip install gunicorn

but you can check the docs if you want to install it from source.

Finally, put all of your app files into the folder monkeypox-deploy, and create the following files e.g. with a text editor such as vim (see below for a screenshot of what they should contain):

• .gitignore: this is a list of files that git will not track.
• Procfile: this file declares all commands and process types that should be executed by the app at startup.
• requirements.txt: this file describes the Python packages needed in your app. You can fill this file in automatically with
  pip freeze > requirements.txt.

Important! The variable app in the Procfile refers to the filename app.py, so if you named your main app in a different way, you will need to modify the Procfile accordingly. Similarly, server refers to the variable server inside that file.

Creating and deploying your Heroku project

After you have created all the folders and the files mentioned above, you are ready to create your Heroku project. Simply type the following commands:

heroku create monkeypox-app-1234
git add .
git commit -m ‘Initial app boilerplate’
git push heroku master
heroku ps:scale web=1

What these commands do is:

• Create the heroku project (change 1234 to a different number in case it’s already taken — or obviously substitute it with the name of your own project).
• Add all the files to the git tracking.
• Commit the changes to the git with a message.
• Push the changes to the repository. Note that you will need to enter your Heroku username and password. Alternatively, if you are operating with Heroku CLI, you can simply type heroku login first, after which you will be prompted to login via a web browser.
• Run the app with a 1 Heroku dyno.

Your app is online!

Wait until the transfer is complete (you will see a bunch of info appearing on screen as in the screenshot above), and then check that all went smoothly by going to the web address of your app (at https://monkeypox-app-1234.herokuapp.com) and clicking around.

Note that you will have to repeat these three commands

git add .
git commit -m ‘Description of changes’
git push heroku master

whenever you modify the app and you want to redeploy it. Additionally, you can use

git status

to check the status of your repository in case you create branches etc.

Voilà, you have managed to put your first Plotly/Dash app on the web for everyone to see and enjoy. Congratulations! I’m sure this is only your first step in the fantastic world of Plotly/Dash and you will learn so many more cool functionalities in the future. Remember, if you have a question the Plotly/Dash community is always ready to help in the forum.

If you have found this guide useful, please consider donating to my buymeacoffee page, it really helps me carving out time for side projects like this!

Thanks for reading, and I wish you lots of success with your future Plotly/Dash endeavours!