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

The Problem:

Accessing React VITE environment variables in production of an Azure Static Web App.

During local development, environment variables are accessed using a .env file and import.meta.env.VITE_VALUETOGET. In production, however, these variables are stored in Azure App Settings. Attempts to access the variables using process.env or by exporting them from an Azure vault via pipeline have been unsuccessful.

Additionally, using the replace plugin in vite.config.js to inject environment variables has not resolved the issue.

The Solutions:

Solution 1: Access Environment variables from Azure Static Web App

1. Define Vite Environment Variable:

   • In your React project, create a .env file and add your environment variable, e.g., VITE_MY_VARIABLE=my_value.

2. Configure Azure Static Web App:

   • Go to your Azure Static Web App in the Azure portal.
   • Under Configuration, navigate to Application settings.
   • Click New application setting.
   • Add your environment variable with the same name as in your .env file (e.g., VITE_MY_VARIABLE), and set its value accordingly.

3. Access the Variable in your React App:

   • Import the useViteEnv hook from vite.
   • Use the hook to access your environment variable, e.g.:

   import { useViteEnv } from 'vite';
   
   function App() {
     const myVariable = useViteEnv('VITE_MY_VARIABLE');
   
     return (
       <div>
         {myVariable}
       </div>
     );
   }
   

• Refer Env Variables and Modes:

  • NODE_ENV: "production"
  • PUBLIC_URL: ""
  • FAST_REFRESH: true

• Use Environment Variables in Vite:

  • The startup command contains npx serve -l 8080 ..

• For other details, refer to resources on how to load environment variables from a .env file using Vite.

Video Explanation:

The following video, titled "Multi-environment deployments with Azure DevOps and Static Web ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

00:26 - App walkthrough 00:48 - Create a static web app with an Azure DevOps pipeline 02:13 - Add Azure DevOps environments and configure ...