How to register webhook in public app

[nikhilthink]

I am not able to register the webhook, I read the documentation and I am not able to figure out as to in which file I have to write the webhook post method and do I have to fetch the post method in the frontend in order to invoke it. 

[Weaverse]

To register a webhook in your Shopify app, you need to use the Shopify REST API to create the webhook and specify the URL endpoint for receiving the webhook. The webhook handling code should be in the backend using a server-side programming language like Node.js or Ruby.

Here's the code to register a webhook:

const webhook = new shopify.rest.Webhook({session: session});
webhook.address = "https://your-app.com/webhook-receiver-address";
webhook.topic = "customers/update";
webhook.format = "json";
await webhook.save({
  update: true,
});

You can find more details on how to register webhooks in the Shopify documentation:

https://shopify.dev/docs/api/admin-rest/2023-01/resources/webhook

And here's an article on configuring HTTPS for webhooks:

https://shopify.dev/docs/apps/webhooks/configuration/https

[nikhilthink]

I wrote the same piece of code in my Index.js file where all other end points are defined, now what do I have to do next

[Weaverse]

I recommend you to take the Shopify App tutorial first; it includes the webhook setup as well:
https://shopify.dev/docs/apps/getting-started/build-app-example

[nikhilthink]

I checked and if I am not wrong, the sample app doesn't contain any code related to webhooks.

If you can just tell me if I am doing everything right in below code

app.post("/api/2023-01/webhooks",async (_req, res) => {

  const webhook = new shopify.api.rest.Webhook({session: res.locals.shopify.session});

  webhook.address = "https://test-webhook.free.beeceptor.com";

  webhook.topic = "orders/create";

  webhook.format = "json";

  await webhook.save({

    update: true,

  });

})

[Weaverse]

The code that I've sent is for registering the webhook address with Shopify; you should execute it right after the user authenticates with your app. 
After registering webhook, when the store gets updated, your app will receive webhook data from Shopify; you should create a route to handle it. Here is the document guide: 
https://shopify.dev/docs/apps/webhooks/configuration/https#step-4-receive-the-webhook

[nikhilthink]

yeah, in order to receive the HTTP request from shopify, I wrote following code in my frontend

const fetchWeb=async()=>{

        try {

           await fetch("/api/2023-01/webhooks",{

            method:"POST",

            headers:{

              'Accept':"application/json",

              'Content-Type':"application/json"

            }

           }).then(response=>response.json().then(response=>console.log(JSON.stringify(response))))

        } catch (err) {

          console.log(err.message)

        }

      }

is this good?

[ShopifyDevSup]

Hey @nikhilthink and @Weaverse,

Just wanted to add a few links to your to conversation here. If you are following the Build an app guide and webhooks documentation, neither cover specific steps for setting up webhooks directly in your app.  

If you are building further upon an app that is leveraging the official shopify-api-js library an example is provided in the repo for setting up webhooks, which is expanded on in this workshop. 

Hope those links help with your setup - cheers!

@awwdam 
Shopify Developer Support