How to use Netlify Cloud Functions

January 23, 2021

Context

First Read My Article on Cloud Functions to understand why you should learn about them!

Getting Started

Create a new folder and initiate a git repo inside of it
in this folder create two new subfolders, functions and public
Create an index.html in the public folder (just something for us to deploy)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>My Netlify Function Site!</h1>
  </body>
</html>

create a netlify.toml file in the main folder (parent of functions/public)

# netlify.toml documentation => https://docs.netlify.com/configure-builds/file-based-configuration/#post-processing

#///////////////////////////////
# Application Build Settings
#///////////////////////////////
[build]
    #base = the root folder for build context (where the package.json file is)
    #base = ""

    #publish = after build command is complete the folder to serve as the website
    publish = "public"

    # command = the build command to run from the base directory
    # command = "npm run build"

    #functions = folder where your netlify functions are located
    functions = "functions"


#///////////////////////////////
# URL Redirects
#///////////////////////////////
# Below is a very standard rule for Single Page Apps using routing
#[[redirects]]
#   from = "/*"
#   to = "/index.html"
#   status = 200


#///////////////////////////////
# Headers
#///////////////////////////////
#Below a configuration to let other websites make requests to yours
#[[headers]]
#   for = "/*"
#   [headers.values]
#       Access-Control-Allow-Origin = "*"
#       Access-Control-Allow-Methods = "*"
#       Access-Control-Allow-Headers = "*"

While a lot of the above properties we don’t need for this exercise you can use the above template to easily find the other powers of the netlify.toml file

in the functions folder create a new folder called “first” and in there an index.js
in the index.js we can now write our first function!

/functions/first/index.js

//We export the function
exports.handler = async function (event, context) {
  //Fetch request details from event object
  const { path, httpMethod, headers, queryStringParameters, body } = event

  // return some JSON data with a status of 200
  return {
    statusCode: 200,
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      path,
      httpMethod,
      headers,
      queryStringParameters,
      body: body ? JSON.parse(body) : "none",
    }),
  }
}

now commit everything, push up to github and deploy to netlify
then to use this function the url would be…

https://mynetlifyurl/.netlify/functions/first

just to see it grab the url query try out

https://mynetlifyurl/.netlify/functions/first?cheese=gouda

Try using postman or CURL to make other types of requests like POST, PUT, DELETE

Other Things to Know

using the httpMethod property you can use if or switch statements to create different tasks based on the request
you can install other node libraries in the package.json in your base directory and use them in your functions.
To enable cors just set the headers like so:

headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Content-Type",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
    }

If you are getting a cors error despite having the proper cors errors, it may be because the function is erroring