Deploying environment variables for nextJS and nodeJS is not working from ADO Pipeline

Question

Deploying environment variables for nextJS and nodeJS is not working from ADO Pipeline

Shartul Kumar 5

Deploying environment variables for nextJS and nodeJS is not working

Siva Nair 1,475 Reputation points Microsoft External Staff

2025-03-17T18:20:08.74+00:00

Hi Shartul Kumar,

Could you please share the exact error message you are facing while deploying or few more detail regarding the issue, to help you better with solution.
Arko 2,045 Reputation points Microsoft External Staff

2025-03-20T12:45:09.81+00:00

Could you kindly elaborate more on your issue. Provide error logs if any.

Shartul Kumar 5

destination does not start with /, [http://,]() or [https://]() for route {"source":"/grc-mapper","destination":"undefined"}

There is a Azure Web app - Linux based, zip based deployment of next js application

While adding key-value pairs in the ADO as variable group and referring them in following ways

1)

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)
    variables:
       - group: combined-all-ui
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: $(NODE_VERSION)
      displayName: "Install Node.js"
    - script: |
        echo "AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID=$(AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID)" >> .env.production
        echo "AUTH_MICROSOFT_ENTRA_ID_SECRET=$(AUTH_MICROSOFT_ENTRA_ID_SECRET)" >> .env.production
        echo "AUTH_MICROSOFT_ENTRA_ID_TENANT_ID=$(AUTH_MICROSOFT_ENTRA_ID_TENANT_ID)" >> .env.production
        echo "AUTH_SECRET=$(AUTH_SECRET)" >> .env.production
        echo "BASE_URL_TOKEN=$(BASE_URL_TOKEN)" >> .env.production
        echo "DOCUMENT_PROCESSOR_URL=$(DOCUMENT_PROCESSOR_URL)" >> .env.production
        echo "GRANT_TYPE=$(GRANT_TYPE)" >> .env.production
        echo "GRC_ADVISORY_CHATBOT_URL=$(GRC_ADVISORY_CHATBOT_URL)" >> .env.production
        echo "GRC_MAPPER_URL=$(GRC_MAPPER_URL)" >> .env.production
        echo "POLICY_URL=$(POLICY_URL)" >> .env.production
        echo "PREDICT_URL=$(PREDICT_URL)" >> .env.production
        echo "PRIVATE_AI_URL=$(PRIVATE_AI_URL)" >> .env.production
        echo "TRACKING_URL=$(TRACKING_URL)" >> .env.production
        echo "API_KEY=$(API_KEY)" >> .env.production
      displayName: "Set Environment Variables"

Arko 2,045 Reputation points Microsoft External Staff

2025-03-27T14:14:35.0033333+00:00
Next.js uses environment variables at build time for things like routing, rewrites, API endpoints, etc. Merely echoing into .env.production may not be enough unless you explicitly tell Next.js to read that file during build. This is evident from destination: undefined

Could be either $(GRC_MAPPER_URL) is not defined in your ADO Variable Group or it’s not loaded at build time by Next.js. Kindly check your variable group combined-all-ui and confirm that GRC_MAPPER_URL and others are defined and available in the pipeline. Next.js reads .env.production if it's present during build. So make sure you create the .env.production file before next build and ensure that file is in the root directory

Please refer to below updated yaml

- script: | echo "AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID=$(AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID)" >> .env.production echo "GRC_MAPPER_URL=$(GRC_MAPPER_URL)" >> .env.production echo "GRC_MAPPER_URL (debug): $(GRC_MAPPER_URL)" cat .env.production displayName: "Create .env.production file" - script: | npm ci npm run build displayName: "Build Next.js App"

1 answer

Your answer

Siva Nair 1,475 Reputation points Microsoft External Staff

2025-03-17T18:20:08.74+00:00

Hi Shartul Kumar,

Could you please share the exact error message you are facing while deploying or few more detail regarding the issue, to help you better with solution.
Arko 2,045 Reputation points Microsoft External Staff

2025-03-20T12:45:09.81+00:00

Could you kindly elaborate more on your issue. Provide error logs if any.
Shartul Kumar 5 Reputation points

2025-03-27T11:20:07.41+00:00

destination does not start with /, [http://,]() or [https://]() for route {"source":"/grc-mapper","destination":"undefined"}

There is a Azure Web app - Linux based, zip based deployment of next js application

While adding key-value pairs in the ADO as variable group and referring them in following ways

1)

