Multiple environment variable configuration of React APP deploying as Azure Static Web APP

Question

Multiple environment variable configuration of React APP deploying as Azure Static Web APP

Sateesh Kumar Sharma 21

Hello, I have written Azure pipeline script to deploy my react application as three different Azure SWA on different environment with different subscription(Test and Pre Prod on Same subscription and Production SWA on different subscription) It is deployed successfully , I have managed different deployment token for each environment. Script:

trigger:   - main variables:   buildConfiguration: Release stages:   - stage: Build     displayName: Build and Package     jobs:       - job: Build         displayName: Build         pool:           vmImage: ubuntu-latest         steps:           - script: |               npm install               npm run build             displayName: Build the React App           - task: PublishBuildArtifacts@1             displayName: 'Publish Artifact: build'             inputs:               PathtoPublish: build               ArtifactName: build   - stage: DeployTest     displayName: Deploy to Test     dependsOn: Build     condition: succeeded()     jobs:       - job: Deploy         displayName: Deploy to Test         pool:           vmImage: ubuntu-latest         steps:           - download: current             artifact: build             displayName: Download Build Artifact           - task: AzureStaticWebApp@0             inputs:               app_location: /               api_location: api_location               output_location: build               azure_static_web_apps_api_token: $(deployment_token)               deployment_environment: test       - job: WaitForValidation         displayName: Wait for external validation         pool: server         timeoutInMinutes: 4320         steps:           - task: ManualValidation@0             timeoutInMinutes: 1440             inputs:               notifyUsers: |                 ******@gmail.com               instructions: Please validate the build configuration and resume               onTimeout: reject   - stage: DeployPP     displayName: Deploy to Pre Prod     dependsOn: DeployTest     condition: succeeded()     jobs:       - job: Deploy         displayName: Deploy to Pre Prod         pool:           vmImage: ubuntu-latest         steps:           - download: current             artifact: build             displayName: Download Build Artifact           - task: AzureStaticWebApp@0             inputs:               app_location: /               api_location: api_location               output_location: build               azure_static_web_apps_api_token: $(deployment_token_pp)               deployment_environment: preproduction       - job: WaitForProdValidation         displayName: Wait for external prod validation         pool: server         timeoutInMinutes: 4320         steps:           - task: ManualValidation@0             timeoutInMinutes: 1440             inputs:               notifyUsers: |                 ******@gmail.com               instructions: Please validate the build configuration and resume               onTimeout: reject   - stage: DeployProduction     displayName: Deploy to Production     dependsOn: DeployPP     condition: succeeded()     jobs:       - job: Deploy         displayName: Deploy to Production         pool:           vmImage: ubuntu-latest         steps:           - download: current             artifact: build             displayName: Download Build Artifact           - task: AzureStaticWebApp@0             inputs:               app_location: /               api_location: api_location               output_location: build               azure_static_web_apps_api_token: $(deployment_token_prod)

Here the Problem I am facing to handle REACT_APP_API_URL. We have deployed our backend API on 3 different env as well and have three different API URL. While trying to configure it at Azure pipeline , For test environment It is working fine but for next (Pre Prod) environment , getting undefined value for REACT_APP_API_URL variable. I tried creating multiple .env files as well in react root directory and mentioned all the details there but it is not picking for other two environment. Can you please guide me how I should configure multiple env API endpoints which work for single build and multiple stages of deployment . Your help would be really appreciated and thank you in advance :) Regards, Sateesh Sharma

ajkuma 27,946 Reputation points Microsoft Employee

2024-02-05T07:40:57.7133333+00:00

Apologies for the delayed response from over the weekend. While I'm checking on this, could you please share your more details about your requirement and if you are referring to any specific Azure doc for the steps?
Sateesh Kumar Sharma 21 Reputation points

2024-02-05T12:46:31.3766667+00:00

