Deploying to Digital Ocean's App Platform

[raptorbrad]

Deploying to Digital Ocean

Once you are prepared to share your Dash application with the world, you will begin looking for where to host it. In this guide, we will cover how to deploy your Dash application to Digital Ocean’s App Platform.

Downsides of Heroku

A common place to deploy your Dash app for free is Heroku. However, hosting with the free tier of Heroku has a major downside. After 30 minutes of inactivity, Heroku will move your Dash app into an idle state. When a new user navigates to your app while it is in the idle state, it takes extra time for your application to load.

If you don’t want users to experience this downtime, you may want to choose an alternative to the free-tier. Heroku does offer a Hobby tier for $7 per month that is slightly more robust than the free-tier. Digital Ocean offers a similar service

Digital Ocean App Platform

The Digital Ocean App Platform offers a seamless Continuous Integration/Continuous Development (CI/CD) platform.
They offer 3 tiers of service:

1. Starter ($0/month) - for basic static sites
2. Basic ($5/month) - for dynamic sites
3. Professional ($12/month) - for more robust scaling

Since Dash requires a backend server to be running, we will have to use at least the Basic tier. For most Dash applications, you shouldn’t need more than the Basic tier.

So why the App Platform? Simple. It’s really easy to use and connect with your Github repositories.

Deploying

Create an account

First step is to create an account on Digital Ocean. Sign up here.

Create an app

From your Digital Ocean dashboard, click on the green Create button in the upper right and select Apps.

Next, we will select the source of code.

For this tutorial, we will be deploying the Sample Dash App Structure Repo I made for a previous tutorial. You will likely need to click the Manage Access button and allow Digital Ocean to read from Github. Additionally, you’ll need to grant permissions for Digital Ocean to read specific or all repositories in your Github.

Once you have the permissions granted, you will be able to select your repository from the drop down. Select the branch you want to use for deployment. I usually use my main branch; however, if you want to keep a specific branch for deployments, select that one. Click Next once everything is filled in.

Now we select the amount of Resources we want given to our Dash app. By default, it selects the Professional level. To change this, click Edit Plan. Then select Basic and change your size to the $5/month - Basic. Click the Back button to save changes.

Edit plan

---

Set-up the basic plan setting

Before proceeding to the next section, we need to define out run command. Click on your application name, shown below. Then, edit the Run command to be the following:
cd ./src && gunicorn --worker-tmp-dir /dev/shm --timeout 120 app:server

Note that with this application, we need to change into the src directory. This might not be the case for your application.

Select the app

---

Set-up the run commands

Now, add any environment variables you need for your application. Don’t worry these can be changed later!
Click Next. Confirm the application information and click Next. Lastly, click the Create Resource button.

This will take you to your app dashboard. The dashboard provides you access to the console as well as what system resources are being used. Each time you push to the specified branch, you will see a notification that your app is being re-built. It takes between 5 and 10 minutes to fully deploy your app, but it could take longer.

Domain names

By default, Digital Ocean will provide a domain for your newly published application. You may want to consider adding your own domain name instead. Navigate to the Settings tab and follow the instructions under the Domain section.

Closing thoughts

I’ve been using Digital Ocean for quite some time to deploy my Pokemon Analytic Site. More specifically, I’ve been using the App platform since it was first released and I’ve loved every bit of it. It has made rapid development much easier.

I hope this guide helps you get your app deployed and shared with your world!

[adamschroeder]

What a lovely and helpful tutorial. Thank you so much, @raptorbrad .

cd ./src && gunicorn --worker-tmp-dir /dev/shm --timeout 120 app:server

Just to add a small clarification for new users that might try this. The run command has cd ./src and app:server because the app.py file is in the src folder and because the main app is called app.py respectively. Is that correct?

If the app was called mycoolapp.py, then we would write mycoolapp:server.

And if the app was not inside the src directory, we would write:
gunicorn --worker-tmp-dir /dev/shm --timeout 120 app:server

[raptorbrad]

Yes that is correct

[marcosh]

Very useful @raptorbrad!

I have multiple Dash apps running on the same modest server at Digital Ocean. I did not to use their app deployment from a repo feature. I have a fairly standard unbuntu droplet with python and the relevant libraries installed. I got the NgInx Web server up and running using, and then use nginx as a reverse proxy for UWSGI in emperor mode that can serve up multiple python/flask apps, including dash apps.

Some of the smaller ones auto-terminate themselves and save ram until they are activated.

This is much more complicated than what you described here, but for someone with the willingness to do UNIX webhost admin type work, it is a very affordable way to host a lot of dash apps in one place. Initially I had the cheapest droplet at $5/mo but my design of Recorded Vote is memory hungry so I upsized it to one more like $12/mo.

Recorded Vote, my covid case tracker, and about 3-4 much smaller and more obscure dash apps all hosted together on one server this way.

https://marcoshuerta.com/hugo/posts/deploying-uwsgi-for-dash/

[raptorbrad]

I initially started with a simple Droplet and did all the server admin stuff myself. However, server admin is not my strong suit and it took time away from actual development of my platforms.

Really awesome app and tutorial!

[marcosh]

Yeah, the server administration is not the fun part. Thankfully, I’ve gotten uwsgi set up now in such a way that adding a new (small) dash app is pretty easy. But I wouldn’t have fun starting from scratch.

If there was just some way to easily programmatically edit the nginx configuration from python… I think I could write something to automate the ‘add a new dash app’ process.