client env vars
Hey kapa, will this be correct:
clientId: import.meta.env.REACT_APP_GOOGLE_CLIENT_ID || '',
appId: import.meta.env.REACT_APP_GOOGLE_APP_ID || '',
developerKey: import.meta.env.REACT_APP_GOOGLE_PICKER_API_KEY || '',
or
clientId: env.REACT_APP_GOOGLE_CLIENT_ID || '',
appId: env.REACT_APP_GOOGLE_APP_ID || '',
developerKey: env.REACT_APP_GOOGLE_PICKER_API_KEY || '',2 Replies
Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The correct way to access client environment variables in a Wasp project is using the import.meta.env object, like this:
This is because Wasp (using Vite under the hood) embeds client environment variables at build time, and they are accessible in the client code via import.meta.env. The env object (e.g., process.env) is only available on the server side, not in the client/browser code. Also, client environment variables must be prefixed with REACTAPP to be picked up by Wasp and Vite for the client code Docs: Env Variables.
So, your first example is correct for client-side code. The second example would not work in the browser.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @NEROX, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
yeah, makes sense