Environment variables arent accessible in app level?

[subhendukundu]

I have added a .env in root with

VITEDGE_TEST="hello world"
HELLO_TEST="hello world"

Then trying to access them in src/App.jsx like so

function App ({ router }) {
  console.log(process.env.VITEDGE_TEST, process.env.HELLO_TEST)

but both are undefined. Am I doing something wrong?

[frandiox]

@subhendukundu For the frontend env variables you need to follow Vite instructions: https://vitejs.dev/guide/env-and-mode.html#env-files

only variables prefixed with VITE_ are exposed

-- The VITEDGE_ prefix is for backend variables, which are not loaded by Vite.

[subhendukundu]

Fair enough. But seems not working.
https://github.com/subhendukundu/cool-bio-analytics/blob/main/.env.example
This is what I have defined.
https://github.com/subhendukundu/cool-bio-analytics/blob/main/src/App.jsx#L190

[frandiox]

Are you running on mode example? Normally you would use .env or .env.development for the name of your files. Other than that, use import.meta.env.VITE_XXX int he frontend to access variables, that's the recommended way in Vite.

In backend it's still process.env.VITEDGE_XXX since that doesn't run on Vite.

[subhendukundu]

oh no, I have a .gitignore with the .env, so it wouldn’t push it. People usually push it with .env.example to give an example of how to use the .env. Sorry I forgot to mention that.

But import.meta.env.VITE_XXX did the trick. Didn't know about this one. Thank you.