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
Top comments (0)