Add Netlify env var
In this lesson, we learn how to securely store and access API keys in a web development project. Tom demonstrates the process of setting up an environment variable in Netlify, where the API key can be stored securely. It'll show you step-by-step instructions on how to add the variable and its corresponding value. By using environment variables, we can ensure that the API key remains hidden from the front-end code and is protected from potential security breaches.
Additionally, the importance of using serverless functions to make API calls from the back-end is emphasized, as it prevents the API key from being exposed in the browser's DevTools. To proceed with the next steps, Tom guides you on installing Netlify's CLI (Command Line Interface) through the terminal. This lesson equips us with the knowledge and tools necessary to handle and protect sensitive information in our web development projects.
[00:00] What we need to do now is give Netlify the API key. Now, if you remember, the function that we'll be using to actually do the heavy lifting of making the API call, we'll have special access to our API key. So on the Netlify site, come over here to site settings, and we're going to click on environment variables,
[00:19] and we can click add a variable, and then I'm going to select add a single variable. That takes us to this page, and we need to add a key and a value. So let's take a look at our code right here, because this is essentially the same information. This is going to be our key, and the actual API key will be the value.
[00:38] So back on this form then, we'll have open AI API key in here, and the actual API key stored here as the value. Then click create variable, and we can see that the open AI API key has been added. So what we've done here is we've stored our API key
[00:57] in a Netlify environment variable. So now if we scroll up and we launch our site, again, we can try asking a question, but we're going to have the same result. We'll still get errors. And that figures, Netlify has the API key, but we're not doing anything with it in the code.
[01:16] And anyway, at the moment, all we've got is our front end code, and if it did work, the API key would still be visible in DevTools. The fact that we've stored it in an environment variable doesn't mean you can't then display it on the front end. You actually can. That is why we need the serverless function
[01:35] to make the API call away from the front end. Okay, so what we need to do next then is work on the serverless function. But in order to set up a serverless function, we need to get hands-on with the terminal again and install Netlify's CLI or command line interface. So let's do that next.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!