Configuring Your JavaScript App

Setting Up Your App for Efficiency and Security

Image for post
Image for post
Credit: Synconics

This week, while working on my JavaScript plant care application, I ran into the question of how to best configure my app to ensure security while also maintaining performance and efficiency. Specifically, I needed a way to set up my application so that it could make requests to the Trefle REST API and retrieve and display data from the vast collection of plant information Trefle provides while also keeping my unique API key private on the client-side. Keeping important information such as API keys private is imperative because it ensures the security of your application and prevents other people from accessing the API using your credentials. Additionally, since some APIs require a paid subscription plan that limits the number of requests you make to the database, you might end up paying a hefty unexpected sum just for exposing the API key.

To get started, what you will want to do is create a 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:

Image for post
Image for post
config.js

Here we have a config object with a key of and a value that is your API key.

From here, you will want to make sure that you create a 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 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:

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.

Image for post
Image for post
app.js

Et voila!

Fullstack Software Engineer based in NYC. Passionate about creating social change and making a difference through innovative, powerful technologies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store