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.

It took me just 2 days to learn NextJS and build a blog like this website.  I created this blog so quickly because I already created a blog starter using Gatsby and Prismic in October 2020 and used almost similar design and React logic.

Because of the demand for the Gatsby starter, I thought of creating the same in NextJS. I created this starter and named it as NextJS Prismic Blog Starter. I published this starter as a NPM package and has been downloaded ~200 times.

A blog starter template developed using Gatsby and Prismic.

I kindly request you to give yourself 15-30 minutes following instructions and at the end you will have a working blog using  NextJS Prismic Blog Starter template.

https://nextjs-prismic-blog-starter.vercel.app/

A blog starter template using NextJS and Prismic CMS

Blog | Home | NextJS Prismic Blog Starter

⚠️Note: This blog starter uses Prismic as the Content Management System. Hence, you need to have the required data first before using this starter.

Choose your technology. Use the API to fetch content. Empower your content team.

Make your website editable for the whole team - Prismic

For detailed instructions, check this documentation.

If you are done with the Prismic setup and created the necessary data model in your Prismic project, start running the app locally by following the quick start steps.

npx create-next-app

# create a new NextJS site using this starter
git clone https://github.com/iamsainikhil/nextjs-prismic-blog-starter

Install the packages using the command npm install

Go to  API & Security  section of your Prismic project, grab the Permanent Access Token with Access to Master.

The Repository Name is the name you have entered at the creation of the repository (you’ll also find it as the subdomain in the URL)

This project has the support for DISQUS comments section which need your DISQUS project name which can be found at https://<your-project-shortname>.disqus.com/admin/settings/general/

Create an .env file in the root directory of the project. Add the following properties in it:

NEXT_PUBLIC_GA_ID=<your Google Analytics tracking ID> (Optional)

NEXT_PUBLIC_SITE_URL=<URL of the deployed app>

PRISMIC_API_URL=<your prismic repository API URL> (Required)

PRISMIC_ACCESS_TOKEN=<your prismic permanent access token> (Required)

NEXT_PUBLIC_DISQUS_NAME=<your disqus project shortname> (Required)

Navigate into your new site’s directory and start it up.

# Go to project directory
cd <name>

# start the application
npm run dev

5. Open the source code and start editing!

Your site is now running at http://localhost:3000!

Open the name directory in your code editor of choice and edit the contents. Save your changes and the browser will update in real time!

Apart from instructions, check out the tech stack behind the blog.

NodeJS - Server-side JavaScript runtime environment


NextJS - React based framework for generating sites using SSR/SSG

Theme UI - Graph based design framework for designing UI

Vercel - A cloud platform for deploying static sites and Serverless Functions

Google Analytics - Analysis of website traffic and user behavior

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

That's it, you can now use this starter following the above instructions to build a blog similar to this website or customize as your wish to create a new blog website of your choice. 

Please don't forget to ask any questions or share your experience building a blog using the above starter in the comments section. 

Learn and build a blog using NextJS Prismic Blog starter template as quickly as in 15-30 minutes.

Theme UI is a graph based design framework for creating themeable user interfaces based on constraint-based design principles.

https://github.com/iamsainikhil/gatsby-prismic-blog-starter

Personal blog with articles related to Web Development, Software Tools, Tips & Tricks, etc.

JSON based theme configuration to truly customize properties & values on the fly and develop a custom theme for a website or a web application.

Provides sx prop which can be used in React components to use all the properties mentioned in the theme object.

Useful configuration flags that can be used to quickly toggle features.

Treat theme specification as a set of guidelines to construct a proper Theme UI theme object that can be used in any React or Gatsby based application.

For more information on the Theme UI specification, check Theme UI spec documentation.

The theme object is made up of the following data types:

Scales: plain objects or arrays of values for related CSS properties

Variants: partial style objects that can be used for stylistic component variants or making part of an application themeable

Styles: a collection of styles for Markdown content

I created a theme based on the above specification guidelines which you can find below:

useBodyStyles: true,
useCustomProperties: true,
initialColorMode: 'dark',
useColorSchemeMediaQuery: true,
useLocalStorage: true

