Custom Domains for React Apps on AWS

Link to chapter — https://serverless-stack.com/chapters/custom-domains-for-react-apps-on-aws.html

Everything has worked PERFECTLY to this point, but now I am getting an error when I try to deploy the React app to prod using my custom domain. I have started over again from scratch, from the previous step (where I successfully deployed the API to prod using my custom domain). But every time I get the same error here:

Stack prod-notes-api
** Status: failed**
** Error: Export prod-notes-api:ExportsOutputFnGetAttApiCD79AAA0ApiEndpoint389C4905 cannot be deleted as it is in use by prod-notes-frontend**

Stack prod-notes-auth
** Status: not deployed**
Cannot convert undefined or null to object

It looks like it might be an issue with the exports being removed. Can you share the changes you made for the custom domain?

Thanks for your response. Here is my latest code GitHub - jeff-talley/demo-notes-app

I began doing this guide when you guys said to name the folder for stacks “lib” instead of “stacks”. Apparently you changed the guide in this way recently? Anyway, I left my folder named “lib” and just continued on my merry way (it was not simple to change for some reason).

Could this be the reason I am getting this error? In other words, if my “lib” folder was named “stacks”, would it work?

I am only asking because I have been very careful so far and everything has worked beautifully until now. I doubt that I am missing an export statement, but I could be wrong.

Yeah we had rolled out a change to rename that dir. But I don’t think this is related to that. It seems like the exports might’ve been renamed. You might want to hop over on our Slack and post on there.

Kudos on an excellent tutorial, managed to get through all the way to rolling out custom domains successfully with no major hiccups, so great job!

I have a couple of questions about the custom domain handling, specifically around front end apps. Excuse the -dot- notation in domain names, it wouldn’t let me post with more than two domains referenced :slight_smile:

The custom name for the api appears to have been handled pretty much as expected, with an A record being created in the root zone file e.g. api.somedomain.com is created as an A record in the root zone for somedomain.com and points (Alias) to the native API Gateway endpoint.

#1) With the frontend, I wanted the domain to be “notes.somedomain.com” however it appears that the only (default / included) configuration option is for the frontend to be associated with a base domain name i.e. if you pass it “notes.somedomain.com” the deployment fails because the “zone does not exist”. Passing it “somedomain.com” works, and the app becomes available at “https://somedomain.com”. I was able to work around this by creating a sub-domain host file for notes.somedomain.com and delegating authority to it from somedomain.com, but I’m curious as why it doesn’t use the same, simpler, A record approach as the API.

#2) Aliases - for frontend aliases, sst is creating a separate S3 bucket for the alias/redirection, configuring the bucket to redirect to the base address, then creating a Cloudfront distribution (and another SSL cert) to put https in front of the alias/redirect bucket, then creating the A record to point to the Cloudfront distribution. I’m curious to understand what the A record isn’t simply pointed to the base Cloudfront distribution, which can be configured with multiple alternate domain names (which would also be included in the associated certificate)

Cheers!

Shaun

@shaunhurley following

Amazing guide but when I try to do my prod deploy for the frontend I get A & AAAA name record errors. Any idea on what I am doing wrong. I haven’t customized anything in the guide.

✖  Errors
   FrontendStack UPDATE_ROLLBACK_COMPLETE
   ReactSite/AliasRecordAAAA: [Tried to create resource record set [name='mynameforapp.com.', type='AAAA'] but it already exists]
   ReactSite/AliasRecord: [Tried to create resource record set [name='mynameforapp.com.', type='A'] but it already exists]