[{"data":1,"prerenderedAt":68},["ShallowReactive",2],{"/2026/07/04-updating-config-per-environment-on-react-in-s3":3},{"id":4,"title":5,"body":6,"date":59,"description":56,"extension":60,"meta":61,"navigation":62,"path":63,"robots":64,"seo":65,"stem":66,"__hash__":67},"posts/2026/07/04 updating-config-per-environment-on-React-in-S3.md","04 Updating Config Per Environment On React In S3",{"type":7,"value":8,"toc":55},"minimark",[9,18,21,25,27,30,32,35,37,40,42,45,47,50,52],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"updating-config-per-environment-on-react-in-s3","Updating Config per Environment on React in S3",[19,20],"br",{},[22,23,24],"p",{},"I have been reading Continuous Delivery book by Jez Humble and David Farley. I really like the idea that to deploy an application, I just need to select a version and environment and hit Deploy button.",[19,26],{},[22,28,29],{},"So, I tried to update my current pipeline to be able to do that. It's not without challenge, especially for SPA hosted in S3.",[19,31],{},[22,33,34],{},"First of all, there's no concept of Environment Variables in S3. Alternatively, I can use .env, but it has to be done during build time which counter to the idea of adjusting the configuration per environment because my artifact will then tied whatever configuration I use on build time. And to deploy to different environment will then requires a different build which counter to keeping the artifact the same between environment.",[19,36],{},[22,38,39],{},"As I was checking online for solutions, one suggestion is to move to compute running Node.js which will then update the config before serving it to the user. But S3 is nice and cheap, so would like to stick with it.",[19,41],{},[22,43,44],{},"With the help of Claude, another suggestion is to create a config file static file. The application will then retrieve it, extract the content before running the application itself.",[19,46],{},[22,48,49],{},"This is not bad, but a bit strange. I'm also a bit worried on config file injection which when I think later, CORS will help mitigate that issue. Besides, being SPA to pull index.html, theoretically it can be hijacked too. And it is a solution indeed.",[19,51],{},[22,53,54],{},"This way, on my pipeline, I can update the value of the config file before deploying the application to any environment after the build stage.",{"title":56,"searchDepth":57,"depth":57,"links":58},"",2,[],"2026-07-04T00:00:00.000Z","md",{},true,"/2026/07/04-updating-config-per-environment-on-react-in-s3",null,{"title":5,"description":56},"2026/07/04 updating-config-per-environment-on-React-in-S3","QPhH1uKuf1juCyBiG5_MSFH-Jtco8aYDPeY2eaQKzAM",1785167451284]