Strapi blog logo
  • Product

      Why Strapi?Content ArchitectureRoadmapIntegrationsTry live demo
      OverviewContent Types BuilderCustomizable APIMedia LibraryRoles & Permissions
      Discover Strapi Enterprise EditionDiscover our partners
  • Pricing

  • Solutions

      Static WebsitesMobile ApplicationsCorporate websitesEditorial SitesEcommerce
      Delivery HeroL'EquipeSociete GeneralePixelDustBanco International
      Discover all our user stories
  • Community

      CommunityWrite for the communityWall of LoveStrapi Conf 2021
      SlackGitHubYoutubeCommunity Forum
      Meet the Strapi Community StarsDiscover the Strapi Showcase
  • Resources

      BlogStartersNewsroomSupport
      Strapi AcademyTutorialsVideos GuidesWebinars
      The Guide to Headless CMS Strapi Community Forum
  • Docs

      Getting StartedInstallationConfigurationsDeploymentUpdate versionContent API
      Getting StartedContent ManagerContent-Types BuilderUsers, Roles & PermissionsPlugins
      Developer DocumentationStrapi User Guide

Looking for our logo ?

Logo Brand download
Download Logo Pack
See more Strapi assets
Strapi blog logo
  • Product

    Product

    • Why Strapi?
    • Content Architecture
    • Roadmap
    • Integrations
    • Try live demo

    Features

    • Overview
    • Content Types Builder
    • Customizable API
    • Media Library
    • Roles & Permissions
    • Discover Strapi Enterprise Edition
    • Discover our partners
    Features cover

    Unlock the full potential of content management

    See all features
    Strapi Enterprise Edition

    Discover the advanced features included in Strapi Enterprise Edition.

    Get Started
  • Pricing
  • Solutions

    Solutions

    • Static Websites
    • Mobile Applications
    • Corporate websites
    • Editorial Sites
    • Ecommerce

    Stories

    • Delivery Hero
    • L'Equipe
    • Societe Generale
    • PixelDust
    • Banco International
    • Discover all our user stories
    Delivery Hero team

    Delivery Hero manages their partner portal with Strapi.

    Read their story
    turn 10 studios website

    How 1minus1 delivered a creative website for Turn10 Studios 25% faster with Strapi

    Discover their story
  • Community

    Community

    • Community
    • Write for the community
    • Wall of Love
    • Strapi Conf 2021

    Resources

    • Slack
    • GitHub
    • Youtube
    • Community Forum
    • Meet the Strapi Community Stars
    • Discover the Strapi Showcase
    Strapi Conf

    The first Strapi Global User Conference.

    Register now
    Write for the community

    Contribute on educational content for the community

    Discover the program
  • Resources

    Resources

    • Blog
    • Starters
    • Newsroom
    • Support

    Learning

    • Strapi Academy
    • Tutorials
    • Videos Guides
    • Webinars
    • The Guide to Headless CMS
    • Strapi Community Forum
    Introducing Strapi Academy

    Everything you need to know to master Strapi.

    Go to the academy
    Strapi Repository on GitHub

    Get started with the Strapi repository

    Go to repository
  • Docs

    Developers

    • Getting Started
    • Installation
    • Configurations
    • Deployment
    • Update version
    • Content API

    User Guide

    • Getting Started
    • Content Manager
    • Content-Types Builder
    • Users, Roles & Permissions
    • Plugins
    • Developer Documentation
    • Strapi User Guide
    Install Strapi

    Install Strapi locally or wherever you need.

    Get Started
    Migration Guides Strapi

    Using a previous version of Strapi? Migrate to the latest.

    Read Guides
Get Started
Back to articles

Adding Webhooks in Strapi 🎯

strapi-webhooks
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email
Pierre Burgy

Pierre Burgy

October 31, 2018

If you are using a static website generator (or framework with build option) with Strapi (Gatsby, Nuxt, Next, etc.) it is necessary to rebuild it when the content is updated in Strapi. In a Headless CMS, this is typically called a Webhook feature. Unfortunately it is not available yet in Strapi even if it has been requested.

But what we like at Strapi is to help developers. So even if the feature is not developed yet, this short article gives you an easy way to implement work around! 😃

Webhooks

Discovering the lifecycle callbacks 🔍

As you may know, every Content Type (aka models) has lifecycle callbacks: functions which are triggered every time an entry is fetched, inserted, updated or deleted. Here is the list:

  • Callbacks on save (both triggered on entry creation and update): beforeSave, afterSave.
  • Callbacks on fetch: beforeFetch, afterFetch.
  • Callbacks on fetchAll: beforeFetchAll, afterFetchAll.
  • Callbacks on create: beforeCreate, afterCreate.
  • Callbacks on update: beforeUpdate, afterUpdate.
  • Callbacks on destroy: beforeDestroy, afterDestroy.

All of these functions are available in a file located at api/yourContentType/models/YourContentType.js.

If your goal is to rebuild a static website, the only useful callbacks are afterCreate, afterUpdate and afterDestroy. So, uncomment them, add logs and try to create, update and delete entries from the admin panel.

Path: api/yourContentType/models/YourContentType.js

Making the HTTP call 🔊

We are almost there: the only thing we still need to do is to actually make the HTTP call to the URL which will rebuild the static website.

URL config

So first of all, let's store this URL in a proper way. To do so, edit config/environments/development/custom.json:

Path: config/environments/development/custom.json

{
  "staticWebsiteBuildURL": "https://yourservice.com/"
}

Do the same thing for other environments.

HTTP call

Now it is time to make the HTTP call. In this example we will use axios as it is already in the list of Strapi's dependencies. Let's install it:

npm i axios --save

Edit api/yourContentType/models/YourContentType.js:

Path: api/yourContentType/models/YourContentType.js

Mongoose limitation

Until September 2018, remove lifecycle callback was not supported by Mongoose. This has been added but strapi-hook-mongoose is not adapted yet to this update.

So, to trigger an url on delete, please add request.post(strapi.config.currentEnvironment.staticWebsiteBuildURL, entry); in:

  • remove action of api/yourContentType/services/YourContentType.js (triggered by your public API).
  • delete action of plugins/content-manager/services/ContentManager.js (triggered by the Content Manager).

Note: do not forget to require request at the top of these files.

Conclusion

Articles of this type are made to help you. We hope they do! Please comment with your suggestions.

Need more help? Ask your questions on StackOverflow, submit issues on GitHub and request features on ProductBoard!

  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email

Unleash content.

Starters
Get Started

Strapi is the leading open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.

Product

  • Why Strapi?
  • Content Architecture
  • Features
  • Enterprise Edition
  • Partner Program
  • Roadmap
  • Support
  • Integrations
  • Try live demo
  • Changelog

Resources

  • How to get started
  • Meet the community
  • Tutorials
  • API documentation
  • GitHub repository
  • Starters
  • Strapi vs Wordpress
  • The Guide to headless CMS

Integrations

  • Gatsby CMS
  • React CMS
  • Vue.js CMS
  • Nuxt.js CMS
  • Next.js CMS
  • Angular CMS
  • Gridsome CMS
  • Jekyll CMS
  • 11ty CMS
  • Svelte CMS
  • Sapper CMS
  • Ruby CMS
  • Python CMS

Company

  • About us
  • Blog
  • Careers
  • Contact
  • Newsroom
  • © 2021, Strapi
  • LicenseTermsPrivacy