How to Manage Static Sites in App Platform

Create a Static Site

Note
If a Static Site comprises the entirety of your App Platform app, you can use the usual app creation process. These instructions apply when a static site is just one component that you’re adding to an existing app.
  1. Go to https://cloud.digitalocean.com/apps, click on your app, and click on the Settings tab. Add a Static Site component by clicking the Add Component button and choosing the Static Site option.
Component screen
  1. Select the source code for the Static Site on GitHub. If connecting for the first time, you will see an empty repository list and will need to click the link labeled Configure your GitHub permissions, then refresh this page.

  2. Next, select which branch of the source repo you’d like to use as the source of the Static Site. Click Next.

  3. App Platform will inspect the code and select an appropriate runtime environment (such as Node, Ruby, etc). If you need to override this, you can see if there is a better options in the drop-down labeled Type as well. If nothing suitable appears there, upload a Dockerfile to your branch and restart the app creation process.

  4. App Platform will also display any appropriate build and run commands that it detected, which you can now customize as needed.

  5. If the use of environment variables is required, click Edit and supply them. Click the Encrypt checkbox to ensure a variable’s value is obscured in all build, deploy, and application logs.

  6. Give the Static Site a name and click Next.

  7. Select a plan, and click Launch Static Site.

Configure a Static Site

Go to https://cloud.digitalocean.com/apps, click on your app, and click on the Settings tab. Click the Static Site you’d like to edit.

You can use the configuration settings you see here to change the Static Site’s scaling behavior, modify environment variables, edit commands, and more.

When an error occurs on the static site, App Platform displays an error document. You can specify a custom error document. Click Edit in the Custom Pages section.

Select one of the following options:

  • Error: Specify a document for errors for the site.

  • Catchall: Specify a catch-all document that the site uses to redirect requests to pages that are not found on the site.

Enter the name of the error or catch-all document in the Page Name field and click Save. The .html file must be in your repository for App Platform to use it in the build. App Platform uses a default document if you do not provide one. For static sites that have Javascript-based client side routing, you can specify index.html as the catch-all document.

Destroy a Static Site

Go to https://cloud.digitalocean.com/apps, click on your app, and click on the Settings tab. Click on the Static Site you’d like to destroy.

You can destroy the Static Site by clicking the Destroy Component button on the bottom of the page and entering its name to confirm your selection.

The build and run commands are the command-line statements that compile your app component at build time and launch your app component after it has been built, respectively.
A component in App Platform is any deployable, billable, run-time software element in your app. A component can be a database, a service, a worker, or a static site.
A container is a single running instance of a service, worker, or static site component shipped on App Platform.
In App Platform, a static site is a type of component that only consists of a build process that produces static assets.