Right now the way we manage environment on the frontend (a gatsby site) is very error prone.
Its a simple file that need to be manually edited depending on the target we are deploying to.
So its very possible to not have the right value for api_endpoint. One could set the value to point to the staging server and push to production.
The other limitation is that right now only one variable is environment specific (api_endpoint), but if more such variables were to be added, this would be very hard to get correct everytime.
What is the right way to do dynamic environment management in Gatsby?
I can think of a few theoretical solution.
We could set an environment variable in the CD pipeline before we run the gatsby build command. so that ways the build function can then set the appropriate values in the config.js file depending on the environment variable.
The other slightly strange solution I can think of is to have all possible config variables in a file and then choose the right ones based on the location.href value. This is not preferable because ideally i'd not like to expose data that is not supposed to be there in an environment in the website bundle.
Right now the way we manage environment on the frontend (a gatsby site) is very error prone. Its a simple file that need to be manually edited depending on the target we are deploying to.
https://github.com/tattle-made/OGBV/blob/6549d4fb2893b2457a01b2450115f7abd1bd823b/annotators/annotation-ui/src/components/config.js#L1-L4
So its very possible to not have the right value for api_endpoint. One could set the value to point to the staging server and push to production. The other limitation is that right now only one variable is environment specific (api_endpoint), but if more such variables were to be added, this would be very hard to get correct everytime.
What is the right way to do dynamic environment management in Gatsby? I can think of a few theoretical solution.
gatsby build
command. so that ways the build function can then set the appropriate values in the config.js file depending on the environment variable.Any suggestions or stab at solutions is welcome.