I've Tried EVERYTHING. Why Won't My Azure Static Web Apps, Vite Env Variables Work

Question

I've been deploying my Vite React project to Azure Static Web Apps using GitHub Actions, but the environment variables (VITE_LOGIN_API_URL, VITE_REGISTRATION_API_URL) are completely missing in the deployed app (import.meta.env.VITE_LOGIN_API_URL is undefined). Locally, they work fine with a .env file, but no matter what I do, they won't apply in production.

Project Setup:

Framework: Vite (React) Deployment: Azure Static Web Apps via GitHub Actions Environment Variables: VITE_LOGIN_API_URL: http://~#@^/auth/login

VITE_REGISTRATION_API_URL: http://~)%^/auth/register

I've registered them in both Azure and GitHub Secrets, triple-checked my configs, watched countless YouTube tutorials(https://www.youtube.com/watch?v=fTcD6oR5xEE), read through MS Learn and every community post I could find—but NOTHING works! My workflow never runs as expected, and I'm honestly about to lose my mind. What could possibly be causing this?!"

This is my cicd code and all source code repository https://github.com/Team6forbreathing/Web_FE/actions/runs/14822402317/workflow

Upper my local .env works well when I run command "npm run dev"

first env thing in code

second env thing in code

I saved my secrets well! and I also saved in Azure well. There are no wrong values.

Lower is about my GitHub Actions to deploying in Azure Static Web Apps

Answer 1

Hi @Minjin Park,

Your Vite environment variables (like VITE_LOGIN_API_URL) are defined in GitHub repository secrets and injected in the GitHub Actions YAML under the env: block, which is only available during the build process. But Vite doesn't automatically expose those variables to the client-side code at build time unless they are passed as actual environment variables to the vite build process itself.

And in Azure Static Web Apps, those secrets must be configured in the Azure Portal under “Application Settings”, not just GitHub secrets, because only Azure’s settings get injected into the build at runtime unless explicitly passed.

Remove the GitHub Secrets, you’ve correctly added them under GitHub secrets and the workflow file, but that’s not how Azure Static Web Apps expects Vite environment variables to work. You don’t need GitHub repository secrets for runtime .env values.

Set Environment Variables in Azure Portal for your Static Web App:

1. Go to your Azure Static Web App resource.
2. In the left menu, go to Configuration => Application settings.
3. Add the environment variables exactly like this: VITE_LOGIN_API_URL http://yourdomain.com/auth/login VITE_REGISTRATION_API_URL http://yourdomain.com/auth/register
4. Save and restart the app. Configure application settings for Azure Static Web Apps

The environment variables must be available during build time, so trigger a new GitHub Actions deployment after saving your Azure settings. You can do this by: Making any small commit and pushing or manually triggering the workflow.

Using import.meta.env.VITE_... Safely, you're already doing this right in your code, just make sure these values are available at build time, not after deploying, Vite inlines them during the build process, do not try to access these secrets at runtime like you would in Node.js (e.g., process.env), because Vite is a static site builder. If a variable isn’t present at build time, it becomes undefined.

https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#application-settings
https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration?tabs=identity&pivots=github-actions

Hope this information is helpful, let me know if you have any further queries.