Custom Domains in serverless APIs

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

In your infra/api.ts add this above the transform: { line.

domain: $app.stage === "production" ? "<api.yourdomainhere.com>" : undefined,

This tells SST that we want to use a custom domain if we are deploying to the production 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.

The $app is a global variable that’s available in our config. You can learn more about it here.

Deploy the App

Let’s deploy these changes to 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
   ...

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.