nextjs environment variables are appearing as undefined in azure app service

Question

I've seen all similar answers and none of the solutions seems to work for me.

I am deploying my solution using github actions workflow, here is what my yaml code looks like:

name: Build and deploy x platofrm - UAT

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
          
      - name: Set Environment Variables
        run: |
          echo "NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }}" > .env.production
          echo "NEXT_PUBLIC_PYTHON_API_URL=${{ vars.NEXT_PUBLIC_PYTHON_API_URL }}" >> .env.production
          echo "NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}" >> .env.production

      - name: Zip artifact for deployment
        run: zip -r release.zip .
      
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app
          
      - name: Unzip artifact for deployment
        run: unzip -o release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'x-platform-uat'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_DFE186FC1DA249E4A244CC61460052A6 }}
          package: release.zip

The build and deploy pipelines work absolutely fine.

I read in several articles that you cannot read from the App Settings/Configuration Settings within the webapp and so I am manually creating the .env file and injecting into it.

FYI I have also tried different variants of .env.local .env.production.local .env.development.local etc etc in fact my actual pipeline creates all these variations which I've removed for brevity of code.

I've read the documentation: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables

and can confirm that I have constructed my .env file like so: NEXT_PUBLIC_API_URL=https://something.api

but when I do:

console.log(process.env['NEXT_PUBLIC_API_URL']);

or

console.log(process.env.NEXT_PUBLIC_API_URL);

Neither work.

I have even gone to extent of installing: dotenv

then ensuring this exists in the next.config.js file like so:

require('dotenv').config();

But still no luck!

Any help appreciated!!!

catJam · Accepted Answer · 2023-08-10 15:12:05Z

0

It's pretty common ... You can actually read from Application Settings or Connection Strings from App Service Configuration.

This might help you out: https://stackoverflow.com/a/68189283/12944326 & this https://nextjs.org/docs/app/api-reference/next-config-js/env

Use next.config.js to declare env vars to be available for the client-side.

Hopefully this will help you out !

answered Aug 10, 2023 at 15:12

catJam

2301 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdush Samad Miah Over a year ago

Hi @catJam - thanks for the above, so I've done what the documentation said - however I still get undefined. e.g in my next.config.js file I am doing: NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, but this is still undefined

Abdush Samad Miah · Accepted Answer · 2023-08-11 11:26:44Z

My issue was that I was writing to the .env files after I run the build, I flipped them around so that I wrote to the .env file first then ran npm run build as below:

name: Build and deploy x platofrm - UAT

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: Set Environment Variables
        run: |
          echo "NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }}" > .env.production
          echo "NEXT_PUBLIC_PYTHON_API_URL=${{ vars.NEXT_PUBLIC_PYTHON_API_URL }}" >> .env.production
          echo "NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}" >> .env.production

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip artifact for deployment
        run: zip -r release.zip .
      
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app
          
      - name: Unzip artifact for deployment
        run: unzip -o release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'x-platform-uat'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_DFE186FC1DA249E4A244CC61460052A6 }}
          package: release.zip

This then allowed me to do the following in my code which was successfully reading from the .env file:

process.env.NEXT_PUBLIC_MY_PUBLIC_VALUE

The reason the order is important is because the npm run build command generates a production-ready build of your Next.js application in a folder, typically named out or build.

After the build step, you're creating a zip file named release.zip that contains the build artifacts. So I was effectively creating a non existent file because it was created after the npm build command. Took a full day of mine, hope this can help someone!

Collectives™ on Stack Overflow

nextjs environment variables are appearing as undefined in azure app service

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related