Deploying a Dash App on Heroku
Introduction
In this article, I’ll go over how to deploy a dashboard created with Plotly Dash on Heroku so you can share your insights with anyone, anywhere, at any time. To get started, you should either have a Dash dashboard prepared, or you can create a quick one using the template repo hosted on my GitHub. You can also build one from scratch following my tutorial on How to Create a Multipage Dash App. I’ll also share some resources on deploying a Dash App on Heroku at the end of the article. Let’s get started.
By way of a little lighthearted warning: You may need some time to do this. So if your kids are in desperate need of your attention or you’re afraid they’ll color on the wall while you’re not paying 100% attention like I was while writing this… I suggest you bookmark this article and come back when you are able to give it your full attention and a little bit of time. I’m a dad/parent, I know how this goes.
Deployment
Create a Heroku account and install Heroku Command Line Interface (CLI)
- If you don’t already have an account, go to Heroku and create an account. Fill in the form with
- First Name
- Last Name
- Email address
- Company Name (optional)
- Role (I chose student)
- Country
- Primary development language (I chose Python)
- Click the box that says you aren’t a robot… assuming you’re not a robot.
- Submit the form
2. Travel over to your email to confirm your account.
- Click the link in your email which will bring you to a landing page where you’ll create your new password.
- Read and accept the terms and conditions.
- And Bob’s your uncle.
3. Install Heroku Command Line Interface (CLI)
- Select the appropriate install method for your OS
- Follow default installation process
4. Once Heroku CLI is installed, open a terminal to test the instillation. You can do this by entering the below command to get the version number.
$ heroku --versionIf you don’t get an error and the version number is provided, the installation was successful.
Deployment Process
Now that you’ve created a Heroku account, we can begin the deployment. If you have a project ready to deploy, awesome. If not, you can head on over to my GitHub page and clone my Plotly Dash Pages Template repo. I’ve written another article on how to create a dashboard with multiple pages using Dash you can also check out.
First, you’ll need to initialize a git repo and a virtual environment in your project folder.
$ git init # initializes an empty git repo
$ virtualenv venv # creates a virtualenv called "venv"
$ source venv/bin/activate # uses the virtualenvInside your virtual environment, install your dependencies
$ conda install -c conda-forge dash
$ conda install -c conda-forge dash-bootstrap-components
$ pip install gunicornAdd a file in your project folder called Procfile with the following code:
web: gunicorn app:serverTo do this, you will name the file Procfile. Procfile.txt is not valid. You can check the Heroku documentation on this for more details. Depending on how you create this file, you may need to open it with a text editor. I did this project using PyCharm and was able to edit the file through the IDE. Another option is to simply navigate to the file in file explorer, right click on the file, and open the file with Notepad or another text editor of your choosing.
If you’ve cloned my repo, you’ll need to change the Profile to this:
web: gunicorn index:serverNext, create a requirements.txt file by running the below command in your command prompt or shell.
$ pip freeze > requirements.txtUse the command line to log into heroku:
$ heroku loginOnce you’ve successfully logged in through Heroku CLI, run the below commands which come directly from the Dash documentation and allow you to initialize Heroku, add files to Git, and deploy.
$ 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 boilerplate'
$ git push heroku master # deploy code to heroku
$ heroku ps:scale web=1 # run the app with a 1 heroku "dyno"If everything went according to plan, you should see a success message in the command line with a link to your newly deployed Heroku app.
Once the deployment is successful, I suggest linking the Heroku app to your GitHub repo. To do so, navigate to your Heroku account. Under the Deploy tab, you should see a button to connect to GitHub. Once you’ve connected your Heroku account to GitHub, under the Deploy tab you should see a search box to connect to a repository. Enter the name of your GitHub repository and press Search. Once the repository is found, press connect.
Navigate to your GitHub repo and you should see that the repo has a Environment on the right side of the screen.
Now those visiting your GitHub can access your Heroku app right from your GitHub as well.
Possible deployment failure resolution
If deployment fails, one possible culprit is the requirements.txt. I had this issue so I’ll walk you through how to fix this here. To fix the requirements.txt, you’ll need to replace some of the text with the appropriate version number of the package. To do this run the below command to create an environment.yml.
conda env export > environment.ymlOpen the enviornment.yml and for each of the packages listed in your requirements.txt, replace the file path with ==[version number]. For example, if you have
asgiref @ file:///tmp/build/80754af9/asgiref_1602513567813/workReplace it with
asgiref==3.3.0Do so for every package listed in your requirements.txt file. Once done your requirements.txt file should look similar to this:
...
dash==1.21.0
dash-bootstrap-components==0.13.0
dash-core-components==1.17.1
dash-html-components==1.1.4
dash-renderer==1.9.1
dash-table==4.12.0
Flask==2.0.1
Flask-Compress==1.10.1
gunicorn==20.1.0
...Hopefully this fixes your issue. If not, leave a comment and I’ll do my best to help you sort it out.
