Receive webhook request in remix file.

[mrkarim]

Yesterday, I created a Shopify app using the Shopify CLI command. My question is: I want to receive webhook responses directly in my Remix API file. For example, I’d like to listen for events when a product is updated via a webhook. I know that using an external API server works, but I want to handle webhook triggers within my Remix app file itself, without setting up an external API server. However, I'm unable to find a solution for this. Is it possible, and if so, how can I achieve it?

[Kyle_liu]

Hi @mrkarim 

You can try this:

1、Edit shopify.app.toml 

  [[webhooks.subscriptions]]
  topics = [ "products/update" ]
  uri = "/webhooks/products/update"

2、Create a new  file: webhooks.products.update.jsx

3、Edit file: webhooks.products.update.jsx

import {authenticate} from "../shopify.server";

export const action = async ({request}) => {
  const {shop, session, topic, payload, webhookId, admin} = await authenticate.webhook(request);
  console.log(`Received ${topic} webhook for ${shop}`);
  // console.log("orders/updated-data: ", JSON.stringify(payload));
  // Webhook requests can trigger multiple times and after an app has already been uninstalled.
  // If this webhook already ran, the session may have been deleted previously.
  if (session) {
    // await db.session.deleteMany({ where: { shop } });
    console.log("product updated. ");
  }

  return new Response();
};

[mrkarim]

Thanks for your reply. I did the same thing but I am not getting any webhook delivery or trigger. So I go to shopify partner dashboard and found all webhooks delivery is being failed with 530 error. I am a newbie in shopify app development. Could you tell me how I can solve the problem ? here is my webhook error description below,

[Kyle_liu]

Hi @mrkarim 

Shopify API response status and error codes

Check your shop status:  https://www.shopifystatus.com/ 

[mrkarim]

How can I I solve this issue ?

[mrkarim]

After running the 

yarn run shopify app dev -- --reset

I am getting a 503 error.  

[Kyle_liu · Accepted solution]

You can try using ngrok,
1. start 'ngrok http 3000' and use forwarding URL,
2. `shopify app dev --tunnel-url forwarding: 3000`,
3. npm run deploy
4. `shopify app dev --tunnel-url forwarding: 3000`

[mrkarim]

Thanks Kyle_liu it is working. 

[Kyle_liu]

I'm glad I could help you.