https://serverless-stack.com/ logo
Join Slack
Powered by
How do I pass env variable to static site that dep...
# help
j
How do I pass env variable to static site that depends on (the same) static site ? 😆 I need to set
Copy code
API_URL: `${staticSite.url}/api`
t
That should work hypothetically
does it not?
j
Well I have to provide these to 
StaticSite
constructor... it's chicken-egg problem...
would either need to define 
environment
and 
replaceValues
as callbacks or have 
staticSite.setEnvironment
and 
staticSite.setReplaceValues
t
Oh I missed the part where you said "the same"
can you not precompute the url? You're relaying on the randomly generated cfn url?
j
Generated for devel, for prod the domain is known. (You did not miss that part, I edited the comment to make it clearer 🙂 )
f
@Jan Plaček can you give this a try?
Copy code
import { Lazy } from "aws-cdk-lib";
import * as sst from "@serverless-stack/resources";

export class MainStack extends sst.Stack {
  constructor(scope: <http://sst.App|sst.App>, id: string) {
    super(scope, id);

    let site;

    // Create StaticSite
    site = new sst.StaticSite(this, "Frontend", {
      path: "src/sites/website",
      environment: {
        API_URL: Lazy.stringValue({
          produce(context) {
            return site.url;
          }
        })
      },
    });
  }
}
j
Ah, interesting, I definitely will, I want to solve it somehow, just not sure when as atm I am burdened by some other issues. Btw one other case I was thinking about was using staticSite.url in API gateway CORS list and api.url in StaticSite ... similar problem with cyclic depedency.
t
btw for this specific situation I usually just pull the url from 
location
in js
j
Unless I am missing something, that wouldn't work on devel, because the site is served from 
localhost
, but API is on 
actualGeneratedStaticSiteDomain/api
Atm if I am on devel (sst start), I set the API_URL to api.url. So the request doesn't go through CF (StaticSite). But it also means if there is an error or some incorrectly configured cache policy or something related to this integration, I won't be able to spot this and debug this on devel. And it was actually quite tricky to get it right.
CF strips all sorts of information from request/response and it could also be configured to modify the request (eg path) - I would have to simulate this somehow on devel or configure gateway differently etc.
f
Oh r u routing the api calls through the CF distribution? Any reason not having the frontend hit the backend url directly?
j
Because the api and site must be on the same domain (on production/deployment)
so I either have to route domian -> CF -> API or domain -> API -> CF (the first is the "correct" approach from what I could find)
f
I see. Is 
<http://domain.com|domain.com>
and 
<http://api.domain.com|api.domain.com>
not an option?
ah i see it’s been asked in the other thread
4 Views
Open in Slack
PreviousNext
Powered by