breakpoints: ['30em', '47em', '64em', '100em'],
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
borders: [0],
colors: {
  text: '#000',
  background: '#ffff',
  primary: '#333',
  secondary: '#5b5b5b',
  muted: '#f6f6f6',
  highlight: '#9f9f9f',
  gray: '#6c6c6c',
  accent: '#3f3f3f',
  gatsby: '#352065',
  code: '#fdf6e3',
  shade1: '#d2d2d2',
  shade2: '#e0e0e0',
  modes: {
    dark: {
      text: '#fff',
      background: '#181818',
      primary: '#d2d2d2',
      secondary: '#b2b2b2',
      muted: '#202020',
      highlight: '#3c3c3c',
      gray: '#999',
      accent: '#e0e0e0',
      gatsby: '#b2b2b2',
      code: '#1b1b1b',
      shade1: '#0a0a0a',
      shade2: '#262626'
    }
  }
},
fonts: {
  light: "'CeraRoundPro-Light', 'Inter', 'Lato', sans-serif",
  body: "'CeraRoundPro', 'Inter', 'Lato', sans-serif",
  medium: "'CeraRoundPro-Medium', 'Inter', 'Lato', sans-serif",
  heading: "'CeraRoundPro-Bold', 'Inter', 'Lato', sans-serif",
  code: "'Fira Code', monospace",
  title: "'Inter', 'Lato', sans-serif"
},
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
fontWeights: {
  light: 300,
  body: 400,
  medium: 500,
  heading: 700
},
lineHeights: {
  body: 1.5,
  heading: 1.125
},
textStyles: {
  title: {
    fontFamily: 'title',
    fontWeight: 'heading',
    lineHeight: 'heading'
  },
  medium: {
    variant: 'medium',
    fontWeight: 'medium'
  },
  heading: {
    fontFamily: 'heading',
    fontWeight: 'heading',
    lineHeight: 'heading'
  },
  body: {
    fontFamily: 'body',
    fontWeight: 'body',
    lineHeight: 'body'
  },
  light: {
    fontFamily: 'light',
    fontWeight: 'light'
  }
}

Container: {
    p: 3,
    maxWidth: 1024
  },
  root: {
    variant: 'textStyles.body'
  },
  h1: {
    variant: 'textStyles.title',
    fontSize: [4, 5, 6]
  },
  h2: {
    variant: 'textStyles.heading',
    fontSize: [3, 4, 5]
  },
  h3: {
    variant: 'textStyles.heading',
    fontSize: [3, 4],
    color: 'primary'
  },
  h4: {
    variant: 'textStyles.medium',
    fontSize: [3, 4],
    color: 'primary'
  },
  h5: {
    variant: 'textStyles.medium',
    fontSize: 2
  },
  h6: {
    variant: 'textStyles.medium',
    fontSize: 1
  },
  p: {
    fontSize: [1, 2, 3]
  },
  em: {
    fontFamily: 'light',
    fontSize: [1, 2, 3]
  },
  a: {
    color: 'gatsby',
    textDecoration: 'underline',
    '&:hover': {
      color: 'secondary',
      textDecoration: 'none'
    }
  },
  blockquote: {
    fontSize: [1, 2, 3],
    variant: 'textStyles.body',
    margin: '1.45rem',
    padding: '0 0 0 1rem',
    borderColor: 'gatsby',
    borderStyle: 'solid',
    borderTopWidth: 0,
    borderLeftWidth: 2,
    borderRightWidth: 0,
    borderBottomWidth: 0
  },
  pre: {
    fontFamily: 'code',
    fontSize: [0, 1],
    p: [1, 2],
    color: 'text',
    bg: 'code',
    borderColor: 'accent',
    borderStyle: 'solid',
    borderWidth: 2
  },
  code: {
    fontFamily: 'code',
    fontSize: 1,
    color: 'muted',
    bg: 'gatsby',
    px: 1
  },
  inlineCode: {
    fontFamily: 'code',
    color: 'secondary',
    bg: 'muted',
    px: 2
  },
  ul: {
    listStyleType: 'disc'
  },
  li: {
    my: 2
  },
  table: {
    width: '100%',
    my: 4,
    borderCollapse: 'separate',
    borderSpacing: 0,
    'th,td': {
      textAlign: 'left',
      py: '4px',
      pr: '4px',
      pl: 0,
      borderColor: 'text',
      borderBottomStyle: 'solid'
    }
  },
  th: {
    backgroundColor: 'muted',
    verticalAlign: 'bottom',
    borderBottomWidth: 8
  },
  td: {
    verticalAlign: 'top',
    borderBottomWidth: 4
  },
  hr: {
    border: 0,
    borderBottom: '8px solid',
    borderColor: 'text'
  },
  buttons: {
    primary: {
      color: 'background',
      bg: 'primary',
      '&:hover': {
        bg: 'text'
      }
    },
    secondary: {
      color: 'background',
      bg: 'secondary'
    }
  }
}

