Static-web-apps: Support passing environment variables to Azure DevOps task

[anthonychu]

https://stackoverflow.com/questions/67307614/azure-static-web-app-nodejs-env-variables

[Perry-Qian]

The problem is below:

I'm using Azure Static Web App service and Azure DevOps pipeline to deploy a NodeJS app. The pipeline and the build are going well. Now i have to define a URL for the backend using env variables, but without success.

trigger:
- develop

jobs:
  - job: JobTest
    pool:
      vmImage: ubuntu-latest

    variables:
    - name: BACKEND_URL
      value: https://<some_url>
    - name: System.Debug
      value: true
    steps:
    - task: AzureStaticWebApp@0
      inputs:
        app_location: "/" 
        api_location: ""
        output_location: "dist"

      env:
        BACKEND_URL: $(BACKEND_URL)
        azure_static_web_apps_api_token: $(deployment_token)
    - bash: echo $(BACKEND_URL)
    - bash: echo $PWD

and from the NodeJS code, in the "/app/src/models/config.ts" file i have the this:

export const BACKEND_URL = process.env.BACKEND_URL

If i change process.env.BACKEND_URL with the actual URL it will work.

Also, from the Azure Pipeline this task is using the https://github.com/microsoft/Oryx build system.

The question is how can i use env from the pipeline in the code?

[bagavan44]

This was working with GitHub actions but not with the Azure DevOps pipeline

[bhagavan44]

Got a workaround for this issue https://gist.github.com/bhagavan44/ed11fb5199667fd0d4aeddf346a3a870

[dan-eversen]

Confirmed that the workaround works, thanks bhagavan44. Pretty ridiculous that this is broken, if you ask me. Does anyone know why you have to split this into two stages as Bhagavan did in order to get the env variable to be seen by the build process?

[anthonychu]

The Static Web Apps task runs in a container. Variables are not passed into it by default. We’ll work on a fix.

[dan-eversen]

The Static Web Apps task runs in a container. Variables are not passed into it by default. We’ll work on a fix.

Right, I looked at the source code on Oryx and saw that, which led to me considering making a pull request. Oryx simply needs to run a command like ( set -o posix ; set ) | grep '^REACT_APP' > .env and then load it in. This is basically already happening on line 185 of NodePreRunCommandOrScriptTest.cs which has

            var buildScript = new ShellScriptBuilder()
                .AddCommand($"oryx build {appDir} -i /tmp/int -o {appOutputDir} " +
                $"--platform nodejs --platform-version {nodeVersion}")
                // Create a 'build.env' file
                .AddCommand(
                $"echo '{FilePaths.PreRunCommandEnvVarName}=\"echo > {expectedFileInOutputDir}\"' > " +
                $"{appOutputDir}/{BuildScriptGeneratorCli.Constants.BuildEnvironmentFileName}")
               .ToString();

where BuildScriptGeneratorCli.Constants.BuildEnvironmentFileName is the .env file. When I have some free time I'm going to get Oryx running locally and I'll try cat'ing the react app env vars. So (without testing, this might be wrong), the fix would look something like

            var buildScript = new ShellScriptBuilder()
                .AddCommand($"oryx build {appDir} -i /tmp/int -o {appOutputDir} " +
                $"--platform nodejs --platform-version {nodeVersion}")
                // Create a 'build.env' file
                .AddCommand(
                $"echo '{FilePaths.PreRunCommandEnvVarName}=\"echo > {expectedFileInOutputDir}\"' > " +
                $"{appOutputDir}/{BuildScriptGeneratorCli.Constants.BuildEnvironmentFileName}")
                .AddCommand(
                $"echo ( set -o posix ; set ) | grep '^REACT_APP' > " +
                $"{appOutputDir}/{BuildScriptGeneratorCli.Constants.BuildEnvironmentFileName}")
               .ToString();

[anthonychu]

@dan-eversen Thanks for offering to help with this. The issue is actually in the Azure Pipelines task. It could be fixed by updating this script to pass all variables that exist in the runner to docker. It should use a deny list to block certain variables like PATH. If you are interested in making a PR, please coordinate with @miwebst on details. @smurawski might be able to assist here too.