How to access API keys from environment variables in Netlify

This post was originally published on dev.to

Please read the previous post first if you are not aware of the terms API, environment variable, netlify.

How to access API keys from environment variables in Netlify?

In the previous post, I explained how to setup your API key as environment variable in Netlify. You can easily access them in your application by appending the keyword to process.env

process.env.SERVER_API_KEY

But I cannot access process.env in my JavaScript application!

You will not be able to access process.env directly in your front-end application without using a package.

I don't want to use any package. Is there any other way?

Yes! This is the part where Serverless Function comes into play.

What is a Serverless Function?

Conventionally, serverless functions are single-purpose, programmatic functions that are hosted on managed infrastructure. These functions, which are invoked through the Internet, are hosted and maintained by cloud computing companies.

How to create a Serverless Function in Netlify?

First, please click here to read the documentation on Netlify to understand the general syntax.

Now, this is how you would setup your serverless function:

Create a path where you will keep all your serverless functions. I have created .netlify/functions/
Inside that path, create a js file which will hold the code for your serverless function. I have named it api.js
Finally, put your code inside the file:

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      api: process.env.SERVER_API_KEY
    })
  }
}

In the above code, I have attached the key process.env.SERVER_API_KEY of my environment variable to a keyword "api" which we will use at the time of extraction.

That's all! Now head back to your app.

How to access the API Key using the Serverless Function?

In your main js file where you want the API Key, write this simple fetch with the path to your api.js:

let serverURL

fetch('.netlify/functions/api')
  .then(response => response.json())
  .then(json => {
    serverURL = json.api
  })

In the above code, we parse the response to json, then we are extracting api, which was our keyword holding process.env.SERVER_API_KEY in the Serverless Function. As we know, at runtime process.env.SERVER_API_KEY is replaced with the actual value of the environment variable. Now you can use it in your program.

That's all folks! If you want to learn how to setup your API Key in Nelify, read this post.