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.
Read more about it here
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.jsFinally, 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.
Top comments (4)
Does not work
Errors
script.js:91 GET localhost:5500/.netlify/functions/api 404 (Not Found)
(anonymous) @ script.js:91
VM165515:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Sorry for the late response. Are you still facing the error? Let me know and we can connect over a session and see it through
I think this is a viable approach but you need to think through security. An unsecured API to expose environment variables seems like a bad idea but I have to imagine there is a way to lock down this function.
Hello Barry. Yes, you can setup an auth process for that purpose. Netlify also offers that service: docs.netlify.com/visitor-access/id...