Here’s an example of a nice little use case for cloud functions. Glitch has this great package of friendly words. Say you wanted to randomly generate “happy-elephant” or “walking-tree”, and you need to do that on your website in JavaScript. Well, this package is pretty big (~200 KB), necessarily so, because it has big dictionaries of words in it. You wouldn’t want to ship that to your client-side JavaScript when you don’t have to.
Cloud functions are cool, and we can use them to give ourselves a little API for this package instead. That way the size doesn’t matter that much, it’s up on a server. Netlify makes this about as easy as it can be.
Here’s a repo that makes it all possible. It’s barely any code!
functions
folder with a Node file in it.
A At the root of our project: /functions/random.js
This file will require the friendly-words
package and export a single function. Essentially it grabs two random words, plops them together, and returns it.
const friendlyWords = require("friendly-words");
exports.handler = function(event, context, callback) {
const { predicates, objects } = friendlyWords;
const numberOfPredicates = predicates.length;
const numbersOfObjects = objects.length;
const randomPredicate =
predicates[Math.floor(Math.random() * numberOfPredicates)];
const randomObject = objects[Math.floor(Math.random() * numbersOfObjects)];
const output = `${randomPredicate}-${randomObject}`;
callback(null, {
headers: {
"Access-Control-Allow-Origin": "*"
},
statusCode: 200,
body: output
});
};
Deploy it to Netlify
We can configure Netlify to tell it we have this function in a netlify.toml
file (just so we don’t even have to bother with the UI).
[build]
command = "#"
functions = "functions/"
But if I wanted to just tell Netlify this in Settings, I can:

Once it’s deployed, I gave it a nice site name, and then that cloud function will be available at a URL. You can even see it in the browser:
https://friendly-words.netlify.com/.netlify/functions/random
Now I don’t have to ship that package in my client-side JavaScript — I can just hit this URL to get what I want.
CORS
If I was hitting this URL from my own website also at friendly-words.netlify.com
I wouldn’t have to worry about CORS, but if I need to use it from any other website, I do. Notice the Access-Control-Allow-Origin
stuff in the Node JavaScript above. That takes care of that.
Demo
To use our little API, we can fetch
from it. That’s it!
Does this pique your interest? Netlify has a ton of examples of using functions.
While I was doing this I came across Paul Kinlan’s article that does pretty much exactly the same thing, but his has some extra functionality as part of the API you might wanna check out.
Things like this a nice for cute little demos, but do you know of any “real world” examples? Things like querying a database or stuff like that.
Netlify Functions are very much ready for production-grade usage. See the recent integration with FaunaDB, which makes tutorial like this one even easier.
Thank you. Love it! This way of using Javascript all over :-) On the Client as well as on the server :-) This allows front-end developers also to delevop for the backend part of a web-project.
You might also have added instructions on how to change the path to the function (so you can avoid the not so pretty “ .netlify/functions/random”)
You saved me so much time with the CORS related stuff. Despite adding a _headers file and [headers] section in the .toml file in my project, it wouldn’t work from another site. Your code gave me the insight to fix it so thank you!!!