Setting Up Custom Domains for Web Apps with Choreo

In the competitive world of web applications, every detail counts towards user trust and brand recognition. While the inner workings of your app are vital, a generic platform generated web address can hold you back. That’s where custom domains come in. Custom domains are essential for effective branding, discoverability, and credibility of your web application. In this blog lets explore how you can configure a custom domain for your web applications deployed on Choreo.

Prerequisites

• Create and deploy a Web application on Choreo

Here’s how to set up a custom domain on Choreo in three simple steps:

1. Configure a custom domain for an organization
2. Configure a custom URL for a component
3. Approve a custom URL request

Configure a custom domain for an organization

In this section, we’ll explore how to add a custom domain to your Choreo organization.

Note: You need to have administrator privileges in your organization to add a custom domain.

1. In the Choreo Console header, click the Organization list.
2. Navigate to the organization Settings page from the left menu.
3. Under URL Settings tab, go to Active Domains

4. Click + Add Domains.

5. In the Add a Custom Domain window, add the following details:

• Enter your domain name. You need to have an already purchased domain name from a domain name registry such as GoDaddy, Hostinger etc.
• Select the environment to apply the domain name. In this case let’s select the Production environment.
• Select the type as Web App, since we will be adding this custom domain to a web application.

6. Create a CNAME record pointing to the target value.

• Take a look at the generated CNAME target value displayed. Create a DNS record associating the domain name to the CNAME target value with your DNS provider.

7. Click on Verify. If the CNAME mapping is correct, you should see a snackbar indicating that the domain name is valid.

8. Click Next.

9. Select your preferred TLS certificate provider.

You can either import the TLS certificates you created for the custom domain or click Let’s Encrypt to allow Choreo to generate and manage the certificates for you. Click Let’s Encrypt and proceed.

10. To save the custom domain, click Add.

You have now successfully added the custom domain to your organization. The custom domain we just configured will be available for the specified entity type in the specific environment. In this case, the custom domain will be available for webapp type components in the production environment.

Next, let’s see how to associate this custom domain to our web application.

Configure a custom URL for a component

1. From the Choreo Console header, navigate to the component you want to customize the URL.
2. If you proceed from the settings page in the previous section, you should land on the component settings page. Else click Settings from the left navigation, to open the component level settings.
3. Navigate to the URL Settings tab.

• If an active domain is available for a given environment, the edit button should be enabled. In the previous step we configured the custom domain with the production environment, let’s associate the domain with our webapp in the production environment.

4. Click on the Edit button.

• The URL Settings window will be displayed. Select the previously configured custom domain from the Domain dropdown.

6. Click Configure.

• The custom URL request will be in the Pending status until an organization administrator approves the request.

Approve a custom URL request

If you are an administrator, you can do the below steps yourself, or else request your organization administrator to follow the below steps and approve the request.

1. In the Choreo Console header, click the Organization list.
2. Navigate to the organization Settings page from the left menu.
3. Under URL Settings tab, go to Pending URL Requests

4. Go to the custom URL you want to approve and click the corresponding Approve URL Mapping icon under the Action column.

5. Review the details and click Approve.

Once approved, the invoke URL of the component gets replaced with the configured custom URL.

Voila! You have successfully configured a custom domain for your web application.

Conclusion

By following the steps outlined in this blog, you can leverage Choreo to seamlessly integrate a custom domain and unlock the full potential of your web application. Remember, a professional-looking address goes a long way in today’s digital landscape. Sign up for free and try out Choreo to experience everything you need to create awesome digital experiences.