DEV Community: Blessing Krofegha

Deployment made easy with Agility CMS and Vercel

Blessing Krofegha — Fri, 21 Jan 2022 02:38:03 +0000

Deployment made easy with Agility CMS and Vercel
Deployment is an important phase in every project, with vercel intuitive deployment features, this process is simpler.
Vercel's new Integrations Marketplace makes it much easier for Vercel users to discover, install, and configure integrations. It simplifies how developers integrate with the Vercel platform to enable the best developer and end-user experience, it enables you to extend and automate your workflow by integrating with your favorite tools, such as Agility CMS!

Agility CMS integration with Vercel will set the environment variables that allow you to connect to your data from Agility CMS in your Vercel applications. In addition, it will also configure your Agility CMS instance with a preview and production domain, which enables direct links for your editing team, in the shortest possible time.

In this article, I'll walk you through the process of integrating Vercel with Agility CMS. Vercel allows for automatic deployments on every branch push and merges onto the Production Branch of your GitHub, GitLab, and Bitbucket projects
For this walkthrough, we’ll be using the Next.js starter website connected with the Agility CMS instance.
This article assumes that you already have an account with Agility CMS and Vercel, and as such will not be treating that in this article.

Let’s get started!

Deploy from the Content Manager

You can deploy our template starters using the Vercel integration built-in to the Agility CMS Manager.
To make the process less daunting, we’ll break the process into steps.

Step 1: Deployment Settings

Start by heading into Settings > Sitemaps, then clicking Setup Deployment.

Step 2: Select a Deployment Provider

Select Vercel as your deployment provider, ensure you click on the Automated Deployment option to connect to Vercel and deploy your website.

Step 3: Create Git Repository

First, connect to your preferred Git provider, after that create a Git Repository for your project or app to ensure you can easily update your project after deploying it.

Step 4: Add Agility CMS Integration

Next, Install the Agility CMS integration that will authorize access between Vercel and your Agility CMS content so that we can automatically configure your Production and Preview domains, as well as set up your Environment Variables.

Step 5: Deploy

Lastly, Vercel will fetch the source code for the template starters and it will be cloned into your Git repository. Vercel will also build your project and upload/deploy your build output.

Once deployed you will be taken back to your Agility CMS Manager, and you will see that your Production and Preview domains have been set. You can click on the link to view your live site.

After the webpage is successfully deployed, you would be able to preview the website. Check out the Vercel documentation to explore various channels of deployment that can make your deployment process effortless and enjoyable!

Try Agility CMS and Vercel

Vercel offers a profound process of deploying static sites in any frontend framework. As a result of the Vercel Marketplace partnership, Agility CMS can deliver a dynamic deployment experience to developers, one that makes development to deployment a plug and plays experience, hence improving your digital experience
In addition, we offer a free trial of our headless CMS in the case that you are skeptical about how Agility CMS and Vercel work in tandem.

If you’re looking into using any other integration tools like Zapier, feel free to check out this guide.
Also, if you want to integrate Agility CMS with GraphQl, this article will help guide you through it.

When you are ready, and if you are interested, you can sign up easily and quickly for both a free Agility CMS account and a free Vercel account. Our free tier also comes with the Next.js boilerplate to enable quick deployment of your media content.

Curious to know what the top headless CMS is for 2022? check out this list.

Using GraphQL with AgilityCMS

Blessing Krofegha — Wed, 21 Jul 2021 05:23:21 +0000

According to State of JavaScript 2019, 38.7% of developers would like to use GraphQL, while 50.8% of developers would like to learn GraphQL.
Being a query language, GraphQL simplifies the workflow of building a client application. It removes the complexity of managing API endpoints in client-side apps because it exposes a single HTTP endpoint to fetch the required data. Hence, it eliminates over-fetching and under-fetching of data , as in the case of REST.

Note: This tutorial will benefit those who have worked with RESTful or other forms of APIs in the past on the client-side and want to see whether GraphQL is worth taking a shot at. This means you should have worked with an API before; only then will you be able to understand how beneficial GraphQL could be to you. While we will be covering a few basics of GraphQL, a good knowledge of headless CMSworks will come in handy.

GraphQL Basics

This article isn't a complete introduction to GraphQL, but we will define a few conventions before continuing.

WHAT IS GRAPHQL?

GraphQL is a specification that describes a declarative query language that your clients can use to ask an API for the exact data they want. This is achieved by creating a strong type schema for your API, with ultimate flexibility. It also ensures that the API resolves data and that client queries are validated against a schema. This definition means that GraphQL contains some specifications that make it a declarative query language, with an API that is statically typed (built around Typescript) and making it possible for the client to leverage those type systems to ask the API for the exact data it wants.
So, if we created some types with some fields in them, then, from the client-side, we could say, "Give us this data with these exact fields". Then the API will respond with that exact shape, just as if we were using a type system in a strongly typed language. You can learn more in my Typescript article.
GraphQL is a query language for your API, not for the database. It is database agnostic. It can be used with any database. GraphQL allows clients to query data from multiple sources in the API at one request and it allows clients to define which part of the data the client needed. Whilst providing you with such flexibility.
Let's look at some conventions of GraphQl that will help us as we continue.

THE BASICS

Operations

In GraphQL, every action performed is called an operation. There are a few operations, namely:
Query
This operation is concerned with fetching data from the server. You could also call it a read-only fetch.

Mutation

This operation involves creating, updating, and deleting data from a server. It is popularly called a CUD (create, update, and delete) operation.

Subscriptions

This operation in GraphQL involves sending data from a server to its clients when specific events take place. They are usually implemented with WebSockets.

Operation names

There are unique names for your client-side query and mutation operations.

Variables and arguments

Operations can define arguments, very much like a function in most programming languages. Those variables can then be passed to query or mutation calls inside the operation as arguments. Variables are expected to be given at runtime during the execution of an operation from your client.

Aliasing
This is a convention in client-side GraphQL that involves renaming verbose or vague field names with simple and readable field names for the UI. Aliasing is necessary in use cases where you don't want to have conflicting field names.

How to use GraphQL with Agility CMS

In order to start querying your Content from Agility using GraphQL, you'll need to authenticate your requests and set up your GraphQL API client.
To start, head over to the GraphQL IDE Playground in your Instance by going to Settings > API Keys and clicking on the Explore GraphQL API button.
You'll notice your GraphQL API URL endpoint that you'll want to update to include the following:

Your Instance GUID.
Indicate whether you want to source Published Content (Fetch) or Staging Content (Preview).
The locale you wish to retrieve content from.

Next, you'll also need to authenticate your request by adding your API Key as a header. To do this, click on the Set Headers button located on the left of the GraphQL API Playground.

Which API Key do I use?

If you're fetching Published content and have defined it by using fetch in your GraphQL API URL endpoint, be sure to use your Fetch API Key.
If you're fetching Staging content and have defined it by using preview in your GraphQL API URL endpoint, be sure to use your Preview API Key.

