# 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.