Coding Tutorials Blog

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

© AlexMercedCoder.com 2020