Access .env vars from client side?

Glitch Help
1

I’ve successfully accessed .env vars from a server side file with process.env.PASSWORD (for the .env var PASSWORD) but can I do so from a client side file? Console says process is not defined when I try.

Thanks!

2

The .env variables are only accessible from the server side. If you expose them on the client side then anyone who visits your page will be able to have access to them so you probably wouldn’t want to do that with things like passwords or secrets.

If you do want to expose some config to your client-side code you’ll need to either fetch it from a request to your server or write it into your html from express when you render the page.

Hope this helps, let me know if you have any further questions :slight_smile:

2 Likes
3

Great, thorough answer to a slightly misguided question–thanks! (Service I’m using needs id/pwd from client side!)

4

I’m a front-end beginner and have come against this issue now that I am beginning a Free Code Camp project which requires me to display weather data from a weather API. Can anyone point me in the right direction in terms of storing an API key in env and accessing it from the server on Glitch?

5

If you add an entry to .env like:

MY_VAR=value

then you can access it in server.js as process.env.MY_VAR:

console.log(process.env.MY_VAR);

You probably don’t want to send your API keys to the client for reasons mentioned above, but you can call the weather API on the server, and pass the results back to the client.

2 Likes
6

Thanks for the breakdown, Tim. I should get a chance in the next few days to sit back down and try to work through the API integration.