Make Yourself a Little API With Netlify Functions

Building a micro API with Netlify Functions: A Practical Cases

Cloud functions provide us with many clever application scenarios. For example, Glitch offers a great "friendly vocabulary" package that randomly generates phrases like "happy elephants" or "walking tree". If you want to implement this feature in a JavaScript web page, it may be a bit problematic to use this package directly because it is large (about 200KB) and contains a large number of vocabulary dictionaries. To avoid increasing the burden on client JavaScript, we can use cloud functions to build a mini API.

The advantage of cloud functions is that we can put large resources on the server side without loading them to the client. The Netlify platform makes it very easy to create such APIs.

Here is a simple example with very small amount of code:

Function folder and Node file

Create the folder /functions/ in the project root directory and add the file random.js in it. This file will introduce friendly-words package and export a function. The function of this function is to randomly get two words, combine them together and return the result.

 const friendlyWords = require("friendly-words");

exports.handler = function(event, context, callback) {
  const { predictes, objects } = friendlyWords;
  const numberOfPredicates = predictes.length;
  const numbersOfObjects = objects.length;

  const randomPredicate = predicts[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 to Netlify

We can configure Netlify through the netlify.toml file to inform its function file location, thereby avoiding configuring using the UI interface.

 [build]
  command = "#"
  functions = "functions/"

Of course, you can also configure it directly in the Netlify settings.

Once the deployment is complete, set a friendly site name for it and the cloud function will be accessible via a URL. You can even view it directly in your browser:

https://www.php.cn/link/8441c6ab9e88ee3764bd79b6d72269a1

Now we don't need to include the package in client JavaScript, just visit this URL to get the desired result.

CORS cross-domain resource sharing

If you access this URL from a website that is also deployed on friendly-words.netlify.com , there is no need to consider CORS issues. But if you need to access from other websites, you need to handle CORS. Please note the Access-Control-Allow-Origin settings in the Node.js code above, which solves cross-domain issues.

Demo

To use this mini API, just use the fetch function.

Netlify provides many examples of using functions, which can be explored further if you are interested.

In the process of writing this example, I referenced Paul Kinlan's article, which implements nearly the same functionality and provides some additional API features that are worth a look.

The above is the detailed content of Make Yourself a Little API With Netlify Functions. For more information, please follow other related articles on the PHP Chinese website!