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

Sateesh Kumar Sharma 21 Reputation points
2024-02-02T13:48:54.31+00:00

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: |                 abc@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: |                 abc@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

Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
698 questions
{count} votes