I Just did that with my Netlify deploy, and it’a great. But as far as I know, one way to hide this from the front end request is having a back-end API to do this call for you, so your front end just calls it and it returns the values, without the key showing up
It would not work for me at the moment, because I am just working on the Front-End development, but thanks for taking the time to share your knowledge :)
The easiest and cheapest way is with serverless functions like netlify.com/products/functions/. They play the role of back end and there you can use.env to hide the key.
And I just checked the XHR request, and it is visible, as you say. So, please, if you can, explain what would be a best solution in this case (using React, GitHub and Zeit), so I can edit accordingly and use a good practice.
Using Environmental variables on the front end doesn't make them secret. In the example you gave the API key will be visible in the xhr request.
Thanks for your comment!! Then, could you help me understand how can I keep them hidden? (newbie here!)
I Just did that with my Netlify deploy, and it’a great. But as far as I know, one way to hide this from the front end request is having a back-end API to do this call for you, so your front end just calls it and it returns the values, without the key showing up
It would not work for me at the moment, because I am just working on the Front-End development, but thanks for taking the time to share your knowledge :)
Well Said. This is called abstraction and everybody learn it but many of them don't know how to apply it. What you told is perfect example of it
The easiest and cheapest way is with serverless functions like netlify.com/products/functions/. They play the role of back end and there you can use.env to hide the key.
Thank you so much!! :)
And I just checked the XHR request, and it is visible, as you say. So, please, if you can, explain what would be a best solution in this case (using React, GitHub and Zeit), so I can edit accordingly and use a good practice.
Zeit can also have serverless functions in
/api/
folder.Thanks!! Good to know, I'll check it out.