No guidance on setting up and using webhooks with `shopify-app-node-template`

[DalyanParker]

Issue summary

I am attempting to set up Webhooks in a shopify app generated by the shopify-app-node-template. There is no clear documentation I can find about how to do this, apart from the docs for shopify-api-js.

However, the template has already done a lot of this for us, but it is hidden amongst unreadable node-module packages. How am I supposed to register a Webhook after the OAuth callback without overriding the boiler plate that Shopify has included in this template?

What is the correct way to process them after this? Where is the /api/webhooks endpoint that the boiler plate code sets being used? I can't find it in the template.

This is straight forward in the docs for shopify-api-js, however this is utterly and extremely unclear what the pattern should be for using using Webhooks with this template without overriding the boiler plate code, and there are no docs I can find specifically to guide me.

Can anyone please help point me to the correct docs for how to set up and use Webhooks within this template?

[DalyanParker]

I found this tutorial, after many hours.

[tiimgreen]

Yeah the docs for this project are pretty terrible, need to make this much better if they want devs to come to Shopify.

My webhooks have just broken and I've got no idea how to fix them, not even a reference to look at. Going to have to just guess.

[dani-sanomads]

Thanks a lot. @tiimgreen @DalyanParker

[jamalsoueidan]

Beside that I don't get why they didn't use typescript in this project! In other internal projects at shopify they use typescript. What is the reason?

I started working on new application 2 month ago, and now the template have changed a lot, so it's not easy to merge the new changes, I have to start over and move the code to the new template code.

[DalyanParker]

@mkevinosullivan Could you or a colleague please update the README to include links to relevant docs or tutorials, it took me many hours to find a helpful resource which still only has limited coverage of how to use this template.

[jamalsoueidan]

@dani-sanomads did you figure out how to do it without using the shopify-api?

[jamalsoueidan]

1. You need to fill the webhooks you need in the gdpr file.
2. Then call webhooks register when booting the application.

const response = await shopify.api.webhooks.register({
   session,
});

[AdityaMalani]

@DalyanParker The tutorial link you shared in taken down. Can you summarise the process in words quickly ?

[AdityaMalani]

@shopify-admins Please provide clear documentations. A lot of time and energy is wasted in figuring these things out.

[nboliver]

I found the workshop here: https://workshops.shopify.dev/workshops/webhooks-in-nodejs

[lmartins]

Shopify docs can be both incredible and terrible at times. Incredible when they exist, super frustrating when for some reason they don't cover critical aspects of a build.

I'm using the Node template, and followed all the steps I could find documentation on to register the webhooks:

// web/index.js
// Just relevant lines included for brevity

import shopify from './shopify.js';
import webhookHandlers from './webhook-handlers.js';

app.post(shopify.config.webhooks.path, shopify.processWebhooks({ webhookHandlers }));

Then on the webhooks file:

// web/webhook-handlers.js

import { DeliveryMethod } from '@shopify/shopify-api';

export default {
  PRODUCTS_UPDATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: '/api/webhooks',
    callback: async (topic, shop, body, webhookId) => {
      const payload = JSON.parse(body);
      console.log('TOPIC:', topic, payload);
    }
  }
}

I can run this webhook manually via CLI, however no matter how many times I restart the node server it won't register the webhooks on the installed app, so I can't get the to run when I do actually edits on the store. I believe before it used to log something on the console when it found new webhooks, but with this app that just ain't happening.

Have anyone run into something like this?

EDIT: Just realized that uninstalling and installing the app makes the webhooks register. Is this a required step? I was under the impression you could register webhooks anytime during the app lifecycle, provided that you restarted the express server.

[ss5nathan]

EDIT: Just realized that uninstalling and installing the app makes the webhooks register. Is this a required step? I was under the impression you could register webhooks anytime during the app lifecycle, provided that you restarted the express server.

WOW! I spent lots of time trying to figure this out, I also assumed that restarting the development server would also register the new webhooks

[DanhHoaDev]

Hi @lmartins, I'm config webhook same as you but we must reinstall app to receive new webhook right? have any solution to register new webhook without reinstall app?

[lmartins]

Hi @lmartins, I'm config webhook same as you but we must reinstall app to receive new webhook right? have any solution to register new webhook without reinstall app?

No fix that I'm aware atm. This won't be an issue on production, as the webhook URLs won't change, but in development is a bit of a problem because you have to uninstall/reinstall the app each time. Hoping we hear from Shopify on this soon.

[DanhHoaDev]

@lmartins , your mean is if product deployed in shopify store it will automatic register? Because now I'm developing a dev app it must to reinstall when have new webhook

[lmartins]

@lmartins , your mean is if product deployed in shopify store it will automatic register? Because now I'm developing a dev app it must to reinstall when have new webhook

The app will register the webhooks when you install it, but won't change the webhook URLs when you restart the dev scripts, so you have to uninstall/reinstall. On production this shouldn't be an issue, as the server URL won't be changing all the time as it happens during development. Hoping we'll see a way to make this much more practical, but haven't found another way around it.

[chris-taffi]

@DanhHoaDev You can use Admin API to subscribe to new webhooks or remove old webhooks. Refer to this documentation: https://shopify.dev/docs/api/admin-rest/2022-10/resources/webhook

[akospaska]

@lmartins , your mean is if product deployed in shopify store it will automatic register? Because now I'm developing a dev app it must to reinstall when have new webhook

The app will register the webhooks when you install it, but won't change the webhook URLs when you restart the dev scripts, so you have to uninstall/reinstall. On production this shouldn't be an issue, as the server URL won't be changing all the time as it happens during development. Hoping we'll see a way to make this much more practical, but haven't found another way around it.

I find it a not soo professional solution.

1. Usecase We have active installed shops with registered webhooks on PRODUCTION. What if we change our app url? All of the webhook requests will arrive into the OLD encpoint, what we don't want.

2. Usecase We have active installed shops with registered webhooks on PRODUCTION. We extend the "gdprWebhookHandlers" object (Can be renamed), and all of the webhook register will by applied to the new installs.

Is there a way put this webhookregistery process to the auth flow?

[matthewhausman]

The company I'm currently working for (Trellus) has 50+ customers using the app already, all of which needed to reinstall the app becauase we changed the app URL. So gonna have to agree with @akospaska seems... less than effective to put it nicely. Also not ideal since there are an extreme amount of failing webhooks for the customers who haven't reinstalled yet.

[kuschAlexander]

@lmartins , your mean is if product deployed in shopify store it will automatic register? Because now I'm developing a dev app it must to reinstall when have new webhook

The app will register the webhooks when you install it, but won't change the webhook URLs when you restart the dev scripts, so you have to uninstall/reinstall. On production this shouldn't be an issue, as the server URL won't be changing all the time as it happens during development. Hoping we'll see a way to make this much more practical, but haven't found another way around it.

man thanks a lot, i reinstalled the app, and it works!