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.

[Plpepin]

I ran into this situation too but could not quite get the solution to work

You also have to follow some steps before you can use ngrok: See https://shopify.dev/docs/apps/build/cli-for-apps/networking-options#bring-your-own-tunnel

In the end, I used the following steps and it worked for me:

1. Opened separate terminal and did 'ngrok http 3000'
2. Noted the 'ngrok-free.app' url that's returned (noted below as ngrok_url)
3. shopify app dev --tunnel-url=ngrok_url:3000
4. Quit the server or press q
5. npm run deploy
6. Run step 3 again, otherwise it will default to a cloudflare quick tunnel and probably replace your url in your shopify.app.toml

Should be noted also that Shopify uses Cloudflare Quick Tunnels by default and their may just be an issue with your Firewall settings. Thats what the Shopify docs suggests as a possible issue.

And one last tid bit I learned is that my webhook worked without having to refresh the app in shopify.