{
  useBodyStyles: true,
  useCustomProperties: true,
  initialColorMode: 'dark',
  useColorSchemeMediaQuery: true,
  useLocalStorage: true,
  breakpoints: ['30em', '47em', '64em', '100em'],
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
  borders: [0],
  colors: {
    text: '#000',
    background: '#ffff',
    primary: '#333',
    secondary: '#5b5b5b',
    muted: '#f6f6f6',
    highlight: '#9f9f9f',
    gray: '#6c6c6c',
    accent: '#3f3f3f',
    gatsby: '#352065',
    code: '#fdf6e3',
    shade1: '#d2d2d2',
    shade2: '#e0e0e0',
    modes: {
      dark: {
        text: '#fff',
        background: '#181818',
        primary: '#d2d2d2',
        secondary: '#b2b2b2',
        muted: '#202020',
        highlight: '#3c3c3c',
        gray: '#999',
        accent: '#e0e0e0',
        gatsby: '#b2b2b2',
        code: '#1b1b1b',
        shade1: '#0a0a0a',
        shade2: '#262626'
      }
    }
  },
  fonts: {
    light: "'CeraRoundPro-Light', 'Inter', 'Lato', sans-serif",
    body: "'CeraRoundPro', 'Inter', 'Lato', sans-serif",
    medium: "'CeraRoundPro-Medium', 'Inter', 'Lato', sans-serif",
    heading: "'CeraRoundPro-Bold', 'Inter', 'Lato', sans-serif",
    code: "'Fira Code', monospace",
    title: "'Inter', 'Lato', sans-serif"
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
  fontWeights: {
    light: 300,
    body: 400,
    medium: 500,
    heading: 700
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125
  },
  textStyles: {
    title: {
      fontFamily: 'title',
      fontWeight: 'heading',
      lineHeight: 'heading'
    },
    medium: {
      variant: 'medium',
      fontWeight: 'medium'
    },
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading'
    },
    body: {
      fontFamily: 'body',
      fontWeight: 'body',
      lineHeight: 'body'
    },
    light: {
      fontFamily: 'light',
      fontWeight: 'light'
    }
  },
  styles: {
    Container: {
      p: 3,
      maxWidth: 1024
    },
    root: {
      variant: 'textStyles.body'
    },
    h1: {
      variant: 'textStyles.title',
      fontSize: [4, 5, 6]
    },
    h2: {
      variant: 'textStyles.heading',
      fontSize: [3, 4, 5]
    },
    h3: {
      variant: 'textStyles.heading',
      fontSize: [3, 4],
      color: 'primary'
    },
    h4: {
      variant: 'textStyles.medium',
      fontSize: [3, 4],
      color: 'primary'
    },
    h5: {
      variant: 'textStyles.medium',
      fontSize: 2
    },
    h6: {
      variant: 'textStyles.medium',
      fontSize: 1
    },
    p: {
      fontSize: [1, 2, 3]
    },
    em: {
      fontFamily: 'light',
      fontSize: [1, 2, 3]
    },
    a: {
      color: 'gatsby',
      textDecoration: 'underline',
      '&:hover': {
        color: 'secondary',
        textDecoration: 'none'
      }
    },
    blockquote: {
      fontSize: [1, 2, 3],
      variant: 'textStyles.body',
      margin: '1.45rem',
      padding: '0 0 0 1rem',
      borderColor: 'gatsby',
      borderStyle: 'solid',
      borderTopWidth: 0,
      borderLeftWidth: 2,
      borderRightWidth: 0,
      borderBottomWidth: 0
    },
    pre: {
      fontFamily: 'code',
      fontSize: [0, 1],
      p: [1, 2],
      color: 'text',
      bg: 'code',
      borderColor: 'accent',
      borderStyle: 'solid',
      borderWidth: 2
    },
    code: {
      fontFamily: 'code',
      fontSize: 1,
      color: 'muted',
      bg: 'gatsby',
      px: 1
    },
    inlineCode: {
      fontFamily: 'code',
      color: 'secondary',
      bg: 'muted',
      px: 2
    },
    ul: {
      listStyleType: 'disc'
    },
    li: {
      my: 2
    },
    table: {
      width: '100%',
      my: 4,
      borderCollapse: 'separate',
      borderSpacing: 0,
      'th,td': {
        textAlign: 'left',
        py: '4px',
        pr: '4px',
        pl: 0,
        borderColor: 'text',
        borderBottomStyle: 'solid'
      }
    },
    th: {
      backgroundColor: 'muted',
      verticalAlign: 'bottom',
      borderBottomWidth: 8
    },
    td: {
      verticalAlign: 'top',
      borderBottomWidth: 4
    },
    hr: {
      border: 0,
      borderBottom: '8px solid',
      borderColor: 'text'
    },
    buttons: {
      primary: {
        color: 'background',
        bg: 'primary',
        '&:hover': {
          bg: 'text'
        }
      },
      secondary: {
        color: 'background',
        bg: 'secondary'
      }
    }
  }
}

