Refactor to Use Dependency I - .env Variable

[00:00] So far, we've been using a fetch request to make API calls, but now we're going to neaten things up a bit by switching to the OpenAI dependency, and this is actually going to save us time and allow us to write less code as the project progresses. Now, if we look back at the docs, we saw this code snippet for Node.js,

[00:19] and we can actually get a broad idea from this as to what we want to achieve. Let's just zoom in a little bit. Okay, so we're going to need to get our hands on the configuration and OpenAI API constructors from the OpenAI dependency, and we'll actually be using the import keyword, not requiring them,

[00:37] because obviously we're not working in Node.js. Also, like they're doing here, we are going to store our API key in a separate file, and we'll talk about that more in a moment, and then we'll use the two constructors that we're bringing in from the OpenAI dependency, and then we can update and simplify our fetch request.

[00:56] So firstly, let's come over here, and I'm going to set up a new file called env.js. Now, you can't actually see me do this, but when you hover your cursor here, three dots appear. When you click on them, you get a menu, and you can select new file. I'm going to call this file env.js, and there we are.

[01:15] We can see that file has now appeared. Now, remember, because we're working on the front end, this file is totally visible. If you were taking this to production, this file would need to be server side, and of course, you would also make sure you were ignoring it when pushing it to GitHub. But what we're doing today is purely on the front end,

[01:33] and this is absolutely fine while we're developing and running things locally. And as I said, towards the end of the course, we will look at how you can deploy your projects with your API key safely hidden, and then you'll be able to share your work and use it in your portfolios.

[01:48] Okay, so in this env file, I'm going to export a const, and this const will be process. And process is going to hold an object, and inside that object, we're going to have a key value pair where the key is env, and the value will be an object with another key value pair.

[02:08] This time, the key will be OpenAI API key, and I've put that in uppercase letters with underscores separating each word. Now, the value in that key value pair will be our API key. So let's just copy and paste that from index.js.

[02:27] Now, we've done it like this with this environment variable to more closely mimic what we would be doing if this were a production app, and this file were being stored on the server. And now that we've got the API key in one place, when you come to doing the challenges and we've got various API calls happening in the app,

[02:45] you'll only have to paste your API key in one place. Right, let's go back to index.js, and we're going to import that environment variable. So I'll come right up to the top, and I'll say import, and then in curly braces, we need process, and then we need from,

[03:03] and now we just need the path to our environment variable, which is just going to be slash env. And this should work because in index.js, if we scroll down to the bottom, we've already got this piece of code right here, type equals module. So the browser knows to expect modular JavaScript. Now, let's check it's working.

[03:24] So what I'm going to do is comment out this API key, and I'll set up a new const called API key, and I'll have that store the API key that we're importing with process. So it will be process, and then we're going to need .env and then .openai API key.

[03:46] Let's hit save and see if it works. So I'll come in here, click the button, and there we are, enthusiastic and excited. Okay, so we've got our API key where I want it. Next, let's install the OpenAI dependency, and we'll come on to that in the next scrim.