Single build for multiple environment

Summary

Hello. For our gatsby project, we’d like to build it once and use it for multiple environments( say testing and staging). Only the environment variables are different for each environment.

Say our .env file looks like this,

SITE_URL=https://testorstage.willbedifferentforeach.env
SOME_API_KEY=abc1212xyz
MY_API_ENDPOINT=https://api.mysite.com
SOME_OTHER_KEY=qwertyabcd

Possible approaches

1. Loading the env vars from a static/env.js script:
   • We create a static/env.js and declare the env vars in it( which will load them in globalThis of the browser).
   • Then we use the wrapRootElement of browser api to wrap the app in React.Context and load the script from there.
   • Works well for env vars that are required in the react components.
   • Does not work for SITE_URL var which is used by robot-txt plugin.
2. Re-running webpack on the public folder:
   • We replace the environment variables by some unique placeholders, like,

     SITE_URL=https://some.placeholder.url
     SOME_API_KEY=SOME_API_KEY_PLACEHOLDER
     

   • Re-running webpack with DefinePlungin and some HTML/ text replacement plugin, replacing the placeholder string with the real keys(or text).
   • I have not tried this, as I am not sure how the wepack config would look like.
   • webpack-stats.json does look like an interesting file to get the webpack entry. Any help on this front would be appreciated.
3. Running CLI tools on the public folder:
   • Similar to the above approach.
   • We replace the environment variables by some unique placeholders, like,

     SITE_URL=https://some.placeholder.url
     SOME_API_KEY=SOME_API_KEY_PLACEHOLDER
     

   • Using some cli tools( say sed & grep or others), replace placeholder strings with actual env vars.
   • Currently testing, if this works.

Questions

1. Is there a better way to do this?
2. Will replacing strings in generated js/ html files cause any issue?

[Miyou]

Can we please reopen this and get some response from the Gatsby team? I’m having the same issue and I feel like someone in the Gatsby team must have encountered this and have a good solution for it.

[MattFanto]

I’m facing this problem as well and as Miyou I think it should be reopened. This is, of course, a common challenge of any web application, but some framework provides a solution out of the box (e.g. https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration).

It would definitely be helpful if an official solution is provided instead of relying on some custom solution