Guide: Adding a custom domain to a Heroku App

This is a guide to adding a custom domain to an OpenActive Heroku app using the Heroku GUI. This involves updating the DNS configuration in Cloudflare and reusing the OpenActive Cloudflare Origin Certificate stored in LastPass.

Step 1: Prepare Your Heroku App

1. Login to Heroku Dashboard: Go to Heroku Dashboard and log in.

2. Select Your Application: Choose the application you want to configure from your list of Heroku apps.

Step 2: Add the Custom Domain to Heroku

1. Navigate to Settings:

   • In your Heroku dashboard, go to the app you want to configure.

   • Click on the Settings tab.

2. Add Custom Domain:

   • Scroll down to the Domains section.

   • Click Add Domain.

   • Enter your custom domain (e.g. yoursubdomain.openactive.io) and click Next.

   • Note the DNS target provided by Heroku (e.g., 79yu0u8x.herokudns.com). You will need this for Cloudflare configuration.

Step 3: Configure Cloudflare

1. Log in to Cloudflare: Log in to your Cloudflare account and select the "openactive.io" domain.

2. Add DNS Records:

   • Navigate to the DNS -> Records tab in Cloudflare.

   • Add a CNAME record for your custom domain that points to the Heroku DNS target.

     • Type: CNAME

     • Name: yoursubdomain (your subdomain)

     • Target: The DNS target from Step 2

   • Ensure the orange cloud icon is enabled, indicating that Cloudflare is active for this record.

   • Click Save

Step 4: Install the Cloudflare Origin Certificate on Heroku

1. Retrieve the Origin Certificate from LastPass:

   • Log in to your LastPass account and locate the note named "OpenActive Cloudflare Origin Certificate".

2. Install the Certificate on Heroku:

   • In Heroku Dashboard, navigate to the Settings tab of your app.

   • Scroll down to the SSL Certificates section.

   • Click Configure SSL.

   • Select Manual Certificate Management.

   • Use the Display Name of "OpenActive Cloudflare Origin Certificate".

   • Click copy and paste your certificate in the the Public Certificate field.

   • Copy the Certificate content from LastPass ("-----BEGIN CERTIFICATE-----" to "-----END CERTIFICATE-----", inclusive) and paste it into the Public Certificate field in Heroku.

   • Click paste the contents of the file directly in the the Private Certificate field.

   • Copy the Private Key content from LastPass ("-----BEGIN PRIVATE KEY-----" to "-----END PRIVATE KEY-----", inclusive) and paste it into the Private Certificate field in Heroku.

   • Click Next.

   • Choose the newly created App domain to associate this certificate with.

   • Click Next.

   • Click Finish.

Step 5: Verify the Configuration

1. Test the Domain:

   • Open a web browser and navigate to yoursubdomain.openactive.io.

   • Ensure that your website loads correctly and that the SSL certificate is valid.