How do I define an apiUrl variable, accessible to my components?

Support
1

Hey,
I am new to Netlify, so be kind :slight_smile:

I have deployed my React project to Netlify (kdog-app), along with a config.json file holding the apiUrl address (my Node server is currently on Heroku), as I used in my local dev environment.

I would like to remove this sensitive information (The server address) from my code and from github, and replace it with a Netlify environment variable that will be accessible to my components.

Can someone guide me through that? Preferably using the same variable name (apiUrl) so I do not need to change my code.

Thanks!
Asaf

2

Hiya @asafto!

It’s a bit of a challenge - our “normal” web hosting will 100% expose your api token if you put it into the static pages.

This is the pattern I recommend to “hide” a token, via a function (whose source code is NOT browsable, like your pages are!):

The environment variable must be set in our UI, in the environment variable settings on the deploy settings page, for a function to use it.

Hope that helps!