Thank you for looking into it !! Requirement : I have a React Application , deploying on Cloud As Azure Static Web APP. there are 3 environment there are 3 Azure Static Web APPs there are 2 Subscription (Test and Prod subscription) Two Azure Static Web APP on Test subscription and one is on Prod subscription. As I have given the Azure script Pipelines above ,I am able to deploy React Application on respective Azure SWA and managed the token and configure it as variables. Now the Problem with Backend API URL configuration . I have 3 backend running behind the Gateway and each environment have separate API URL . e.g. Test - https://abc.test/v1.0.0/ Pre Prod - https://abc.preprod/v1.0.0/ Production - https://abc.prod/v1.0.0/ I am building the React Application once as you can see the Azure pipeline and then deploying the same build package to all the environment ,Test ->Preprod->Prod React Framework provides the mechanism to handle environment variables through .env file , but for this we need to create build every time for specific environment handling through package.json file and mention the env file before each deployment. I am looking for the solution to handle environment variables from Azure pipelines script and build once and deploy to all environment with respective API URL . I have not followed any specific docs as such for the steps but all the details I got from Microsoft Azure Docs itself to write the Azure script and managed the token for multi env deployment . Please look into it and and suggest something to handle multiple API URL ...
ajkuma 27,946 Reputation points Microsoft Employee

2024-02-06T10:16:00.7066667+00:00

Thanks for sharing the additional info, I'll get back on this shortly.
ajkuma 27,946 Reputation points Microsoft Employee

2024-02-14T08:09:11.4566667+00:00

Following-up on this,

We have been unable to repro this behavior, this third-party blog post which discusses how it selects an environment file. (It's a third-party URL, I'm providing this info as a reference, for your convenience, the site is not maintained by Microsoft).

I understand you have tried multiple things, to isolate the issue further, kindly reverify that the package.json is referencing the correct env file for the respective environment that you are trying to use. Also, doublecheck to verify that the files are present with the correct configurations in the repository (to verify that we have the latest expected files).

Also, to isolate, test it locally with the same environment that is failing to build in Azure - if you are able to establish that the local build succeeds when selecting the given environment but fails during SWA build despite using the same files -for this we would need more details about your resource for a deeper investigation (I'll connect privately).

Your answer

ajkuma 27,946 Reputation points Microsoft Employee

2024-02-05T07:40:57.7133333+00:00

Apologies for the delayed response from over the weekend. While I'm checking on this, could you please share your more details about your requirement and if you are referring to any specific Azure doc for the steps?
Sateesh Kumar Sharma 21 Reputation points

2024-02-05T12:46:31.3766667+00:00

Thank you for looking into it !! Requirement : I have a React Application , deploying on Cloud As Azure Static Web APP. there are 3 environment there are 3 Azure Static Web APPs there are 2 Subscription (Test and Prod subscription) Two Azure Static Web APP on Test subscription and one is on Prod subscription. As I have given the Azure script Pipelines above ,I am able to deploy React Application on respective Azure SWA and managed the token and configure it as variables. Now the Problem with Backend API URL configuration . I have 3 backend running behind the Gateway and each environment have separate API URL . e.g. Test - https://abc.test/v1.0.0/ Pre Prod - https://abc.preprod/v1.0.0/ Production - https://abc.prod/v1.0.0/ I am building the React Application once as you can see the Azure pipeline and then deploying the same build package to all the environment ,Test ->Preprod->Prod React Framework provides the mechanism to handle environment variables through .env file , but for this we need to create build every time for specific environment handling through package.json file and mention the env file before each deployment. I am looking for the solution to handle environment variables from Azure pipelines script and build once and deploy to all environment with respective API URL . I have not followed any specific docs as such for the steps but all the details I got from Microsoft Azure Docs itself to write the Azure script and managed the token for multi env deployment . Please look into it and and suggest something to handle multiple API URL ...
ajkuma 27,946 Reputation points Microsoft Employee

2024-02-06T10:16:00.7066667+00:00

Thanks for sharing the additional info, I'll get back on this shortly.
ajkuma 27,946 Reputation points Microsoft Employee

2024-02-14T08:09:11.4566667+00:00

Following-up on this,

We have been unable to repro this behavior, this third-party blog post which discusses how it selects an environment file. (It's a third-party URL, I'm providing this info as a reference, for your convenience, the site is not maintained by Microsoft).

I understand you have tried multiple things, to isolate the issue further, kindly reverify that the package.json is referencing the correct env file for the respective environment that you are trying to use. Also, doublecheck to verify that the files are present with the correct configurations in the repository (to verify that we have the latest expected files).

Also, to isolate, test it locally with the same environment that is failing to build in Azure - if you are able to establish that the local build succeeds when selecting the given environment but fails during SWA build despite using the same files -for this we would need more details about your resource for a deeper investigation (I'll connect privately).

Share via

Multiple environment variable configuration of React APP deploying as Azure Static Web APP

Your answer