Passing variables to static files in different stages?

[chusc123]

What's the best way to change api key or api domain uri based on a different stage in a single page application?

If this were a lambda, I would use environment variables in the serverless yml file, but since these are static files I'm not sure the best way to do this.

[eahefnawy]

Not sure of your framework, but you could still use environment variables with React for example:
https://serverless-stack.com/chapters/environments-in-create-react-app.html

Unless I misunderstood your issue? 🤔

[darbio]

I think the question is:

When I have multiple stages (dev, prod) how do I define different values to my environment variables (e.g. REACT_APP_API_URL) for each stage, using the same serverless.yml.

The current answer is to use .env files, as per #44 .

[dhesson]

@eahefnawy Is there no way to set env vars in the serverless.yml and point them to a param from the cloud app settings? I've done this in other apps and it would be disappointing if this isn't possible:

inputs:
  env:
    AUTH_CLIENT_ID: ${param:AUTH_CLIENT_ID}
    AUTH_DOMAIN: ${param:AUTH_DOMAIN}
    AUTH_REDIRECT_URL: ${param:AUTH_REDIRECT_URL}
  src:
    src: ./src
    hook: npm run build
    dist: ./dist

My use case is the redirect URIs are different from prod and dev and this needs injected into the code at build time depending on the stage. None of these are sensitive values so it's fine that they are on the client.

If this is possible, maybe I'm trying to reference them incorrectly. Right now, I just get empty strings or undefined in the React render template.