https://serverless-stack.com/ logo
#help
Title
# help
g

Greg Martin

01/06/2022, 8:17 PM
On this page...
Copy code
<https://serverless-stack.com/chapters/custom-domains-in-serverless-apis.html>
I am having trouble doing...
Copy code
api-${scope.stage}.<http://my-serverless-app.com|my-serverless-app.com>
instead of doing this...
Copy code
customDomain:
  scope.stage === "prod" ? "<http://api.my-serverless-app.com|api.my-serverless-app.com>" : undefined,
Just not sure of the syntax, but I do like the idea of basing it on the stage name.
d

Dan Van Brunt

01/06/2022, 8:27 PM
Are you just having an issue with template strings?
Copy code
customDomain: `api-${scope.stage}.<http://my-serverless-app.com|my-serverless-app.com>`
need to add the backticks
g

Greg Martin

01/06/2022, 8:28 PM
Copy code
[Error at /dev-rodeo-sst-api/Api] Found zones: [] for dns:<http://my-serverless-app.com|my-serverless-app.com>, privateZone:undefined, vpcId:undefined, but wanted exactly 1 zone
wait, I see
d

Dan Van Brunt

01/06/2022, 8:29 PM
looks like its resolving to
<http://my-serverless-app.com|my-serverless-app.com>
and missing the whole first bit.
g

Greg Martin

01/06/2022, 8:29 PM
it checks first to see if this is possible. When I change my-serverless-app.com to the correct domain, it works.
Once I have done
Copy code
npx sst deploy --stage dev
Does that mean I can no longer do
Copy code
npx start
locally
?
d

Daniel Gato

01/07/2022, 6:06 AM
I encounter problems on this step too, I did this: api stack
Copy code
this.api = new sst.Api(this, 'Api', {
      customDomain: {
        hostedZone: '<http://mydomainname.io|mydomainname.io>',
        domainName:
          scope.stage === 'prod'
            ? '<http://api.mydomainname.io|api.mydomainname.io>'
            : `${scope.stage}.<http://api.mydomainname.io|api.mydomainname.io>`,
      },
...
frontend stack
Copy code
const site = new sst.ReactStaticSite(this, 'ReactSite', {
      customDomain: {
        hostedZone: '<http://mydomainname.io|mydomainname.io>',
        domainName:
          scope.stage === 'prod'
            ? '<http://app.mydomainname.io|app.mydomainname.io>'
            : `${scope.stage}.<http://app.mydomainname.io|app.mydomainname.io>`,
      },
In our case we have: production: • api.mydomainname.io for the API • app.mydomainname.io for the frontend dev: • dev.api.mydomainname.io for the API • dev.app.mydomainname.io for the frontend other-stage: • other-stage.api.mydomainname.io for the API • other-stage.app.mydomainname.io for the frontend Side note: At first,
npx sst start
would tell us it was not able to deploy because there was precedence in the deleting order, but once we did a
npx sst deploy --stage our-default-local-stage
(where
our-default-local-stage
is the one we use with
npx sst start
) everything worked out.