TLDR; Can you use one CI build to generate four different frontends all having different environment variables.

Let me give you some context. I have a web application created with https://github.com/wmonk/create-react-app-typescript/ (now deprecated I know) and dotnet core. The create-react-app-typescript fork is using webpack but I have not ejected it. I dont want to do that either.

I am using a Azure DevOps Pipeline for CI and CD. And it's really here my issue lies. When the build runs it bundles the frontend with some environment variables and then triggers the release pipeline. But I have three environments to deploy to, well four really. Dev, Test, QA, Production.

All uses different environment variables (in this case a key for a 3rd party product). In my case this means I have to have 4 different CI builds for setting all of the different environment variables.

So on to my question: Can I solve this using just one CI build in someway?

If you have an answer please tell me how to accomplish this.