Deploy the Etherpad Collaborative Web Editor to App Platform

App Platform is a Platform-as-a-Service (PaaS) offering that allows developers to publish code directly to DigitalOcean servers without worrying about the underlying infrastructure.


Etherpad is an open-source web application that enables real-time collaborative text editing in the browser. It is written in Node.js and can use a variety of databases for its backend storage. This tutorial will show you how to deploy the official Etherpad Docker image to DigitalOcean’s App Platform and connect it to a managed PostgreSQL database.

In this tutorial, you will:

  1. Create a new App Platform App
  2. Create a PostgreSQL database
  3. Configure Etherpad to connect to the database
  4. Deploy Etherpad and the database
  5. Learn more about customizing and configuring the Etherpad app

Prerequisites

Before starting this tutorial you will need:

Step 1: Creating a New App on App Platform

First, go to the new app page of the DigitalOcean Control Panel. You can also get there by clicking on the Apps tab in the left-hand navigation, then create a new app.

You will be prompted to select the source for your application. You’ll be using a Docker image that is published to Docker Hub, so click on Docker Hub.

Control panel interface indicating step 1 of 4. 'Choose Source' is the headline and there are options for GitHub, GitLab, and Docker Hub. 'Docker Hub' is highlighted

You will then be asked for details about which Docker repository and tag to use. Fill in etherpad/etherpad as the Repository and leave the Tag field blank to default to the latest tag:

Control panel interface with text boxes for 'Repository' and 'Tag' information

Click Next to continue to the next step, where you’ll add a database and configure your app.

Step 2: Adding a Database and Configuring the Etherpad App

In this step you’ll add a managed PostgreSQL database to your app, then add environment variables to the app’s Etherpad component to tell it how to connect to the database.

You should be at the “Configure your app” screen at this point:

Control panel interface, step 2 of 4, headline is 'Configure your app'. There are configuration options for a container image, and a button at the bottom for 'Add a Database'

First, click the Add a Database button.

A database configuration screen will pop up. The defaults are fine for now. This will create a development database called db. It will be sufficient for light use, and you can always upgrade in the future.

Press Add Database to finish your selection and return to the configuration screen.

Next, click Edit in the Environment Variables section of your container component:

Control panel interface, the 'Edit' button in the 'Environment Variables' section is highlighted

You’ll be presented with a text box for Keys and a text box for Values. Click the + plus symbol on the right to add more key/value text boxes, then fill in the keys and values for the following eight environment variables:

Key Value Explanation
TRUST_PROXY true Sets up correct headers and logging when Etherpad is behind a load balancer or proxy
PGSSLMODE no-verify Allows Etherpad to connect to databases with self-signed SSL certificates
DB_TYPE postgres Sets the database type to PostgreSQL
DB_HOST ${db.HOSTNAME} Sets the database hostname
DB_PORT ${db.PORT} Sets the database port number
DB_USER ${db.USERNAME} Sets the database username
DB_PASS ${db.PASSWORD} Sets the database password
DB_NAME ${db.DATABASE} Sets the database name

Note the use of special App Platform bindable variables such as ${db.HOSTNAME}. These are variables that allow App Platform to reference dynamic values during build and deployment. In this case, App Platform will automatically inject the correct database information into the environment variables that Etherpad needs to configure its database connection.

After you’ve filled in all eight environment variables, scroll down to the bottom of the page and click Next to continue to step 3.

Step 3: Name the App and Choose a Region

In step 3 of the workflow you’ll name your app and choose which datacenter region to use.

By default your Etherpad service will have an auto-generated name based on the Docker image name, in this case etherpad-etherpad. You may change this to something more meaningful, or leave it as is.

Next, pick the datacenter region you’d like to deploy to. The default region shown in the dropdown will be nearest to your current location.

When you’re done selecting, click Next to move to the final deployment step.

Step 4: Finalizing Details and Deploying Etherpad

You’ll now need to choose your App Platform plan and your container sizes, then deploy the app.

The default Basic plan should be fine for now, and you can always upgrade later. Compare the available features and choose your plan.

Next, choose your container size. The default install of Etherpad should run fine in a container with 512MB of RAM, but additional plugins or traffic may require more memory and CPU power. This setting can be changed later as well.

Review the monthly cost, then click the Launch Basic App button to complete the process.

You’ll be taken to the new app’s dashboard, and should see a status notification with build information in it. Your app container will be created, then your database, and eventually the status will update to indicate a successful deployment:

Dashboard interface of a successfully deployed app, with the app name and a green 'success' status box. A 'Live App' button is highlighted

You can click on your app’s URL or the Live App button to open your new Etherpad instance in your browser:

The Etherpad app index page with a 'New Pad' button and a textbox for creating a named pad

With that, you’ve successfully deployed Etherpad on App Platform. Next we’ll look at how to customize Etherpad.

Step 5: Customizing Etherpad with Environment Variables

The official Etherpad Docker image exposes many configuration options via environment variables. The Etherpad docker image documentation lists all the available options, including the ability to customize the visual theme and install Etherpad plugins.

To update your environment variables, first go to the Settings tab of your app. Click on your Etherpad component, then click Edit next to Environment Variables:

Control panel interface, highlighting the 'Edit' button in the 'Environment Variables' section of the app settings

Try updating the title of your Etherpad instance by setting a TITLE environment variable:

Environment variable configuration interface, with a new 'TITLE' variable and 'Sammy's Pad' as the associated value

Press Save. The variable will be saved and your Etherpad container will be re-deployed. After reloading Etherpad in your browser, you should see an updated title in your browser window.

Summary

In this tutorial you:

  • deployed the Etherpad Docker image to App Platform
  • created a PostgreSQL database
  • created environment variables to configure Etherpad’s database connection
  • connected to your live Etherpad instance with your browser
  • learned how to further customize Etherpad through environment variables

What’s Next?

Your Etherpad app is ready to be used, but there are a few additional steps you may want to take soon:

  • If you want to replace the temporary https://etherpad-etherpad-2ybz7.ondigitalocean.app/ domain with your own, take a look at our How to Manage Domains in App Platform documentation.
  • To further customize Etherpad, please visit their Etherpad docker image documentation to find a list of every configurable environment variable.
  • To upgrade your database to something more production-ready, see the Upgrade Dev Database section of our App Platform database documentation.

Finally, for more information on Etherpad itself, beyond Docker-specific configuration, please visit the Etherpad wiki on GitHub.