How to use environment variables in React app hosted in Azure

Question

I'm pretty new to React, and exploring Azure in general as well. I've gotten an ERP background, but that background did include using tools like VSTS and CI/CD. I've heavily relied upon using the 'libraries' in VSTS to specify variables per environment, and then specifying these upon deployment.

But! I've been reading around on the internet, and playing with settings, but to my understanding, I can only 'embed' parameters in the actual code that is generated by NPM. This would basically mean that I'd need to create a seperate build per environment, which I'm not used to. I've always been tought (and tell others) that what you ship to production, should be exactly the same as what has been on pre-prod, or staging, or ... . Is there really no other way to use environment variables? I was thinking of using the Application Settings in Azure App Service, but I can't get them to even pop up in the console. The libraries in VSTS, haven't found how to use these in my deployment either, as there's just one step.

And reading the docs at https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables doesn't make me feel comfortable putting .env files in source control either. I even tried the approach of putting {process.env.NODE_ENV} in my code, but in Azure it just shows up as 'Development', while I even do npm run build (which should be production)...

So, I'm a bit lost here! How can I use environment variables specified in Azure App Service, in my React app?

Thanks!

Answer 1

The Good Options

I had this problem as well you can customize which env variables are used by using different build scripts for your envs. Found this CRA documentation https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments

You can also set your variables in your YAML. https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline

But what if I need a single build?

I haven't solved this yet if you are using a single build and release stages for different envs (dev, staging, prod). Since everything is built React has whatever env variables you provided at build time. Alternatives I've considered:

1. Separating react build from .NET build, so that you could do this as for each deploy
2. Define all env variables and append eg REACT_APP_SOME_KEY_ then based on subdomain pick specific env eg https://dev.yoursite.com https://yoursite.com , but this option seems non-canonical.
3. Might be a limitation of React needing to build for every environment. Accept that you need separate builds.

Answer 2

Add the venerable directly to build pipeline Variables. This will add to the Azure environment variable and the app can use it