ENVIRONMENT VARIABLES NOT WORKING WHILE DEPLOYING REACT APP THROUGH GITHUB ACTIONS

Akshit Tomar 0 Reputation points
2023-08-14T07:42:54.2533333+00:00

I AM USING AZURE WEB APP SERVICE TO DEPLOY MY REACT APPLICATION BUILD THROUGH VITE . I AM USING GITHUB ACTIONS FOR CI/CD DEPLOYMENT . I WANTED TO USE ENVIRONMENT VARIABELS IN MY REACT APP WHICH I USED AS :

<div>Todo
        {import.meta.env.VITE_SOME_KEY}
    </div>
  1. .env file is in root dir (No issues there )
  2. .env file looks like : VITE_SOME_KEY=123
  3. .env variabels working great on local server
  4. As soon as I deploy my application I can't see my .env variabel values there
  5. I have configured app settings and have also added my env variable there
  6. Inside Advanced Tools>Environment my env var is listed correctly with correct value
  7. Inside configuration file of vite.config.js I have added my env var declaration correctly as:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        inlineDynamicImports: true,
        globals: {
          
          'import.meta.env.VITE_SOME_KEY': JSON.stringify(process.env.VITE_SOME_KEY||'ABC'),
        },
      },
    },
  },
});
  1. I have done all things correctly gone through docs , stackoverflow but don't know what is going wrong here . My github wokflow file is :

name: Build and deploy Node.js app to Azure Web App - my-notes

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - uses: actions/checkout@v2

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

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
      # zip the build directory
      - name: Zip Release
        uses: TheDoctor0/zip-release@0.7.1
        with:
          filename: release.zip
          # Base path for archive files
          path: ./dist/*
          # Working directory before zipping

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

  deploy:
    runs-on: windows-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: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v2
        id: deploy-to-webapp
        with:
          app-name: 'my-notes'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_D81356694B8E443E8730CBE89FE4B78A }}
          package: release.zip
Windows 11
Windows 11
A Microsoft operating system designed for productivity, creativity, and ease of use.
10,093 questions
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,998 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.