Creating a Dashboard App with Dash/Heroku: A Streamlined Process

Always wanted to create a dashboard, but concerned about where you have to host it and learning CSS and HTML seems daunting? Then this article is for you!

Dash/Plotly work synergistically, so you can create stunning visuals with ease while working solely in Python [1]. Dash is a python library that works as a wrapper library for HTML code. In fact, the notation looks somewhat similar to HTML and echoes the general framework and format with a few slight differences.

This article is dedicated to the deployment of a dashboard built using Dash and hosted using Heroku [2], it makes the assumption you know enough about building an app with Dash using a .py file. If you would like to see more information/an additional article covering Dash, please leave a comment below. : )

Create Account on Heroku/Install necessary dependencies:

1. Sign up for an account on Heroku: https://id.heroku.com/login
2. Create your App name (this will be part of the URL eventually, so choose wisely!)

3. Download and install Heroku CLI:

   • this allows you to use git to update and change your dashboard from the command line using git

👁 Image

In IDE of Choice:

4. Create new project in a folder and use your preferred Editor (PyCharm, VSCode etc.)

• Select ‘Create New Project’ in PyCharm, this will prompt you to specify a path name with a folder for the location of your files. The name/folder should be project specific
• Before clicking ‘Create’ for the project, select ‘New Environment Using’ and use the drop-down to select Virtualenv
• The venv should use your base Python interpreter environment to build its own venv within the project folder
• Finally, select ‘Create’

👁 Image

5. In the project venv, install dependencies in the terminal:

pip install numpy
pip install pandas
pip install dash
pip install plotly
pip install gunicorn

Gunicorn allows you to run a Python app concurrently by running multiple Python processes within a single dyno (building blocks that power all Heroku apps).

6. In the project folder create a .gitignore file (tells our git which files to ignore) and in it copy/paste:

venv
.DS_Store
.env
*.pyc

7. Create a Procfile inside project folder and paste this:

web gunicorn projectname:server

Where projectname is the name of your .py file you specified at the outset of project creation. You will not use the .py file ending to the file name (so drop this part of filename).

8. Create requirements.txt. This command should be run from within your project folder and your venv:

(venv) /projectfolder$ pip freeze > requirements.txt

9. Your project.py file is where you will write the code for your app. I’ll cover a few basics of Dash and Plotly in a different article.
10. Inside your app’s main project.py file, you need to add the two lines below. This flags Dash that we are building an app. When We click ‘run’ in the upper right corner, it will run locally and provide a URL link where you can adjust our dashboard as necessary.

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

Your file structure should look something like the figure below. In my case my project (python file) is multi-ml-health.py. We also need to ensure our .csv (data is being pulled from) is in our project folder as well.

👁 Image

11. Hopefully you are already located in your project folder and your venv is active. If not, this is required for the next step, as we connect our project we instantiated on Heroku’s website to the dashboard we have created using Dash in Python. Sign in to Heroku:

(venv) /projectfolder$ heroku login

It will prompt you to select any key to open the browser and sign in using your credentials.

12. Create a new git repo inside project folder:

(venv) /projectfolder$ git init
(venv) /projectfolder$ heroku git:remote -a projectnameonHeroku

projectnameonHeroku is the name you created on Heroku (not the folder you are uploading from). And prepare to stage changes to git:

(venv) /projectfolder$ git add .

Commit changes and add message for initial app launch! This will stage our changes to the project on Heroku. : )

(venv) /projectfolder$ git commit -am "launch app"

Push changes to the master (main) branch of the project on Heroku:

(venv) /projectfolder$ git push heroku master

The last three git commands will be used to make adjustments to your dashboard app as required in the future.

Updating the Dashboard: Clone the Repo

Login again to Heroku. Use Git to clone multimodal-ml-health’s source code to your local machine. This should ideally be nested within your local folder system from the initial deployment.

(venv) /projectfolder$ heroku login
(venv) /projectfolder$ heroku git:clone -a multimodal-ml-health 
(venv) /projectfolder$ cd multimodal-ml-health

Deploy your changes

Make some changes to the code you just cloned and deploy them to Heroku using Git.

(venv) /projectfolder$ git add .
(venv) /projectfolder$ git commit -am "updated figure 2"
(venv) /projectfolder$ git push heroku master

Example Dashboard

Here is a link to my dashboard created as an example that was developed alongside a review article submitted to Nature Machine Intelligence:

https://multimodal-ml-health.herokuapp.com/

---

Additionally, if you like seeing articles like this and want unlimited access to my articles and all those supplied by Medium, consider signing up using my referral link below. Membership is $5(USD)/month; I make a small commission that in turn helps to fuel more content and articles!

Join Medium with my referral link – Adrienne Kline

References:

[1] Dash Enterprise, plotly.com, accessed: June, 5th 2022 [2] Heroku, Heroku: Cloud Application Platform, accessed: June, 6th, 2022

Share This Article

• Share on Facebook
• Share on LinkedIn
• Share on X