All Tutorials

Build a Shopify App with Node and React

Listen for store events with webhooks

Webhooks are a useful tool for apps that need to listen and act on specific events that happen in a store. You’ll be using the Shopify Node Library to register and receive Shopify webhooks. It uses the GraphQL Admin API and the Webhook Subscription mutation to register webhooks, so make sure to use the supported topics for GraphQL webhook subscriptions.

Validate and register your webhook

  1. Navigate to the app section in your partner account. Click on your app and head to app setup. Scroll down to Event Subscriptions and ensure you're using the latest version of the API.

    <span class="translation_missing" title="translation missing: en.build_a_shopify_app_with_node_and_react.listen_for_store_events_with_webhooks.admin-alt">Admin Alt</span>
  2. Make sure ngrok is running, and that you’ve added the HTTPS version of your ngrok forwarding URL to your .env file:
    SHOPIFY_API_KEY='YOUR SHOPIFY API KEY FROM THE SHOPIFY PARTNERS DASHBOARD' SHOPIFY_API_SECRET='YOUR SHOPIFY API SECRET KEY FROM THE SHOPIFY PARTNERS DASHBOARD' SHOPIFY_API_SCOPES=read_products,write_products SHOPIFY_APP_URL='YOUR NGROK HTTPS ADDRESS'
  3. In your server.js file, register a webhook for app uninstallation:

    /server.js

    code contained in /server.js
    async afterAuth(ctx) { const { shop, scope, accessToken } = ctx.state.shopify; ACTIVE_SHOPIFY_SHOPS[shop] = scope; Add: const registration = await Shopify.Webhooks.Registry.register({ Add: shop, Add: accessToken, Add: path: '/webhooks', Add: topic: 'APP_UNINSTALLED', Add: apiVersion: ApiVersion.October20, Add: webhookHandler: (_topic, shop, _body) => { Add: console.log('App uninstalled'); Add: delete ACTIVE_SHOPIFY_SHOPS[shop]; Add: }, Add: }); Add: Add: if (registration.success) { Add: console.log('Successfully registered webhook!'); Add: } else { Add: console.log('Failed to register webhook', registration.result); Add: } const returnUrl = `https://${Shopify.Context.HOST_NAME}?shop=${shop}`; const subscriptionUrl = await getSubscriptionUrl(accessToken, shop, returnUrl); ctx.redirect(subscriptionUrl); },
  4. Stop your server, navigate to the Apps section of your Shopify Admin, and uninstall your app from your store. Apps section of the development store Admin circling the sample embedded app's garbage icon
  5. Reinstall your app on your development store:

  6. Upon registration, your server console should log: Successfully registered webhook! <span class="translation_missing" title="translation missing: en.build_a_shopify_app_with_node_and_react.listen_for_store_events_with_webhooks.console-alt">Console Alt</span>

Create a webhook subscription and receive a webhook

Now that you’ve registered the request, you can now subscribe and receive a webhook.

  1. Set up your server.js file to receive webhooks when the app is uninstalled:

    /server.js

    code contained in /server.js
    Add:router.post('/webhooks', async (ctx) => { Add: await Shopify.Webhooks.Registry.process(ctx.req, ctx.res); Add: console.log(`Webhook processed with status code 200`); Add:}); router.get('(.*)', async (ctx) => {
  2. Stop and restart your server to render the changes to your server.js file.

  3. Uninstall your app from your store again.
  4. Your server console should now print out a success message: App uninstalled / Webhook processed with status code 200
  5. <span class="translation_missing" title="translation missing: en.build_a_shopify_app_with_node_and_react.listen_for_store_events_with_webhooks.console-alt-subscription">Console Alt Subscription</span>

Next steps

Congratulations on completing the tutorial! You’ve learned the basics of building a Shopify app. Want to learn more? Check out these additional resources: