How to use Netlify Cloud Functions
Alex Merced
![Alex Merced]()
Alex Merced
Co-Author of “Apache Iceberg: The Definitive Guide” | Head of DevRel at Dremio | LinkedIn Learning Instructor | Tech Content Creator
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