Click Save to save your API Key as a header in your request.

Once you've updated your GraphQL API URL and added your API Key as a header, you can click on the Reload button to reload the Docs.

Once you've reloaded the Docs, you can click on the Docs button, and you should see Root. If you click on Root, you'll then be able to see the Content queryable from your Instance.

Conclusion

So far, we have learned about GraphQL Schema definition language, basic types, mutation and query types, and how you could authenticate it with your AgilityCMS instance. Now you will be able to create a basic schema with mutations and queries.

Why Headless CMS needs Page Management

Blessing Krofegha — Thu, 17 Jun 2021 05:33:14 +0000

Introduction:

One of the most significant features of a content management system is that it allows non-developers to update the material. I believe we can all agree that we don't want our engineers to spend their time creating content (or copying and pasting it).
Most headless CMS avoid "page management." They say that because the content is separated from its presentation, "pages" cannot be managed because they are only designed for a single output - your website. While this is correct, it misses the reality that your website is the primary anchor for online material, which necessitates a particular instance.
However, one of the most common activities that editors require assistance with when working with a Headless CMS is generating pages, arranging sitemaps, and re-ordering components on a page. This, however, does not have to be the case.

The major advantage of headless CMS is that it allows you to maintain a complex content architecture across various digital sites in a much more flexible and efficient manner.
This paradigm is a major reason why people use headless CMS to deliver content to mobile applications, websites, smartwatches, AR/VR, and other devices.
Most headless systems, on the other hand, reject the idea of "page management," claiming that the separation of information from its presentation precludes the administration of "pages," as they are only meant for a single output, which the concerned website. While this is correct, it misses the fact that your website is the primary anchor for online information, and therefore requires a specific scenario.

What is Headless CMS?

There are several types of headless CMSs. Some call themselves API-first, others content-first, and there are several additional variants of the headless trend. However, there is a flaw in the way headless CMSs work.
Most of them can manage the content storage and delivery that makes headless so appealing. These platforms acknowledge the importance of distributing information via outlets other than traditional websites. This is feasible due to the ability to connect to APIs and distribute them to any front end. However, headless CMSs do not cater to the people who create this content - the editors and marketers.

In contrast to a typical CMS, a headless content management system is completely divorced from the presentation layer or frontend, which is referred to as the "head." At the same time, the backend is your content repository and content management system, also known as the "body."
When you remove your content repository's "body" from its display layer's "head," you have a headless CMS. What distinguishes a headless CMS from a typical CMS is its content-first approach, which includes full APIs for accessing and displaying material in any way preferred.

A headless CMS allows you to create your content via the RESTful API and send it anywhere you need it, not only to a templated website or application.
Because a pure headless CMS does not create any frontend code, it is also referred to as "Content-as-a-Service" (CaaS).
This approach yields the greatest digital experience for the end-users of a certain device. Frontend developers may continue to create new features for any channel, regardless of the core/backend CMS.

Headless CMS Without Page Management

A developer often pre-determines all of the pages and routes on your site at the outset of website creation so that they can subsequently construct the content types to reflect them.
But what about future pages? I'm not talking about just adding new blog posts or articles here (they are list items, not pages), but rather about adding genuine new pages to the site, maybe nested under other pages. What about landing sites, new lines of business, and so on?

The second issue arises when we have a large number of pages that we wish to add to our website. If we have to develop a new content type to express it, we'll have a lot of content kinds to specify. Some CMS systems restrict the number of content types available, charging overages when a particular threshold is reached. That's a constraint in and of itself, but the greater issue here is who is performing the work: developers.
When we predefine our pages ahead of time, a developer must undertake the effort of actually coding those routes.
Then they must map those routes to the previously established content categories. Not only is it a lot of effort, but it also means we have to enlist the help of a developer every time we want to create a new page!
There is an easier method.

What is Page Management?

A headless CMS is essentially a content repository that stores material for usage across many channels.
This is insufficient for today's marketer and restricts the organization's overall potential.

While simple content definitions are a useful place to start for most developers and architects, they don't scale effectively.

That is why built-in page management is so popular nowadays.
Page management enables editors to generate and manage content by utilizing reusable building pieces referred to as modules.
Using these construction pieces, editors may manage their site's page tree, adjust SEO, and define content connections and page functionality.
Developers may also control which modules editors may add, where they go, and what they do.
Page management also involves page templates. Developers build templates to limit the types of information that may be shown on your website, providing editors the ability to change them while maintaining consistent output. Each page template contains content zones where editors may drag and drop components.

Why Headless CMS needs Page Management?

