Custom Domains for React Apps on AWS

In the previous chapter we configured a custom domain for our serverless API. Now let’s do the same for our frontend React app.

In the infra/web.ts add the following above the environment: { line.

domain:
  $app.stage === "production"
    ? {
        name: "<yourdomainhere.com>",
        redirects: ["www.<yourdomainhere.com>"],
      }
    : undefined,

Just like the API case, we want to use our custom domain if we are deploying to the production stage. This means that when we are using our app locally or deploying to any other stage, it won’t be using the custom domain.

Of course, you can change this if you’d like to use a custom domain for the other stages. You can use something like ${app.stage}.my-serverless-app.com. So for dev it’ll be dev.my-serverless-app.com. But we’ll leave this as an exercise for you.

The redirects prop is necessary because we want visitors of www.my-serverless-app.com to be redirected to the URL we want to use. It’s a good idea to support both the www. and root versions of our domain. You can switch these around so that the root domain redirects to the www. version as well.

You won’t need to set the redirects for the non-prod versions because we don’t need www. versions for those.

Deploy the App

Just like the previous chapter, we need to update these changes in prod.

Run the following from your project root.

$ npx sst deploy --stage production

At the end of the deploy process you should see something like this.

+  Complete
   Api: https://api.my-serverless-app.com
   Frontend: https://my-serverless-app.com
   ...

And that’s it! Our React.js app is now deployed to prod under our own domain!

Commit the Changes

Let’s commit our code so far and push it to GitHub.

$ git add .
$ git commit -m "Setting up custom domains"
$ git push

At this stage our full-stack serverless app is pretty much complete. In the next couple of optional sections we are going at how we can automate our deployments. We want to set it up so that when we git push our changes, our app should deploy automatically.