Webhooks are the events that are triggered whenever a change is published on your Prismic repository and the API is updated.

I use Vercel as the example and I guess it might be quite similar for Netlify or any other cloud service.

Create a Deploy Hook in Vercel here. For more info, check here

Create a Prismic webhook here. For more info, check here.

Copy the webhook URL you created in Vercel in the URL field of the Prismic webhook

The Secret field is optional in the Prismic webhook. If you set it, Prismic will send the content to your server, so that you can verify that the request is coming from prismic.io.

After successful creation of the webhook, you can manually trigger it and can also see the logs.

Prismic Webhook will be triggered automatically based on the triggers you selected when you created the webhook.

That's it! If you followed the above steps and successfully created a Prismic webhook, it should trigger the deploy hook which will start the build process in Vercel or any platform where you created the deploy hook.

If you have any questions, please post them in the comments section.

A Prismic Webhook allow you to automatically or manually trigger a deployment process in Netlify or Vercel if any post is published or unpublished OR for any other events in Prismic.

Serverless Functions are functions which follow the functional programming paradigm written in a declarative style and get deployed on a virtual cloud server hosted and maintained by cloud computing companies.

For example, a Serverless Function can be a simple function which accepts some parameters and return a response corresponding to the parameters passed.

These functions are then triggered either by a CRON job or in any web application (front-end or back-end or both).

Let's dive into coding part and create a sample working project of a Serverless Function written in NodeJS. Finally, will discuss the process of deploying these functions on Vercel.

In this sample project, we use IPInfo API to fetch the geolocation data based on the IP address.

Note: Serverless Functions can be deployed on any Serverless Architecture Providers like AWS (lamba), GCP (cloud functions), Azure, IBM, Netlify, Gatsby Cloud, Vercel, etc.

Step 1: Create an empty directory and name it as your wish. In this article, will name this directory as geolocation-api. 

Step 3: Create ipinfo.js file in the api directory inside the geolocation-api directory

const axios = require('axios')

module.exports = (req, res) => {
  const url = `https://ipinfo.io/json`
  axios
    .get(url)
    .then((response) => {
      const {data} = response
      res.status(200)
      res.json(data)
    })
    .catch((err) => {
      res.status(err.response ? err.response.status : 500)
      res.send(err.message || 'Something went wrong! Please try again later.')
    })
}

Step 4: Now deploy this project to Vercel 

Note: Leave the Build & Development Settings as well as Root Directory blank (i.e. use default options).

That's it, Serverless Function is now deployed and is ready to return the geolocation data using ipinfo API. In order to execute the function written in step 2, visit your deployed app like this → app-name.vercel.app/api/function-file-name.

For example, function will be executed at https://geolocation-api.vercel.app/api/ipinfo if your app name is geolocation-api and the function file name is ipinfo.

Access the GitHub repo at https://github.com/iamsainikhil/serverless-function-vercel

Access the Serverless Function at https://geolocation-api.vercel.app/api/ipinfo

The Serverless Function discussed in this article is a simple usage where every function will have it's own file in the api directory.

Let's think of a scenario where you want to deploy a NodeJS-Express project on Vercel with several functions which return responses based on the requests. In this case, you need to provide some advanced runtime configuration to Vercel by creating a now.json in the root directory.

To keep this article short and simple, I am just providing links to the projects below which utilize the advanced configuration to use the Serverless Functions. I will write another article in future with the detailed explanation.

Weather React API (an api written in NodeJS using Express which is used as a proxy server for the Weather React application)
Link - https://weather-react-api.now.sh/
GitHub - https://github.com/iamsainikhil/weather-react-api

Weather React application:
Link - https://iamsainikhil.com/weather-react
GitHub - https://github.com/iamsainikhil/weather-react

A robust weather application to provide current and 24 hour 7-day weather forecast for any city in the world built with❤️using React. Weather forecast data is powered by Dark Sky and city search data is powered by Algolia Places.

With Vercel, you can deploy Serverless Functions, which are pieces of code written with backend languages that take an HTTP request and provide a response. Serverless Functions can be used in various scenarios like handling user authentication, form submission, database queries, webhooks, etc.

Blog

Prismic Webhooks

Serverless Functions on Vercel

.css-1ns9571{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1ns9571:hover,.css-1ns9571:focus{color:var(--theme-ui-colors-secondary,#5b5b5b);-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}Prismic Webhooks

Serverless Functions on Vercel

Prismic Webhooks