Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
851 questions
Multiple environment variable configuration of React APP deploying as Azure Static Web APP
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(137.6, 51%, 23%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESK%3C/text%3E%3C/svg%3E)
Sateesh Kumar Sharma
21
Reputation points
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
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(153.6, 92%, 24%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EA%3C/text%3E%3C/svg%3E)
ajkuma 24,971 Reputation points Microsoft Employee2024-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 24,971 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 24,971 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).
Sign in to comment