Webhook registration issue

Webhooks and Events
1

followed the documentation. but nothing shows in the terminal after creating a new order. This is my first time working with Shopify webhooks I must have done something wrong in the setup

shopify.app.toml

[[webhooks.subscriptions]]
  topics = [ "orders/create" ]
  uri = "/webhooks/app/orders_create"

webhooks.app.orders_create

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

export const action = async ({ request }) => {
  const { shop, topic } = await authenticate.webhook(request);

  console.log(" Webhook received");
  console.log(`Received ${topic} webhook for ${shop}`);

  return new Response();
};

Project Structure*

image
image376×980 28.6 KB

Thanks in advance for the help

2

There is an additional ‘webhooks’ directory in the project structure, and the correct structure is shown in the following figure.

图片
图片470×493 5.59 KB

1 Like
3

Hi @Ismail_GM
You can try using ngrok to receive webhook request on localhost, follow steps:

  • start ngrok http 8080 & use forwarding URL
  • run shopify app dev --tunnel-url=ngrok_forwarding_url:8080
  • run npm run deploy to push all config of toml file to app config
  • run shopify app dev --tunnel-url=ngrok_forwarding_url:8080 again then now try your webhook now

Btw, base on your attachment project structure, the shopify.app.toml uri should be:

"/webhooks/webhooks/app/orders_create"
1 Like
4

guys @kyle_liu @huykon225 , thank you so much, i started to forget why I love software engineering in the first place, it’s because of this moment and because of people like you and the community.

image
image1351×180 14.4 KB

To explain the problem to people in the future :

Abstraction :

  • Hey shop call me on number 1111 when a new product is created
  • Me next day I changed my number to 222
  • The shop calls on 1111
  • Me confused why I am not receiving calls on 222

What’s really going on

  • toml file use url1 all good .
  • you deploy, url1 is used as a reference to your app
  • you run your app for test the shopify give you url2
  • Shopify triggers the webhook, calling URL1 instead of URL2
  • sad you :sad_but_relieved_face:

The solution :grinning_face:
Ngrok can act as an intermediary, providing a static URL. However, the free tier generates a new URL each time it’s shut down, requiring you to follow @huykon225’s instructions for each restart

image
image1471×780 59.4 KB

@huykon225 @kyle_liu I’m new to Shopify. I did explain my understanding, please correct me if I’m wrong.