In the previous chapter we purchased a new domain on Route 53. Now let’s use it for our serverless API.

In your stacks/ApiStack.js add the following above the defaults: { line.

customDomain:
  app.stage === "prod" ? "api.my-serverless-app.com" : undefined,

This tells SST that we want to use the custom domain api.my-serverless-app.com if we are deploying to the prod stage. We are not setting one for our dev stage, or any other stage.

We could for example, base it on the stage name, api-${app.stage}.my-serverless-app.com. So for dev it might be api-dev.my-serverless-app.com. But we’ll leave that as an exercise for you.

We also need to update the outputs of our API stack.

Replace the stack.addOutputs call at the bottom of stacks/ApiStack.js.

stack.addOutputs({
  ApiEndpoint: api.customDomainUrl || api.url,
});

Here we are returning the custom domain URL, if we have one. If not, then we return the auto-generated URL.

Deploy the App

We are now going to deploy our app to prod. You can go ahead and stop the local development environments for SST and React.

Run the following from your project root.

$ npx sst deploy --stage prod

This command will take a few minutes as it’ll deploy your app to a completely new environment. Recall that we are deploying to a separate prod environment because we don’t want to affect our users while we are actively developing our app. This ensures that we have a separate local dev environment and a separate prod environment.

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

✓  Deployed:
   StorageStack
   ApiStack
   ApiEndpoint: https://api.my-serverless-app.com
   ...

This is great! We now have our app deployed to prod and our API has a custom domain.

Next, let’s use our custom domain for our React app as well.