How can i access my react VITE ENV variables in production of an azure static web app?

Question

locally i use a .env file and do the following:

const value = import.meta.env.VITE_VALUETOGET
console.log("value", value )

When i go to production however i use the azure portal configuration app settings and added VITE_VALUETOGET with the value, this doesn't work because i get undefined if i try to log it.

I also tried to use pipeline to deploy the app and export the values from azure vault before i deploy it but nothing seems to work, process.env neither.

I also tried vite.config.js:

export default defineConfig({
  mode: 'production',
  plugins: [
    react(),

    // Add the replace plugin to inject environment variables
    replace({
      'import.meta.env.VITE_VALUETOGET': JSON.stringify(process.env.VITE_VALUETOGET)
    }),
  ],
});

Refer to this [MSDOC](https://learn.microsoft.com/en-us/answers/questions/352579/azure-web-app-service-react-the-environment-variab) — Sampath, Aug 10 '23 at 13:04
Refer this for production configuration in static web [app](https://learn.microsoft.com/en-us/azure/static-web-apps/preview-environments) [MSDOC](https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration) and [SO](https://stackoverflow.com/questions/75674422/on-azure-repos-how-to-get-master-branch-to-publish-to-production-environment-a) — Sampath, Aug 12 '23 at 04:29

score 1 · Answer 1 · answered Aug 11 '23 at 12:32

Access env variables from Azure Static Web App · Discussion Variables. VITE ENV variables in the production of an Azure static web app.Used this reference for Building for Production

   const value = import.meta.env.VITE_VALUETOGET  
     console.log('process.env', process.env);

Refer this Env Variables and Modes

   {  
     "NODE_ENV": "production",  
     "PUBLIC_URL": "",  
     "FAST_REFRESH": true  
   }

enter image description here

Use Environment Variables in Vite.The startup command contains npx serve -l 8080 .
For other details refer this How to load environment variables from .env file using Vite.

How can i access my react VITE ENV variables in production of an azure static web app?

1 Answers1