Setting Up Your App for Efficiency and Security
To get started, what you will want to do is create a
config.js file in your application. In this file, we will set up a config object with the information we need to keep inaccessible from the client-side. In this case, I needed to keep my unique API key hidden, so here is how my config.js file ended up looking like:
Here we have a config object with a key of
apiKey and a value that is your API key.
From here, you will want to make sure that you create a
.gitignore file in your application’s root file and include your config.js file in the list of files for Git to ignore. This ensures that your config.js file is not pushed up to GitHub, which would then expose your API key. Once you have your .gitignore file set up and have included your config.js file, you are then free to push your code up to GitHub.
Now you will have to set up your application to be able to access your API key so that you are able to make requests and retrieve the data you need for your application. To do this, you can create an
app.js file in which youmake our fetch request to the API. In this file, you will access your API key by referring to the config object created in the config.js file, like so:
const apiKey = config.apiKey
In your fetch request, you can now interpolate your API key by referencing the variable you just declared. This allows you to access your API key without ever actually hardcoding it into the access point URL.