Webiny Docs home page
Warning
You're browsing the documentation for an old version of Webiny. Consider upgrading your project to Webiny 5.35.x.
What you’ll learn
  • how to connect custom domain to your project application

Introduction
anchor

By default, both Admin Area (apps/admin) and Website (apps/website) React applications are accessible via a CloudFront URL. This is fine for development purposes, however, for the production environment, you will most likely need a custom domain for those applications. This is because custom domains are human-readable, easy to remember, and good for branding.

In this guide, we show how to connect a custom domain to the Website (apps/website) React application, however, the same steps can be used for connecting it to the Admin Area (apps/admin) React application, and also the GraphQL API (apps/api) application.

Before We Begin
anchor

Before starting with this guide, make sure to do the following:

  • Register the domain name with the domain provider of your choice.
  • Create a certificate using AWS Certificate Manager (ACM) external link that covers the domain name you plan to use with the distribution to validate that you are authorized to use the domain. You can also import an existing certificate into ACM from an authorized certificate authority (CA).

Learn more about requesting a public certificate using AWS Certificate Manager (ACM) in the official AWS documentation article external link.

Read more about requirements for using alternate domain names in the official AWS documentation article external link.

Configure the Custom Domain in the Website App
anchor

apps/website/webiny.application.ts
import { createWebsiteApp } from "@webiny/serverless-cms-aws";

export default createWebsiteApp({
  domains() {
    return {
      domains: ["my.domain.com"],
      sslSupportMethod: "sni-only",
      acmCertificateArn:
        "arn:aws:acm:us-east-1:111111111111:certificate/5931d8b4-a39b-4a3a-a4e7-f5bbdd78d599"
    };
  }
});

With the above changes in place, deploy the Website project application, so that the new configuration is properly applied.

yarn webiny deploy apps/website --env=dev

The instructions shown above also apply to the API and the Admin Area apps. Use the same configuration steps in their respective webiny.application.ts files.

It’s time to move on to the last step, which is pointing our custom domain to the CloudFront Distribution.

Point Domain to CloudFront Distribution
anchor

Now that we have connected our custom domain as the alternative domain for the CloudFront URL, we also must configure the DNS service for the domain to route traffic for the domain, such as coolwebsite.com, to the CloudFront domain name for your distribution, such as d111111abcdef8.cloudfront.net.

Use the method provided by your DNS service provider to add a CNAME record for your domain. This new CNAME record will redirect DNS queries from your domain (for example, coolwebsite.com) to the CloudFront domain name for your distribution (for example, d111111abcdef8.cloudfront.net). For more information, see the documentation provided by your DNS service provider.

The changes made to the DNS service might take few minutes to propagate. You can use a service like DNS Checker external link to check the status of newly added CNAME record.

Finally, test the alternate domain name by visiting URLs with your domain name instead of the CloudFront domain name of your distribution:

Website with custom domainWebsite with custom domain
(click to enlarge)

FAQ
anchor

Do we need to apply the domain changes to multiple applications or just the Admin app?

On order to have all three applications, API (apps/api), Admin (apps/admin), and Website (apps/website), publicly accessible over a custom domain, domain changes need to be applied for all three applications. This is done via their respective webiny.application.ts configuration files.