DEV Community

loading...
Cover image for How to use Netlify Cloud Functions

How to use Netlify Cloud Functions

alexmercedcoder profile image Alex Merced ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode
  • 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 = "*"

Enter fullscreen mode Exit fullscreen mode

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"
      })
    }
  }

Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

just to see it grab the url query try out

https://mynetlifyurl/.netlify/functions/first?cheese=gouda
Enter fullscreen mode Exit fullscreen mode

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",
    }
Enter fullscreen mode Exit fullscreen mode
  • If you are getting a cors error despite having the proper cors errors, it may be because the function is erroring

Discussion (0)

pic
Editor guide