stages: - stage: Build displayName: Build stage jobs: - job: Build displayName: Build pool: vmImage: $(vmImageName) variables: - group: combined-all-ui steps: - task: NodeTool@0 inputs: versionSpec: $(NODE_VERSION) displayName: "Install Node.js" - script: | echo "AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID=$(AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID)" >> .env.production echo "AUTH_MICROSOFT_ENTRA_ID_SECRET=$(AUTH_MICROSOFT_ENTRA_ID_SECRET)" >> .env.production echo "AUTH_MICROSOFT_ENTRA_ID_TENANT_ID=$(AUTH_MICROSOFT_ENTRA_ID_TENANT_ID)" >> .env.production echo "AUTH_SECRET=$(AUTH_SECRET)" >> .env.production echo "BASE_URL_TOKEN=$(BASE_URL_TOKEN)" >> .env.production echo "DOCUMENT_PROCESSOR_URL=$(DOCUMENT_PROCESSOR_URL)" >> .env.production echo "GRANT_TYPE=$(GRANT_TYPE)" >> .env.production echo "GRC_ADVISORY_CHATBOT_URL=$(GRC_ADVISORY_CHATBOT_URL)" >> .env.production echo "GRC_MAPPER_URL=$(GRC_MAPPER_URL)" >> .env.production echo "POLICY_URL=$(POLICY_URL)" >> .env.production echo "PREDICT_URL=$(PREDICT_URL)" >> .env.production echo "PRIVATE_AI_URL=$(PRIVATE_AI_URL)" >> .env.production echo "TRACKING_URL=$(TRACKING_URL)" >> .env.production echo "API_KEY=$(API_KEY)" >> .env.production displayName: "Set Environment Variables"
Arko 2,045 Reputation points Microsoft External Staff

2025-03-27T14:14:35.0033333+00:00

Next.js uses environment variables at build time for things like routing, rewrites, API endpoints, etc. Merely echoing into .env.production may not be enough unless you explicitly tell Next.js to read that file during build. This is evident from destination: undefined

Could be either $(GRC_MAPPER_URL) is not defined in your ADO Variable Group or it’s not loaded at build time by Next.js. Kindly check your variable group combined-all-ui and confirm that GRC_MAPPER_URL and others are defined and available in the pipeline. Next.js reads .env.production if it's present during build. So make sure you create the .env.production file before next build and ensure that file is in the root directory

Please refer to below updated yaml

- script: | echo "AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID=$(AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID)" >> .env.production echo "GRC_MAPPER_URL=$(GRC_MAPPER_URL)" >> .env.production echo "GRC_MAPPER_URL (debug): $(GRC_MAPPER_URL)" cat .env.production displayName: "Create .env.production file" - script: | npm ci npm run build displayName: "Build Next.js App"

Answer 1

Ryan Hill 30,181 Microsoft Employee

Hi @Shartul Kumar

NodeTool@1 isn't used in this manner. It's responsible for finding and pulling a specific version of Node; which is probably why you're getting the error you're getting.

To configure your app setting environment variables from your group, you need to set the appSettings property of the AzureWebApp@1 task.

- task: AzureWebApp@1
  inputs:
    # app settings is a string of -key value
    appSettings: -AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID $(AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID) -GRC_MAPPER_URL $(GRC_MAPPER_URL) -GRANT_TYPE=$(GRANT_TYPE) -BASE_URL_TOKEN $(BASE_URL_TOKEN)

Shartul Kumar 5

The env variables are deployed now to Azure portal with the following

