Hi all, I have been building simple sites with API.
I am trying to learn how to hide API Key. I was able to do this successfully through github by using a new javascript file called “config.js” and adding this file to my .gitignore. By doing this, now my site on netlify will not work because I obviously added this file to my .gitignore. What other ways can I make this work with netlify?
There are tons of great answers out there but most of them pertain to NODE/NPM. I’m using strictly using HTML/CSS/JS no libraries or frameworks.
I did read the docs but as a beginner it is confusing so I was wondering if anyone can lead me to the right direction! Thank you.
Correct me if I’m wrong. But it looks like, you’re trying to hide a API-key in client-side code, right?
If that’s the case, sorry to break it to you, but there’s literally no way to keep it completely hidden. No matter what you do, a client-side code is always accessible by anyone and someone desperate enough can dig into it and get the required material.
What you can do instead, is use something like Netlify Functions to fetch and return data from some API. In this way, you can keep your API key hidden in a Netlify Environment Variable. However, in most cases, you’d have to use NPM. NPM would be needed to access libraries like Firebase, FaunaDB, etc.