A theme does not require that all these fields be present and can include additional values as needed.

That's it, you can now use this theme directly in your application or customize the above properties to create a new theme of your choice. #skyisthelimit

Please don't forget to share your theme configuration in the comments section. 

Build themes for any JavaScript application using Theme UI.

Note: Dark Sky had been bought by Apple and is no longer accepting new signups. For more information, read this news here.

When you have a Dark Sky Account, follow the instructions described in-detail here or below to set up the project locally on your machine.

Clone the local-setup branch in the repository

git clone -b local-setup https://github.com/iamsainikhil/weather-react.git

Install the packages using the command npm install

Create a .env file in the root directory of the project. Add the following properties in it:

REACT_APP_DARKSKY_API_KEY=<your Dark Sky API Key>

REACT_APP_ALGOLIA_PLACES_APP_ID=<your Algolia Places APP ID> (Optional)

REACT_APP_ALGOLIA_PLACES_API_KEY=<your Algolia Places Search-Only API Key> (Optional)

Algolia Places will be shutdown in 2022. For more information, read the announcement here.

You can obtain your Algolia Places API key here. You will get higher rate limits if you sign up and provide an api key OR it's just limited to 1000 requests/day! Moreover, code logic handles the scenario where no Algolia App ID & API key are provided since these are optional.

That's it! You can run the below available scripts to get up and running on the localhost. If you want to dive deeper into the codebase, I recommend you to check the architecture documentation to customize this application as your wish.

These instructions are very important to avoid the Blank Page issue when running the application on http://localhost:3000.

A quick look at the top-level files and directories in this weather-react project.

├── api
	├── index.js
	├── now.json
├── public
├── src
	├── components
	├──	containers
	├── context
	├── fonts
	├── sass
	├── styles
	├── tests
	├── utils
	├── App.js
	├── index.js
	├── serviceWorker.js
├── tailwind.config.js

api: This directory contain all of the code related to the back-end of the application.

public: This directory contain all the assets like images, icons, manifest (PWA), and favicons.

src: This directory contain all of the code related to what you see on the front-end of the application. src is a convention for “source code”.

