Access env variables from Azure Static Web App #13443
Replies: 7 comments 10 replies
-
I believe this should be the default behavior, taking all environment variables (from the environment itself and not from an .env file) that begin with VITE and inserting them into the code |
Beta Was this translation helpful? Give feedback.
-
Same issue here. Really annoying as this works perfectly fine in Vercel and Firebase but not for Azure Static Web Apps |
Beta Was this translation helpful? Give feedback.
-
Azure Static Web Apps App Settings represent runtime variables, accessible by the managed functions backends. Build time variables, such as the ones you are referring to, must be set in your build pipeline such as your GitHub Action |
Beta Was this translation helpful? Give feedback.
-
seems we have to deploy to app service instead |
Beta Was this translation helpful? Give feedback.
-
// vite.config.ts
import envify from 'process-envify';
export default defineConfig({
define: envify({
FOO_BAR: process.env.FOO_BAR,
}),
// ...
}); // src/main.ts
const FOO_BAR = process.env.FOO_BAR; |
Beta Was this translation helpful? Give feedback.
-
Use case:
We tried digging into VITE. After endless a week of research we could not get it working. Solution: https://github.com/andrewmclagan/react-env
//env.config
REACT_APP_BASE_URL = $ENV_BASE_URL
// react-env expect has default prefix as REACT_APP and this can be changed
//ENV_BASE_URL is expected on process.env through kubernetes
<script src="/public/__ENV.js" /> This gets away from statically expanded variables in which VITE_BASE_URL is replaced with the value. Hope this helps. I am always eager to know if VITE has some provisioning around this. |
Beta Was this translation helpful? Give feedback.
-
I was able to solve the problem by adding the parameter "VITE_xxx_xxx" to the env section in the pipeline configuration as follows.
|
Beta Was this translation helpful? Give feedback.
-
Describe the bug
Unlike variables from env files, where you can access them with
import.meta.env
, the ones specified in an Azure Static Web app are not accessible.As a workaround, I've tried to change access to
process.env
in the vite config:While I have access to the
externalEnvs
object in development, this variable creates an error while building:If it's not possible to access env variables from Azure Static Web Apps configuration, is it possible to create a global variable in build? Is this a good alternative?
Thanks for the help
Reproduction
private repo
Steps to reproduce
No response
System Info
Used Package Manager
yarn
Logs
No response
Validations
Beta Was this translation helpful? Give feedback.
All reactions