I have created a basic front end only news reader application with vanilla JS, no frameworks, which fetches news from a third party API and display them on the front end.
I would not want to share the api key, so I have hidden the api key in a config.js file, and then placed it into a script in the HTML, and then created a variable on index.js to use on the call to the API :
I understand config script gives 404 as it is included into a .gitignore
I guess I was just looking for a way to try and hid the apikey, mainly because I am trying to put a portfolio in place & was trying to show that I am also thinking about security of my application…
You’ll have to make use of a Netlify Function to be able to hide your API key. If you use an environment variable in your JS build, it will still show up on your site.
Here’s a simple Netlify function get-headlines.js to get you going:
For obvious reasons I wouldn’t copy and paste this to use in production. I recommend you read up on Netlify Functions in the docs and browse through the playground a bit