tailwind.config.js: This file contains the configuration related to tailwindcss.

This application is created with Create React App

Styling syntax was written in SCSS and using TailwindCSS

A JavaScript library for building user interfaces

React – A JavaScript library for building user interfaces

Set up a modern web app by running one command.

Documentation for the Tailwind CSS framework.

Tailwind CSS - A utility-first CSS framework for rapidly building custom designs

First, I used the OpenWeatherMap API to fetch the weather forecast data. However, 5-day forecast data was not reliable i.e. when a user on 14th March 2020 at 7:00 PM EST tries to fetch 5-day forecast data, will get forecast data starting 15th March 2020 at 12:00 AM UTC. This posed a big problem of categorizing 5-day data into individual days since the data is not always consistent and is based on UTC and not based on the user time-zone. Finally, I switched to Dark Sky API which is more reliable and provides a robust data model. However, there is a limit of 1000 calls/day.

Dark Sky API needs a proxy server to send and receive a response which was easy in the development stage using a browser extension like this to enable CORS in the browser. However, I can't ask every user to install this extension in their browser to check the weather forecast. So, I overcome this issue temporarily for now using the cors-anywhere library which you can get more info by checking here. However, I overcome the temporary solution and built a proxy server by deploying the Node.js  based serverless API functions on the Vercel's serverless architecture and can be accessed here.

Latest challenge I encountered was that Teleport API temporarily got shutdown and this led to broken autocomplete city search, and photos for favorited cities. Moreover, there is a tight coupling of code logic with this API. Now, I made a well thought highly scalable solution of using Algolia Places Rest API for fetching address based on city query as well as fetching city name based on latitude and longitude. I am very much happy about this change since it removed a lot of bad code and improved the application load times and performance.
Note: The application UI/UX is not affected with this API change.

CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request. - Rob--W/cors-anywhere

GitHub - https://github.com/iamsainikhil/weather-react


 Publish this project as an NPM package that can be consumed elsewhere.

 Add documentation for components using Storybook


If you have any new idea, check the feature request template to create a request.

If you found any issue or a bug, check the bug report template to create a report.

Have a look at the license file for details

Whether you’d like to discuss a project, ask me about my website or simply say “hello”, I’d love to hear from you.

Morioh is the place to create a Great Personal Brand, connect with Developers around the World and Grow your Career!

Social Network for Programmers and Developers

This weather application provides 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.

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.

It took almost a month to learn Gatsby & Prismic CMS and build a blog like this website. After building it, I thought of making this process quick and easy for beginners. So, I created a starter and named it as Gatsby Prismic Blog Starter. I published this starter as a NPM package and has been downloaded ~300 times.

I kindly request you to give yourself 15-30 minutes following instructions and at the end you will have a working blog using Gatsby Prismic Blog Starter template.

https://gatsby-prismic-blog-starter.vercel.app/

Use the Gatsby CLI to create a new site, specifying the default starter.

npm install -g gatsby-cli

# create a new Gatsby site using this starter
gatsby new <name> https://github.com/iamsainikhil/gatsby-prismic-blog-starter

GA_ID=<your Google Analytics tracking ID> (Optional)

PRISMIC_REPOSITORY_NAME=<your prismic repository name> (Required)

PRISMIC_ACCESS_TOKEN=<your prismic permanent access token> (Required)

GATSBY_DISQUS_NAME=<your disqus project shortname> (Required)

GATSBY_TELEMETRY_DISABLED=1 (Optional to disable GATSBY analytics)

# Go to project directory
cd <name>

# start the application
npm run start

Your site is now running at http://localhost:8000!

Open the name directory in your code editor of choice and edit gatsby-config.js. Save your changes and the browser will update in real time!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Gatsby - React based framework for generating static sites

GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Gatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud.

Learn and build a blog using Gatsby Prismic Blog starter template as quickly as in 15-30 minutes.

Blog

Prismic Webhooks

Steps:

Share

Sai Nikhil

Related Articles

Build a Blog using NextJS & Prismic

Build custom themes using Theme UI

Build a Weather Application Using React