One of the main benefits of a headless CMS is that it enables companies to build a modern content architecture across different digital platforms and devices. Headless CMSs allow content teams to compose once and then publish everywhere, sending content to every platform and device customers are using.
However, while headless CMSs give you robust functionalities, some vendor claim that the separation of content and presentation that characterizes the headless architecture makes the concept of page management obsolete.
Websites are pretty much the anchor for every business and ought to be special care for the contents' architecture.
Amongst others, avoiding duplicate content is a clear advantage because it increases reliability and decreases administrative burden (you don't have to cope with duplicated content across multiple channels).
Let’s recap this one day in a life of a content editor from a typical marketing team:

I need to create a new landing page specifically for the press. It will have the same content layout as the home page, but just different content.
I need to be able to set the SEO properties for each page such as Meta Tags and Meta Descriptions.
On the home page, we want the YoutTube video to be BELOW the Main Rich Text, but on our press page, we want the YouTube video to remain ABOVE the Main Rich Text.
Our CEO doesn't like it, can we have the YouTube video ABOVE the Main Rich Text area on the homepage again?

The instances above demonstrate that the editor's requirements are hard to foresee. It's not their fault; it's simply the way the game is. Several changes occur when managing the material.
Because not using Page Management for your digital solution makes it inflexible for editors, developers spend the majority of their time accepting orders, tweaking existing code to accommodate content needs, and wishing they were doing anything else! Developers should not be required to participate in content modifications.
So, what does all of this mean in the end?

Editors cannot create/manage pages on their own without a developer
Editors cannot control which components are on each page
Developers get bored or burnt out
More development resources/expenses required
Productivity on the website suffers

And, who's at fault in this? I'll give you a hint, it's not the editor, and it's not the developer... It's the architecture!

The Benefits of Headless CMS with Page Management

Using Page Management, you can provide editors the ability to develop and manage pages for your digital solutions by utilizing reusable building blocks (i.e. modules & page templates).
Content editors may use page management to control your site's page tree, page-level SEO characteristics, and what content and functionality will be on each page.
As a developer and architect, you retain complete control over which page templates are exposed to the editor, where modules may be placed on the page, and what the modules may accomplish.

To summarize the advantages of Page Management:

Empowered editors who can do more without a developer
Happier developers who can focus on new functionality and enhancements, and less time responding to new content requirements
Increased productivity
Fewer resources/expenses required

The Elements of Page Management

While checking out Headless CMS vendors, the following are some elements you should consider. However, in this article, we would be using Agility CMS as a reference because they do have robust support for page management.

There are three things to consider during development, there are;
Page templates, module definitions, and digital channels and sitemaps. Let's take a look at these three elements.

Page Templates: Templates allow developers to determine a name and a set of modules where content editors can add content. Developers can also write code to render this template into an HTML document.
Modules: Modules are reusable fields from a header to more complex UI elements such as a sliding image carousel. In short, modules are the building blocks that enable complex websites.
Digital Channels and Sitemaps: A sitemap is a content structure that developers use to render the website. In Agility CMS, websites have one or more sitemaps defined, each in its channel, enabling multi-site management and granular control over each digital property.

These three things are the bedrock of potential page management headless CMS.
In the next section, we would look at how Agility CMS handles pages.

Which Headless CMS have Page Management?

According to G2 Crowd Headless CMS grid, there are 3 leaders in this space. Let’s review their Page Management options.

Agility CMS

Agility CMS is the pioneer in this space. Agility had Page Management from the very beginning since 2003, it is not a recently added feature.
With Agility CMS, you can define three things that make Page creation and editing simple:

Page Templates: Templates allow developers to determine a name and a set of modules where content editors can add content. Developers can also write code to render this template into an HTML document.
Modules: Modules are reusable sets of fields that can go from a header to more complex UI elements such as a sliding image carousel. In short, modules are the building blocks that enable complex websites.
Digital Channels and Sitemaps: A sitemap is a content structure that developers use to render the website. In Agility CMS, websites have one or more sitemaps defined, each in its channel, enabling multi-site management and granular control over each digital property.
URL Management: create redirects, test them, and do bulk edits right in the CMS
SEO Fields: define meta keys words and Mets descriptions, page names and decide if pages need to be shown in your sitemap right in the CMS.

The main thing about Agility CMS is that instead of coding and routing each page individually, developers now have to code only a few page templates and modules. These templates can be reused across the website, sharply reducing the amount of work that developers need to do from the beginning.

The cost of Page Management with Agility CMS

Page Management is included as a default feature on all Agility CMS pricing packages incl. a free Developer plan. It is FREE and you don’t need to pay extra to use it.
Agility CMS paid plans to start at $490 for Business Pan.

Contentful

Compose is a brand new application by Contentful that allows you to build and publish web pages in a few steps.
Compose is a streamlined version of the Contentful web app that is designed specifically for editors and authors who don’t want to mess around with the more technical aspects of Contentful. Unlike the web app, Compose does not require content modeling knowledge. Instead, editors can assemble pages from predefined content components and media, without involving additional engineering resources.

Compose experience is not the same as using Contentful with Page Management and characterized by the following:

Compose is used for the quick creation of web pages.
Pages and fields are predefined and do not require extra setup.
The hierarchy of the page building blocks is displayed in a single editing view.
Entries can be published all at once with a single click.

The cost of Page Management with Contentful

For Team users, Compose + Launch can be added to all spaces within your organization for $1,995/month. The apps are available for a free 10-day trial, which will create a test space that allows you to test Compose + Launch without impacting the content or operations of your normal spaces.
Contentful Team plans start at $499.

Kontent

Recently, Kontent offers Web Spotlight as their Page Management feature.
Web Spotlight combines in-context website management with the flexibility and multi-channel support of a headless CMS.

Web Spotlight makes it easy to create pages, add content, and rearrange components without any help from developers. Once you’re done, add the page to your navigation so all visitors can find it. With this feature, you can update content right within the pages of your websites. Changes can be made in seconds, without wondering how everything will look once it's published.
The cost of Page Management with Kentico Content
Web Spotlight is not included for free, you can add to your plan for $499/month. Kentico Plans start at $1249 for Business and $2,499 for Premium.

Conclusion

Headless CMS is the future of content management, with a clear shift away from traditional CMS and toward Jamstack API-based design.
Headless CMS is no longer exclusively for developers.
Headless CMS systems that empower content producers while freeing up developers' time are required by both enterprise teams and marketing experts.
This is where Page Management enters the picture.
Content editors may use page management to build and move pages across the sitemap in any way they see appropriate, as well as add modules to websites and update the properties of these modules.
No matter how complex a headless CMS vendor package looks to be, it's critical to know if page management is a function they take seriously, especially if you want your website's pages and contents to be dynamically organized.
Page Management is available in all three Headless CMS leaders, Agility CMS, Contentful, and Kontent. Agility CMS includes it as a standard feature on all plans, even the free one. A Page Management add-on costs $499 per month from Contentful and Kontent.

Resources

Page Management in Headless CMS

Blessing Krofegha — Fri, 16 Apr 2021 13:09:20 +0000

Introduction:

Almost ten years ago, National Public Radio's (NPR) Daniel Jacobson guest blogged at programmableweb.com about their approach, summed up in the acronym COPE, which stands for "Create Once, Publish Everywhere."
This article would introduce you to a content management system providing content to multiple digital interfaces through an API — not through an HTML rendering machine — as most CMSs at the time (and arguably now) did.

The main benefit of headless CMS is that it provides a much more flexible and efficient way to maintain a sophisticated content architecture across multiple digital properties.
This paradigm is a significant factor in why folks choose headless CMS to send content to mobile apps, websites, smartwatches, AR/VR, etc.
However, most headless platforms eschew the concept of "page management" because they claim that the separation of content from its presentation disallows the management of "pages," as they are only intended for a single output, which the concerned website. While this is true, it also ignores that the main anchor for online content is your website, and it needs a particular case.

In this article, I'll introduce you to the dynamics of page management, the benefits, and why you should look out for a page management feature in any headless CMS vendor you decide to use

Why Page Management?

One of the main benefits of a (headless CMS)[https://buttercms.com/blog/what-is-headless-cms] is that it enables companies to build a modern content architecture across different digital platforms and devices. Headless CMSs allow content teams to compose once and then publish everywhere, sending content to every platform and device customers are using.
However, while headless CMSs give you robust functionalities, some vendors claim that the separation of content and presentation that characterizes the headless architecture makes the concept of page management obsolete.
Websites are pretty much the anchor for every business and ought to be special care for the contents' architecture.
Amongst others, avoiding duplicate content is a clear advantage because it increases reliability and decreases administrative burden (you don't have to cope with duplicated content across multiple channels).

Benefits of Page Management

With Page Management, you can create and manage pages for your digital solutions using reusable building blocks (i.e., modules & page templates).
You can manage the site's page tree, page-level SEO properties and determine what content and functionality will be on each page.
The following are the benefits of page management;

It empowers editors who can do more without a developer.
Happier developers who can focus on new functionality and enhancements, and less time responding to new content requirements
Increased productivity
Fewer resources/expenses are required.

The Elements of Page Management

There are three things to consider during development, there are;
Page templates, module definitions, and digital channels and sitemaps. Let's take a look at these three elements.

Page Templates: Templates allow developers to determine a name and a set of modules where content editors can add content. Developers can also write code to render this template into an HTML document.
Modules: Modules are reusable fields from a header to more complex UI elements such as a sliding image carousel. In short, modules are the building blocks that enable complex websites.
Digital Channels and Sitemaps: A sitemap is a content structure that developers use to render the website. In Agility CMS, websites have one or more sitemaps defined, each in its channel, enabling multi-site management and granular control over each digital property.

These three things are the bedrock of potential page management headless CMS.
In the next section, we would look at how Agility CMS handles pages.

How Agility CMS Handles Pages

As mentioned in the previous section, let's look at how Agility CMS cares for pages or content in this section;
Agility CMS allows you to define three things that make working with pages accessible for both content editors and developers to work. Developers set up the templates and definitions, while content editors determine how and where they want to use those templates and definitions. This part of the content architecture is fundamental to the success of any CMS solution that includes a website.

Page Templates

It allows a developer to determine a template name and a set of module zones that content editors can drop content into using modules. The developer can then write code in the website to render this template into HTML.

Module Definitions

Modules are the building blocks that enable a content editor to create a complex website structure with tools the developer has set up to succeed.

It allows a developer to define a set of fields to render a reusable item inside a template module zone. It could be a header with a description generated as an <H1> and an <P> element. It could be a complex user interface component, such as a slider carousel, contact form, or blog posts listing.
The developer has the choice of what properties the content editor will have to work. These can be simple text, number, or date fields; they can add image or file attachment fields or link to other content defined elsewhere, such as shared content. What's more, those shared content items or lists can then link to other shared content as well!
Fantastic isn’t it?

Digital Channels & Sitemaps

Each Agility CMS website can have one or more sitemaps defined, each in its digital channel. It can use each digital channel to control a separate digital property. It could, for example, be for a contest or a completely different branded site.
Essentially a sitemap is a nested content structure which the developer will use to render on the website. Giving the content editor the control to manage multiple page content channels is a compelling and cost-effective way to manage content.

Shared Content is Vital

Agility believes in a "content first" approach to designing your content architecture, and that starts with the shared content section in their suite. It is where all your main lists and items will live, and this is where you'll create most of your content that is reused across multiple destinations or endpoints, such as your app, social networks, etc.
However, the pages section is often the first place to find the content they are working on. Your content teams' primary responsibility is the website itself, and seeing what page something on makes sense to people.

Conclusion

In this article, we took a brief dive into the benefits and elements of page management and why one(a developer or editor) should be interested in such a feature as an avenue to create and dynamic content without stress.
No matter how sophisticated a headless CMS vendor package appears, it's essential to know if page management is among their feature they take seriously, especially if you desire to have the pages and contents of your website dynamically structured.
You can also try Agility CMS for (FREE)[https://agilitycms.com/product/pricing] and spin a new instance with our (Gatsby starter)[https://agilitycms.com/resources/posts/gatsby-cloud-announces-their-new-partnership-with-agility-cms].
Let me know what you feel in the comment section below about using page management in a Headless CMS.

Resources

(How to Design A Content-First Strategy using Agility CMS)[https://agilitycms.com/resources/guide/how-to-design-a-content-first-strategy-using-agility-cms] - Agility CMS
(Strategies For Headless Projects With Structured Content Management Systems)[https://www.smashingmagazine.com/2018/11/structured-content-done-right/] - Knut Melvær

Integrating Headless CMS with Zapier

Blessing Krofegha — Wed, 03 Mar 2021 13:40:50 +0000

Introduction:

One of the enormous problems I've faced while working on projects is having to deal with integrating content and events into third-party services.
It's time-consuming, demands in the application in question grow, so does the mental strain in keeping up to pace with all the changes in the REST APIs involved. If that wasn't challenging enough, customer demands to integrate with all sorts of third-party services can (if left unchecked) be unsustainable in the long-run.

Zapier: The integration helper

Zapier is a web service that automates data flow between over 500 web apps, including MailChimp, Salesforce, GitHub, and Trello.

Imagine building an application that triggers when a user fills out your Typeform form, then automatically creates an event on your Google Calendar, sends a Slack notification, and finishes up by adding a row to a Google Sheets spreadsheet.
Writing all those functionalities from scratch is overkill and can be time-consuming. In such cases, Zapier comes in extremely handy.

For engineers tasked with writing manual integrations or reverse engineer some task, thinking about solving the same problem with Zapier cuts down most of the work they probably need to do.
The reason being is that instead of having to deal with parsing and validating JSON schemas and having to generate request payloads manually, all of this is handled by Zapier's internal integrations, removing the need to develop and maintain code for every REST API.

In terms of Content Management, this can be incredibly useful for managing the flow of content across various channels, including other CMS systems.
For example, Agility CMS already has a modern-webhook system that integrates exceptionally well with Zapier's back-end system (and here).
Because of this, all of the changes made on Agility CMS are available nearly instantaneously* via Zapier's ability to integrate with subscriber RestHook systems. It's essential for ensuring that all the various channels receive the new content the moment they become published.

This article would use Agility CMS as a case study because of its seamless integration with Zapier and Its other exciting features that other headless CMS might not have.

Connecting with Agility CMS

For this tutorial, we will be using Agility CMS as our case study.
When you create an Agility CMS Zap, you'll need to enter your Agility CMS API key along with some other required fields.

To locate your API Key in your Agility CMS account, please follow these steps:

Log into the Agility Content Manager.
Click on "Settings" on the left-hand Navigation
Choose "API Keys"
Click the "Copy" button beside each of the authorization values and paste into the appropriate field.

Paste your key back into your Zapier account and then “Continue.”
If all steps were successful, your Agility CMS account will now be successfully connected.

Conclusion

Agility lets you integrate your content into almost any website and application due to the flexibility it has in regards to how you do so (REST endpoints, Webhooks), and now with Zapier integration, it can integrate with so much more!
If you have any comments or questions about building apps with Agility CMS, reach out to them on Twitter.

Fullstack CMS with NextJS and AgilityCMS

Blessing Krofegha — Wed, 20 Jan 2021 06:57:56 +0000

In the dispensation of frameworks and stacks, a ton of awesome stacks such as MERN, LAMP, MEAN and MEVN stack have been released over the years to simplify the work of a developer in the quest to create scalable and efficient applications. However, quite a lot of them (MEAN, LAMP) impose a very strict learning curve and often times demands more costs to scale and maintain, while this is great it might quickly get tiresome for a startup or a low-level budget project.
This is the reason why a combination of NextJs and headless cms like AgilityCMS is considered to be a good choice for building 21st -century web application.

With NextJs, a client-side and server-side based framework, it ensures all your code is bundled and minimized using a bundler like webpack, it makes implementing optimizations like code splitting to improve page performance.
For frontend developers that love typescript, all you would need to get them started is a few lines of config in tsconfig.js.
Interestingly, Nextjs pre-renders pages by default. This means every page will use static site generation by default, one of the two rendering options that make up the hybrid architecture of Next.js.

Agility CMS on the other note is a JAMStack focused Headless CMS with Page Management built-in. Agility CMS is a Content-First Headless CMS, allowing you to choose any programming language while also getting the flexibility, speed, and power that comes from lightweight APIs. It comes with a Page Management feature, that allows you to manage your website pages.
Agility CMS will come in very handy if you’re working on an eCommerce, Online Ticketing oriented projects, and even more.
The editor experience on AgilityCMS is so amazing, such that’s lacking in other headless cms.
Agility CMS is a complete Digital Experience Platform–saving time, removing limitations, and allowing for seamless experiences across all digital channels.

In this tutorial, you’ll learn how and what it takes to build a full-stack project maximizing NextJs and AgilityCMS, with a little learning curve and minimal cost.
In the end, you would be comfortable building your next full-stack project without having to worry about what full-stack framework you would be needing.

Why Agility CMS?

Maybe you are not quite ready to get started with Agility CMS yet, or you have not convinced to embrace the goodies that come with Agility CMS.
Allow me to give you a few reasons why you may want to consider Agility CMS.

Limitless Headless CMS

Use Agility flexible, extensible, API-first platform to create next-level digital experiences using any coding language or front-end framework.

Use Any Programming Language
- The Agility CMS approach embraces any programming language or frameworks. Nextjs, Gatsby, Vuejs, Nuxt, and Eleventy.
Page Management
- One of the main benefits of the Agility CMS Content API and the accompanying SDKs is Page Management. This does not refer to HTML pages on a website, but rather the JSON objects that represent all of the information on a page. Agility CMS allows your content editors to assemble the page object based on a template and set of modules, and then you can render that content using components in code. These components are reusable, allowing your developers to spend more time coding new functionality instead of re-creating existing features on new pages.
Restful API
- The Javascript is essentially an ease-of-use layer on top of the raw REST API. If you are building a mobile app, or if you need to use a language other than Javascript, you can call the REST API directly. You can learn how to do this on our help site using our reference guide.
Multiple Front-End Integrations
- Agility CMS provides a Javascript SDK and a zero-config starter kit for Nextjs, Gatsby, Vuejs, Nuxt, and Eleventy, to help you get up and running. The SDK provides async method calls for all of the various areas where you need to pull data: shared content, content items, pages, sitemaps, and galleries.
Each method call requires you to provide a GUID and API Key as authentications. You can also specify which language code you need content in, making multi-lingual sites easy to build.
Content Sync SDK
- The Javascript SDK also includes methods to synchronize the content items and pages in your Agility CMS Instance. These calls allow you to pull everything you need down to your web server and to persist it locally. Syncing content and pages can greatly speed up your build time and will reduce the number of API calls you need to make.
WebHooks
- Agility CMS has content webhooks that allow external applications or websites to become aware of content changes that occur within your Agility CMS instance. This works by providing a list or URL endpoints to Agility CMS. Each time content changes in the CMS, Agility will notify each endpoint of the change and pass-on a message representing the exact change that occurred. To get started check here.

Building with Nextjs and Agility CMS

I guess you’ve come to the phase you’ve been waiting for.
Olga, in this post, explains extensively how easy is it to build a full-stack project using Nextjs and AgilityCMS.
The post is a walkthrough of a shopping list built using Nextjs, snipcart, and AgilityCMS. At the end of the post, you’d have a full grasp of how to practically build a full-stack app in minutes maximizing AgilityCMS and Next.

Eslam wrote a concise article on Prefetching and dynamic routing with Next.js and Agility CMS. In this article, he built a full-stack blog using the prefetching and dynamic routing in Next and the content creation and retrieval feature in Agility CMS. This article portrays the dynamic relationship between Agility CMS and Nextjs.

Deploying to Vercel

I suppose you’ve gone through the articles in the previous section, if you haven’t I urge you to go through them.
Now that you’ve well understood how Agility CMS and Nextjs work seamlessly together, and easy deployment is something you want.
The good news is Agility CMS has a straightforward built-in-integration with vertical.

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host websites and web services with a few clicks.
The most interesting thing is that vercels free tier is a perfect choice for a starter project and even a larger project
Vercel is the company responsible for creating Nextjs.

The Agility CMS Manager facilitates the process of deployment, here’s how it works.

“You will need to have a GitHub and a Vercel account to get your project deployed”.

To start, in your agilitycms dashboard, head by going into Settings > Domain Configuration, and add a new Domain”.

Click on Setup to connect to Vercel and deploy your Next.js website.

Give your project a name. It will be cloned from agilitycms-nextjs-starter repository.

Copy the agilitycms-nextjs-starter into a new Git repository. This will ensure you can make updates to your project after deployment. Every push to the Git repository will automatically be deployed.

When your deployment is done, authorize access between Vercel and your Agility CMS content so that we can automatically configure your Production and Preview domains.

Once authorized, you will be taken back into your Agility CMS Manager, and you will see that your Production and Preview domains have been set. You can click on the link to view your live site.

🎉 Congratulations! You've successfully deployed your Next.js and Agility CMS website to Vercel!

Sites built with Agility CMS

Conclusion

I hope you enjoyed this article.
We looked at the uniqueness of Agility CMS and how we could use both Nextjs and AgilityCMS to build a full-stack project, deploy the project for free to vercel with a few clicks.
You would agree with me, that process of building a full-stack application with from development to deployment is much easier than the conventional process of adopting a LAMP or MERN stack.
Let your creativity flow, and please do share your projects in the comments section below — I’d love to see what you come up with!

Resources

Prefetching and dynamic routing with Next.js and Agility CMS - Eslam
Building a full-stack shopping list with Agility CMS, Next.js & Snipcart - Olga
Introduction to Agility CMS - Opemipo Disu

Top 10 JAMstack CMS In 2022

Blessing Krofegha — Fri, 04 Dec 2020 12:54:35 +0000

Google has been improving its Javascript crawling and rendering capabilities. This has influenced more and more developers to experiment with the JAMstack architecture to build faster, less bloated websites that please both search engines and visitors.

Also, as search engines prioritize speed as one of their top ranking factors, static, pre-rendered websites, like those you can build using a JAMstack CMS are emerging as one of the main tools in a modern developer’s toolbox.

In a previous article, we highlighted some of the pioneers in the JAMstack ecosystem and the opportunities JAMstack brings for both developers and marketers. In this one, we will talk about ten JAMstack-ready CMSs worth looking at as you plan for 2021 and beyond.

Headless CMS 101

The headless CMS architecture is gaining momentum in the development world, and it’s not a surprise why. A headless CMS enables developers and marketers to build better digital experiences faster, and at a fraction of the cost.

Headless CMSs take a different approach to web development when compared to traditional CMSs. In general, headless CMSs care about the data first and the design second, which means that all the content you add to the CMS exists independently from the website in data structures connected by APIs. These APIs drive and deliver content to any channel and device, which makes headless CMSs the go-to architecture for companies and brands looking to deliver omnichannel experiences.

Why JAMstack?

The JAMstack architecture gives developers a new way of developing software that leverages static rendering at the client-side. By rendering the content in the browser, static websites can access a pre-rendered HTML file (cached ahead of time) to display content quicker.

One of the main advantages of developing software in the JAMstack ecosystem is that each tool you use, each API you call, and the Javascript framework you build on, are connected and work in sync with each other. Therefore, you don’t have to juggle technologies and face compatibility issues when making a site.

Read More: The Meteoric Rise of JAMstack

Top 10 JAMstack CMSs

JAMstack is all about giving frontend developers the tools to architect and build fast digital experiences. Also, when you add a JAMstack-ready CMS to the equation, you gain marketer friendliness, better editing options, increased functionalities, and community support.

Let’s take a look at our top 10 picks of JAMstack CMS.

Agility CMS

Agility CMS puts content at the front and center of the development process. By taking a content-first approach, Agility CMS empowers users to build digital experiences faster than other JAMstack-ready CMSs in the market.

Overview

On the JAMstack side of things, Agility is one of the few JAMstack headless CMSs with page management built-in, which allows developers to choose which properties the content editors will work with, simplifying content editing. Also, Agility CMS enables you to select any Javascript framework and set it up with static site generators like Gatsby and NextJS.

Agility CMS is best for content editors who want an omnichannel approach.

Strapi

Strapi is an open-source headless CMS based on Node.js. Strapi uses GraphQL to fetch and query data and deliver content across channels faster. Strapi offers users role-based access control, a substantial media library, and a pleasing UI.

Overview

When it comes to JAMstack development, Strapi integrates seamlessly with most static site generators on the market, enabling developers to create all kinds of digital content that can be extended using plugins.

Strapi is good for front-end developers with Javascript skills.

Contentful

Contentful shuns templates and fixed content structures aside, giving developers the tools to organize and structure the content their way. Contentful focuses on providing users with the tools to build custom content models for maximum customization.

Overview

One of the most stable features of Contentful for JAMstack developers is that the CMS is built on a solid CDN. Content is closely tied to JSON, which means that it delivers content in markup format ready to be consumed by static site generators and different channels for a true omnichannel strategy.

Contentful is good for developers familiar with HTTP requests and JSON responses.

DatoCMS

DatoCMS offers users enhanced digital asset management using AI-powered content tagging and improved search capabilities. Dato also comes with a powerful image editor that enables the manipulation of content on the fly.

Overview

From a JAMstack perspective, DatoCMS gives developers the ability to create tree-like data structures with ease and simplify content editing. DatoCMS also helps users decide how the administrative area looks, so the platform looks clearer for everyone.

DatoCMS is good for image-rich websites that need specific roles and permissions systems.

Prismic

Prismic enables users to build all kinds of digital experiences. From wikis to blog posts to marketing pages and web applications, Prismic delivers content that can be previewed in build time.

Overview

From a JAMstack perspective, what makes Prismic a contender is how they use content slices to define dynamic content zones within a page, giving editors the freedom to compose experiences the way they need. Also, the fact that they include out-of-the-box content localization makes them a reliable JAMstack-ready CMS.

Prismic is good for creating and editing multilanguage sites.

Contentstack

Contentstack empowers non-technical users to create and optimize omnichannel content experiences while also giving developers the tools to build robust frontend systems to distribute this content across devices and platforms.

Overview

Contentstack is another strong contender to consider when it comes to JAMstack CMSs. Contentstack gives users robust content modeling capabilities and enables seamless integration with static site generators to create all kinds of digital experiences in almost no time.

Contentstack is good for projects with custom content models or complex page structures.

Netlify

Netlify is a tech-agnostic tool that automates the build and deployment process of websites and applications. Netlify simplifies the process and automatically deploys the changes to its custom CDN, which means that all you need to make it work is your frontend tool of choice and a git repository.

Overview

Since it was its founder who coined the term JAMstack, there wouldn’t be a JAMstack ecosystem without the tool. All sites built on Netlify are prebuilt, which means that they load faster and are deployed directly to a global edge network without users having to do anything different than their regular workflow.

Netlify is good for developers who need to build and deploy production sites quickly.

Cosmic

Cosmic is a cross-compatible, extensible headless CMS that integrates JAMstack capabilities and gives developers starters to simplify development and cut production times. Cosmic offers users dozens of templates to build everything they need, from a simple portfolio site to Android apps.

Overview

Cosmic has a vibrant user community that gives users a place where they can learn from each other and use that knowledge to enrich their digital experiences and the platforms they build. Similarly, Cosmic allows users to upload their own starters, adding to the pool of templates they offer to new users.

Cosmic is good for users who need a reliable website starter.

Directus

Directus enables users to manage content and digital experiences by connecting SQL databases and deploying the data using an intuitive platform that also caters to non-technical users in an unrestricted environment.

Overview

Directus is an open-source, database-first CMS that enables users to connect different SQL databases using APIs. Also, Directus leverages JSON markup language to give users complete control of how the content is produced, deployed, and consumed.

Directus is good for users who need extensive SQL support.

Sanity

Sanity allows users to edit structured content in an open-source platform that can be quickly customized with Javascript, enabling users to use the JAMstack architecture and build digital experiences using any Javascript framework. With Sanity, editors can alter structured content and use it as regular data with ease.

Overview

From a JAMstack perspective, Sanity is a reliable choice as it enables users to distribute content from a single source of truth, approach workflow, and design programmatically, and query images for metadata, enabling better content tagging and enhanced integrations with any DAM.

Sanity is good for teams using markup languages and structured content.

So, What’s The Best JAMstack CMS?

The truth is that while most JAMstack CMSs are similar, they’re built with specific capabilities and use cases in mind. Some are made with developers in mind and others, like Agility CMS, are built to cater to both developers and editors, giving users the best of both worlds.

What constitutes the best JAMstack CMS varies from one company to the other, but regardless of which CMS you choose, you need to have a clear understanding of your priorities and where your business is heading in order to reap the benefits of the JAMstack architecture.

If you have doubts on how the JAMstack architecture can help you become more agile, watch this webinar Using JAMstack with Agility CMS or YouTube.

Creating Desktop Apps with ReactJS using Tauri

Blessing Krofegha — Thu, 30 Jul 2020 16:26:30 +0000

Introduction

Building desktop apps use to be difficult, first, you would need to know quite a number of languages like Java or C++ and get buried to quite a number of setups which can be wearing. Thankfully as technology progressed, frameworks like ElectronJS came into the picture and simplified the process.
In this article, I’ll introduce you to Tauri, A toolchain for building native desktop apps using any HTML and JavaScript-based front-end framework, such as React, Vue.js, or Angular.

This article will be useful to you if:

you’ve been building a web or mobile application and want to see how you could create a desktop app with React.Js.
you have been building applications on the web with HTML, CSS, and JavaScript, and you want to use the same technologies to create apps targeted at Windows, macOS, or Linux platforms.
you are already building cross-platform desktop apps with technologies like Electron, and you want to check out alternatives.
you are a Rust enthusiast, and you’d like to apply it to build native cross-platform applications.

We will look at how to build a native cross-platform application from an existing web project. Let’s get to it!
Note: This article assumes you’re comfortable with HTML, CSS, and React.Js.

What is Tauri.js?

The Official Tauri site describes it as;

A framework for building tiny, blazing-fast binaries for all major desktop platforms.
It allows a rust-sourced binary with an API that the front-end can interact with.
Built with Rust and the CLI leverages Node.js, hence making Tauri a genuinely polyglot approach to creating and maintaining great apps. Polyglot in this context means that Tauri uses multiple programming languages such as Rust, JavaScript, and TypeScript.
A Framework-agnostic toolchain for building highly secure native apps that have tiny binaries (i.e. file size) and that are very fast (i.e. minimal RAM usage).

Simply put, Tauri makes you utilize web technologies to create smaller and secured native desktop apps.

Electron Vs Tauri: Their differences

Electron Js has been around for a while now and as even made mass adoption amongst developers and great companies like Atom, Vscode, and more. In this section, we would compare some features that make Tauri distinct from Electron Js.
This table is from it’s Github page.

Features	Tauri	Electron
Binary Size MacOS	0.6 MB	47.7 MB
Memory Consumption MacOS	13 MB	34.1 MB
Interface Service Provider	Varies	Chromium
Backend Binding	Rust	Node.js (ECMAScript)
Underlying Engine	C/C++	V8 (C/C++)
FLOSS	Yes	No
Multithreading	Yes	No
Bytecode Delivery	Yes	No
Can Render PDF	Yes	No
Multiple Windows	Soon	Yes
Auto Updater	Soon	Yes
Cross-Platform	Yes	Yes
Custom App Icon	Yes	Yes
Windows Binary	Yes	Yes
MacOS Binary	Yes	Yes
Linux Binary	Yes	Yes
iOS Binary	Soon	No
Android Binary	Soon	No
Localhost Server	Yes	Yes
No localhost option	Yes	No
Desktop Tray	Soon	Yes
Splashscreen	Yes	Yes
Sidecar Binaries	Yes	No

We see from the above table that despite the fact that Tauri is pretty new it has some amazing features and even more, while others are in the pipeline.

Benefits of Tauri

The following are the reason you might want to consider using Tauri in your next Desktop app.

It’s compatible with any JavaScript framework, hence you don’t have to change your stack.
Its variety of design patterns makes it possible to get started with implementing features with easy configurations.
Like you saw from the above table, the size of a Tauri app is just 0.60 MB (600 KB).
Also, the memory consumption of a Tauri app is less than half of an Electron-based app. From the table, it is usually about 13 MB.
Unlike Electron, relicensing is made possible with Tauri. Apps built with Tauri can be officially shipped into PureOS.
The flexibility and framework agnostic ability of Tauri makes it possible to turn a web-based code-base into a native desktop app, without altering anything.

Tauri in Action!

Tauri uses Node.js under the hood to scaffold an HTML, CSS, and JavaScript rendering window as a user interface (UI), majorly bootstrapped by Rust.
The outcome is a monolithic binary that can be distributed as common file types for macOS (app/dmg), Windows (exe/MSI), and Linux (deb/app image).

How Tauri Apps Are Made

A Tauri app is created via the following steps:

First, make an interface in your GUI framework, and prepare the HTML, CSS, and JavaScript for consumption.
The Tauri CLI takes it and rigs the underlying native code(Rust runner) according to your configuration.
In development mode, it creates a WebView window, with debugging and Hot Module Reloading.
In build mode, it rigs the bundler and creates a final application(native installers) according to your settings.

Check out more of its operation on Its site.

Setting Up Your Environment

Now that you know what Tauri is and how it works, let’s do the setups.
We will not be covering environment setups for any OS in this tutorials, but you can check the setup for Windows, macOS, and Linus are also available,
For those using the Windows Subsystem for Linux (WSL) please refer to it’s Linux specific instructions instead.

Implementing Tauri With React.JS

Now that we have Tauri installed, let’s bundle an existing web project.
For this application, we would be using a Money Heist Episode Picker I built with React and Typescript. Read how I built it here.

https://codesandbox.io/s/money-heist-episode-picker-react-and-typescript-web-app-px1qe

Go ahead and fork the repository, which will serve as a shell. After forking it, make sure to clone the fork by running this:

git clone https://github.com/[yourUserName]/React-Desktop-App.git

You can install Tauri as both a local and a global dependency, but in this tutorial, we’ll be installing it locally.
After cloning the project, run the following to install the dependencies:

#Using npm
npm install

#using yarn
yarn

After a successful installation of dependencies, start the server with npm start, your app should start on http://localhost:3000.

Defining Tauri

If you decide to use Tauri as a local package with npm, you will have to define a custom script to your package.json:

    {
      // Add Tauri to the script object
      "scripts": {
        "tauri": "tauri",
        "dev": "npm run tauri dev",
        "bundle": "tauri build",
    }

Tauri command - defines Tauri and tells your OS, you’re about to create a Tauri based app.
dev - It enables us to start your app on our local machine.
bundle - Running this command will build our app for production. Initialize Tauri

We will need to add an src-Tauri directory to the root of your app directory. Inside this directory are files and folders used by Tauri to configure your desktop app.
To initialize Tauri in other for us to have this folder, run;

`npm run Tauri init`

While initializing you’ll be asked a few questions, answers them based on your project scope.
Here’s how mine looks

After it’s done initializing, it will create a src-tauri directory, let’s check out the contents:

└── src-tauri
    ├── .gitignore
    ├── Cargo.toml
    ├── rustfmt.toml
    ├── tauri.conf.json
    ├── icons
    │   ├── 128x128.png
    │   ├── 128x128@2x.png
    │   ├── 32x32.png
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    └── src
        ├── build.rs
        ├── cmd.rs
        └── main.rs

Cargo.toml inside src-tauri/Cargo.toml is like the package.json file for Rust.
It contains configurations for our app. The content of this file is beyond the scope of this tutorial.

##Bundling our app

To bundle Money-Heist for your current platform, simply run this:

#builds our react app
npm run build

#builds the Tauri crates
npm run bundle

Note: The first time you run this, it will take some time to collect the Rust crates and build everything, but on subsequent runs, it will only need to rebuild the Tauri crates which is much quicker.
So go grab some chocolates while it’s building 😎

When the above is completed, you should have a binary of money-heist for your current OS.
Because of the way that Cargo builds its targets, the final app is placed in the following folder:
src-Tauri/target/release/money-heist.
Your’s might be src-tauri/target/release/bundle/[your-app].

Conclusion

In this article we have seen how cool it is to build desktop apps with React utilizing Tauri, I’d like to see what you came up with the comment section.
Lemme know what you think about Tauri.
If you enjoyed the article please let’s connect on twitter

Resources

Why You as a Developer Should be Using a CMS
Headless Commerce Explained: Definitions, Use Cases, and Roadblocks | Agility CMS
APIs vs. SDKs: What's the Difference? | Agility CMS
TOP Static Site Generators to Watch in 2021
Difference between Headless CMS and static site generator
What is Netlify and Why Should You Care as an Editor? | Agility CMS
What is a Headless CMS? | Agility CMS
Benefits of Headless CMS vs a Traditional CMS | Agility CMS
Content Architecture: The Key to Organizing and Managing Your Content and Team
WordPress And Its Alternatives: Headless CMS | Agility CMS
Open Source CMS vs. Proprietary CMS: Can You Have the Best of Both? | Agility CMS
Choosing a React CMS: What to Look For? | Agility CMS
Take control of your Content Architecture: Content Modelling
DXP vs Headless CMS: Modern DXP Architecture
Jamstack Development: 10 JAMstack Pioneers You Need To Know About in 2021

Understanding Webhooks in Headless CMS

Blessing Krofegha — Thu, 30 Jul 2020 12:27:23 +0000

Modern development has transformed communication in numerous ways. As things evolve, the desire to communicate effectively with people sets.

To attain such a communication demand we need, we need to find a way to make technologies talk to each other.
That’s where webhooks come into the picture.
Getting webhooks set up in a Headless CMS is much easier, faster, and cost-effective compared to setting it up via API approach.

In this article, we would look at how we could set up webhooks using Agility CMS, a Headless CMS that's is supercharged with JAMstack. It integrates seamlessly with modern, blazing-fast website frameworks and enables high-performance digital experiences.

This article will be useful for you if;

you know the differences between an API and a Webhook, otherwise, check this 4 mins piece
you have built real-time applications that deliver data as an event happens or immediately using API.
you are already building webhooks with 3rd party applications, and you want to check out alternatives.

We will look at how to build a real-time, event-based simple app using Webhooks in Agility CMS.
Let's get to it!

Note: This article assumes you're comfortable with the basics of Node.Js.

What is WebHooks?

Webhooks are automated messages that are sent each time an event happens. They have one unique mission: transmitting a message or data to a unique address or URL. Is a way for an app to provide other applications with real-time information. It delivers data as an event happens or almost immediately.

When to Use Webhooks

Webhooks usually acts as a messenger for smaller data. It helps to send and extracting real-time updates.

One of the most suitable scenarios for using a webhook is when your app or platform requires a real-time feature and you don't want to use an API, because you don't want to get entangled with the setups and waste resources in the process. In such instances, a webhook framework will be most beneficial.

Another best use case for using a webhook is where an API isn't provided or the available API isn't best fit to act, a webhook could be used instead in such a situation.

Webhooks can be regarded as a perfect, and sometimes even essential complement to API-based application integration.

This can be used to set up notification workflows in Slack, automatically redeploy static websites to Netlify, as well as a variety of other automation use cases.

Benefits of Webhooks

It helps for clearing and managing a custom cache in an external system such as a website, mobile application, or database.
It provides a way to sync content/data for integrations with third-party systems (i.e. Salesforce, Mailchimp, etc).
It helps when building custom content workflows.

Kick-off a CI/D pipeline to redeploy your website when content has been updated is possible with webhooks- this is often used for JAMstack sites that are built using static site generators.

Using webhooks in a Headless CMS(Agility CMS)

In this tutorial, we will see how to integrate webhooks in a headless CMS, and our choice would be Agility CMS.

Agility CMS is a JAMStack focused Headless CMS with Page Management built-in. Faster to build, manage, and deploy. Agility CMS is a Content-First Headless CMS, allowing you to choose any programming language while also getting the flexibility, speed, and power that comes from lightweight APIs. From there, you could add features like Page Management, Ecommerce, Online Ticketing, and Search. Agility CMS becomes a complete Digital Experience Platform–saving time, removing limitations, and allowing for seamless experiences across all digital channels.

Implementing Webhooks with Agility CMS

This works by providing a list or URL endpoints to Agility CMS. Each time content changes in the CMS, Agility will notify each endpoint of the change and pass-on a message representing the exact change that occurred.

How to Add a Webhook Endpoint

In order to add a webhook, you must have access to an Agility CMS instance with Content Fetch API enabled. To get started signup for free on Agility CMS.

Next, In Agility CMS, navigate to Settings > Customization/Development > Webhooks.

Click Add (+) to add a webhook endpoint.

Add your endpoint here

In the Webhook details flyout, enter the Url endpoint that you want to send events to.

For testing, we recommend using a free service such as requestbin which allows you to set up an endpoint and monitor the messages that get sent there.

After signing up/logging into their service, we get a Url we can use.
Image for post

Next, select what type of Events this webhook should be subscribed to. You can optionally subscribe to all events (Publishes, Workflow Approvals, and Content Saves) or select only the type(s) you need.

Copy the URL **given to you and paste it in your **Agility Instance webhook page.

When you are ready, click the Send Test Payload button to test your webhook endpoint. This will generate a sample request to your defined endpoint **Url **and log the result.

If you created a request bin endpoint, you can verify the payload that was sent there.

****When ready, click Save to save your webhook.

Payload Details

Page Events
On Save:

{
"state": "Saved",
"instanceGuid": "0000-0000-0000-0000",
"languageCode": "en-us",
"referenceName": "reference-name",
"contentID": 1,
"contentVersionID": 2,
"pageID": 3,
"pageVersionID": 4
}

On Publish:
Content Events

{
"state": "Published",
"instanceGuid": "0000-0000-0000-0000",
"languageCode": "en-us",
"referenceName": "reference-name",
"contentID": 1,
"contentVersionID": 2,
"pageID": 3,
"pageVersionID": 4
}

On Save:

{
"state": "Saved",
"instanceGuid": "0000-0000-0000-0000",
"languageCode": "en-us",
"referenceName": "post",
"contentID": 1,
"contentVersionID": 2,
"pageID": 3,
"pageVersionID": 4
}

On Publish:

{
"state": "Published",
"instanceGuid": "0000-0000-0000-0000",
"languageCode": "en-us",
"referenceName": "post",
"contentID": 1,
"contentVersionID": 2,
"pageID": 3,
"pageVersionID": 4
}

Conclusion

In this article, we have seen how to seamlessly integrate webhooks in a Headless CMS using Agility CMS. You’d agree with me that it’s far much simpler compared to if you were using an API.
I’d like to see what you come up with within the comment section, perhaps you’d prefer some another approach and why.

Resources

API vs WEBHOOKS: What’s the difference — Agility CMS