Noob question

I’m trying to deploy my front end web app (my personal website) to GitHub pages.

In my app, I used react environment variables to store a api key I need in my app.

When I deploy my app with GitHub pages, will the app still be able to access the react env variables?

Let me know if that doesn’t make sense. Thanks!

Without knowing anything about React, that depends on your build setup. Most likely is that it will be replaced at build time. Anyways, if the key is sensitive it should not be included in your frontend bundle.

I really know nothing about react, but one thing I do know regarding the api calls: github pages source files are *always* open to the public. So if you need to pass on some secret to the api make sure you handle it correctly!

Not sure if you already took this into account, but a warning can't hurt I guess..

As far as I know github pages is fronten-only meaning any variables will be open to the public

If you want to use an api with keys, you need to create a backend that can handle the variables securely

I had no idea all variables r public in GitHub pages 😬

Seems like I’m gunna have to do some more research. I might just deploy it on heruku instead

Thanks guys!

@DeepHotel well, I think there is some option on your github profile to actually store secret keys that are only usable by you yourself

Github pages are just static files. There's no backend, no secrets, no logic or rendering. Whatever is available to a github page beside user input is also available to all clients of said page and everyone who knows curl.

1. Only if you use a bundler that creates non-standard code for you will `process.env` still have a valid object there in the browser.

2. Do not do this. Anything that runs in the browser is public and readable to viewers. Your API keys included.

3. Do yourself a favor and avoid `process.env` altogether for any sort of web application. Bundlers have started to implement hacks for things they think are proper when in reality it just causes headaches down the line.