How to configure webhook to update frontend project

Questions and Answers
1

Hey all,

First time user of strapi, and i’m making use of it’s cms for a backend, and next.js for a frontend. They are both deployed happily on a digital ocean droplet.

I’m getting a little bit confused with the whole refreshing data aspect. In an older website I have, i have a node.js backend, connected to a mongo db. When a user creates a new page in the cms backend, the mongo db is updated and if a user goes to the front end site a request is made to grab all the data in the pages collection so they’ll always see ‘up to date data’.

However in this new scenario, I can create a post for example in my strapi cms, but since i’m using “getStaticProps()” i understand (i think) that the data is getting loaded at the moment i build my frontend & backend, but after that no matter what happens on the cms (even though i can request the endpoint {serverUrl}/pages to see the new data), nothing will actually show up live on the site. In order for a user of the cms to update a page, and for it to be shown on the frontend, i would have to use getServerSideProps()?

OR i could use webhooks apparently? I’ve set up a github webhook following the tutorial at the bottom of this page (https://strapi.io/documentation/developer-docs/latest/deployment/digitalocean.html), which when I push code to my main branch it rebuilds both projects however I’m not sure how to configure the cms to do the same.

I.e. I’m thinking from the following page

image
image1028×699 22.4 KB

I could set up a webhook that when a page entry gets updated, it will send off a request to github and rebuild both sites. Or am i being completely stupid?

2

So i have added the following which rebuilds both my backend and frontend as soon as a page has been updated-i.e if a user in the cms updates the blurb section. However, it just seems so wrong to rebuild the whole site based on trivial updates…surely there is a better way of doing this?

‘use strict’;

/**

 * Read the documentation (https://strapi.io/documentation/developer-docs/latest/concepts/models.html#lifecycle-hooks)

 * to customize this model

 */

module.exports = {

    lifecycles: {

        async afterUpdate(result, params, data) {

            console.log(result)

            const { exec } = require("child_process");

            exec("cd ~/stagStrapi/backend && npm run build && cd ~/stagStrapi/frontend && npm run build", (error, stdout, stderr) => {

                if(error){

                    console.log('error', error)

                    console.log('stderr', stderr)

                }

                exec("cd ~ && pm2 restart ecosystem.config.js", (errorEco, ecoStdOut, ecoStdErr) => {

                    if(errorEco){

                        console.log('error', errorEco)

                        console.log('stderr', ecoStdErr)

                    }else{

                        console.log('ecoStdOut', ecoStdOut)

                    }

                });

                console.log('stdout',stdout)

            });

        },

   },

}