Share via

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

Minjin Park 0 Reputation points Student Ambassador
2025-05-04T15:16:37.6166667+00:00

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

User's image

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

User's image

first env thing in code

User's image

second env thing in codeUser's image

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

User's image

Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bhargavi Naragani 7,525 Reputation points Microsoft External Staff Moderator
    2025-05-05T08:04:01.44+00:00

    Hi @Minjin Park,

    Your Vite environment variables (like VITE_LOGIN_API_URL) are intended to be used during build time, because Vite inlines them into the final bundle. These variables must be present before the build runs; they are not accessible at runtime like in Node.js (process.env). In Azure Static Web Apps, the correct way to make environment variables available to Vite is by configuring them in the Azure Portal under Application Settings, not just GitHub secrets.

    While you’ve correctly added them under GitHub repository secrets and referenced them in your GitHub Actions YAML under the env: block, those secrets are not automatically passed to the Azure build environment unless explicitly mapped into the build command which is not necessary in this case.

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

    1. Go to your Azure Static Web App resource in the Azure portal.
    2. In the left menu, go to Configuration => Application settings.
    3. Add the environment variables exactly like this:
    4. Save and restart the app.

    These Application Settings are automatically injected into the environment during the Azure-hosted build process (which GitHub Actions triggers by default), making them available to Vite at build time. Configure application settings for Azure Static Web Apps

    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.

    you're already using the correct syntax in your code: import.meta.env.VITE_LOGIN_API_URL. Just ensure that these variables are present at build time via Azure's Application Settings. Vite does not support injecting these dynamically at runtime, if they’re missing at build time, they’ll be undefined in your code.

    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.

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.