- task: AzureAppServiceSettings@1
            displayName: Azure App Service Settings
            inputs:
              azureSubscription: $(azureSubscription)
              appName: $(webAppName)
              resourceGroupName: $(resouceGroupName)
              appSettings: |
                [
                  {
                    "name": "AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID",
                    "value": "$(AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID)",
                    "slotSetting": false
                  },
                  {
                    "name": "AUTH_MICROSOFT_ENTRA_ID_SECRET",
                    "value": "$(AUTH_MICROSOFT_ENTRA_ID_SECRET)",
                    "slotSetting": false
                  },
                  {
                    "name": "AUTH_MICROSOFT_ENTRA_ID_TENANT_ID",
                    "value": "$(AUTH_MICROSOFT_ENTRA_ID_TENANT_ID)",
                    "slotSetting": false
                  },
                  {
                    "name": "AUTH_SECRET",
                    "value": "$(AUTH_SECRET)",
                    "slotSetting": false
                  },
                  {
                    "name": "BASE_URL_TOKEN",
                    "value": "$(BASE_URL_TOKEN)",
                    "slotSetting": false
                  },
                  {
                    "name": "DOCUMENT_PROCESSOR_URL",
                    "value": "$(DOCUMENT_PROCESSOR_URL)",
                    "slotSetting": false
                  },
                  {
                    "name": "GRANT_TYPE",
                    "value": "$(GRANT_TYPE)",
                    "slotSetting": false
                  },
                  {
                    "name": "GRC_ADVISORY_CHATBOT_URL",
                    "value": "$(GRC_ADVISORY_CHATBOT_URL)",
                    "slotSetting": false
                  },
                  {
                    "name": "GRC_MAPPER_URL",
                    "value": "$(GRC_MAPPER_URL)",
                    "slotSetting": false
                  },
                  {
                    "name": "POLICY_URL",
                    "value": "$(POLICY_URL)",
                    "slotSetting": false
                  },
                  {
                    "name": "PREDICT_URL",
                    "value": "$(PREDICT_URL)",
                    "slotSetting": false
                  },
                  {
                    "name": "PRIVATE_AI_URL",
                    "value": "$(PRIVATE_AI_URL)",
                    "slotSetting": false
                  },
                  {
                    "name": "TRACKING_URL",
                    "value": "$(TRACKING_URL)",
                    "slotSetting": false
                  },
                  {
                    "name": "API_KEY",
                    "value": "$(API_KEY)",
                    "slotSetting": false
                  }
                ]

but web app is giving error

:( Application Error

Log Stream Error:

025-03-28T08:45:04.052568228Z Error: Cannot find module 'styled-jsx/package.json'

2025-03-28T08:45:04.052571564Z Require stack:

2025-03-28T08:45:04.052574535Z - /home/site/wwwroot/node_modules/next/dist/server/require-hook.js

2025-03-28T08:45:04.052577258Z - /home/site/wwwroot/node_modules/next/dist/bin/next

2025-03-28T08:45:04.052579537Z at Function._resolveFilename (node:internal/modules/cjs/loader:1225:15)

2025-03-28T08:45:04.052582306Z at resolve (node:internal/modules/helpers:146:19)

2025-03-28T08:45:04.052584474Z at Object.<anonymous> (/home/site/wwwroot/node_modules/next/dist/server/require-hook.js:38:32)

2025-03-28T08:45:04.052587297Z at Module._compile (node:internal/modules/cjs/loader:1554:14)

2025-03-28T08:45:04.052589514Z at Object..js (node:internal/modules/cjs/loader:1706:10)

2025-03-28T08:45:04.052591637Z at Module.load (node:internal/modules/cjs/loader:1289:32)

2025-03-28T08:45:04.052593784Z at Function._load (node:internal/modules/cjs/loader:1108:12)

2025-03-28T08:45:04.052595968Z at TracingChannel.traceSync (node:diagnostics_channel:322:14)

2025-03-28T08:45:04.052598091Z at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)

2025-03-28T08:45:04.052600167Z at Module.require (node:internal/modules/cjs/loader:1311:12) {

2025-03-28T08:45:04.052602320Z code: 'MODULE_NOT_FOUND',

2025-03-28T08:45:04.052604453Z requireStack: [

2025-03-28T08:45:04.052606558Z '/home/site/wwwroot/node_modules/next/dist/server/require-hook.js',

2025-03-28T08:45:04.052608749Z '/home/site/wwwroot/node_modules/next/dist/bin/next'

2025-03-28T08:45:04.052610816Z ]

2025-03-28T08:45:04.052612863Z }

Ryan Hill 30,181 Reputation points Microsoft Employee

2025-04-29T23:04:01.9766667+00:00

Hi @Shartul Kumar it looks as if your node project wasn't built. Specifically, Cannot find module 'styled-jsx/package.json'. This is telling me that the dependency isn't on your app service.

Have a look at yaml pipeline under Deploy by Using GitHub Actions - Azure App Service | Microsoft Learn. This includes the steps to build your package.json. You can check the deployment logs to ensure that the packages are pulled without any errors.

Share via

Deploying environment variables for nextJS and nodeJS is not working from ADO Pipeline

1 answer

Your answer