Netlify — Making APIs Work After Deploying App
How to hide your API key in a React app, Netlify environment set up, and the issue I encountered.
It’s the day before an internship application is due, and the only thing left is deploying my React app. After using Netlify to deploy, I check one more time to see that everything is working correctly. I type a movie title in the search bar and hit enter, nothing. I reload the page and do it again, nothing. I open it up in VSCode, run my server, and search, everything is working how it should be. Go back to my website, nothing.
I knew that there had to be an issue with the API I was using since everything in my app worked but the search function. I did what programmers do best, I turned to google. The top solution was to set up my environment in Netlify. Since I had hidden my API key, Netlify couldn’t access it when deploying, causing the search function to no longer work.
Hide an API Key
Always hide your API keys, even if they’re free. If you already know how to do this, skip ahead to the next section. A quick and easy way to hide an API key is to make a .env file and add it to the .gitignore file.
- Create
.envfile
2. Add your API key
- Remember that because this is a React app what you name your key has to start with
REACT_APP
3. Add the .env to the .gitignore file
- By placing
.envin.gitignoreit keeps it from being tracked, thus Git ignores it
Setting up your environment
Since your API key is being ignored, Netlify doesn’t have access to it. For your API to work you need to set up your environment.
- In
Site overviewclick onSite settings
2. Then click on Environment underBuild & deploy
- This is where you will enter your API key
- The name for
Keyshould be the same as it is in your program
Ideally, your app should work properly once you’ve saved the key and its value.
Still not working
After setting up my environment, checking the values matched, and deploying again, my search function still did not work. I searched FOR HOURS trying to find a solution! Unfortunately, Netlify’s documentation didn’t provide much help, and after trying many of the solutions on google, I couldn’t get my app functioning properly. The next morning (yes, the next morning), I asked a friend if he could help. He suggested setting up my environment, which I had already done. Then, he told me to check the API’s URL. It turns out that the URL provided started with http and it needed to be https for it to work. The letter “s” is what kept my application from working after the environment was set up! Once I fixed this, my application worked perfectly.
Conclusion
Hiding your key is crucial to keep your account from being used by others. Even if the key is free there can be limitations on usage, and it’s good practice. When deploying your application to Netlify, make sure to set up your environment so that everything works properly. Keep in mind that Netlify name for the storage of key and value is environment, other hosting sites could call it by another name. Your application should run smoothly when correctly set up. However, if it doesn’t check your URL, sometimes one letter makes a HUGE difference.
