Need to create webhook with ngrok url

[Anshu-Shar]

Hello @Mini-Sylar I have taken zip file of your code.i wan to create the webhook orders and product but inside this app cloudflare url using so it is mismatch the webhook creation and call urls. so overcome this issue by using ngrok url but after implementing ngrok url it is showing shop undefined. Please describe the steps how can i update the ngrok url for frontend and backend and use in partner account application url like this. I would like to use the webhook and call when we update any products means product webhook.

[Mini-Sylar]

First of all setup for testing webhooks using ngrok https://ngrok.com/docs/integrations/shopify/webhooks/

Secondly in your package.json in your root "dev": "shopify app dev --tunnel-url=<NGROKURL>:3000", without the <>

then run npm run dev -- --reset to reset your URLs

in your webhook.js or by default the gdpr.js you can add more webhooks

//e,g  use_webhook.js
export default {
 PRODUCTS_CREATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
        // anything you want to do here
      );
    },
  },
  }

make sure in your index.js you have webhook handling enabled

import webHookCallback from "../helpers/use_webhook.js";
// Set up Shopify authentication and webhook handling
app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(
  shopify.config.auth.callbackPath,
  shopify.auth.callback(),
  shopify.redirectToShopifyOrAppRoot()
);
app.post(
  shopify.config.webhooks.path,
  shopify.processWebhooks({
    webhookHandlers: webhookHooks,
  })
);

Finally here are the various webhook topics you can subscribe to https://shopify.dev/docs/api/admin-graphql/2024-04/enums/WebhookSubscriptionTopic

[Anshu-Shar]

Thanks for the respone I want to use gdpr.js file code to create webhook not in shopify .I want to ask only how can we configure ngrok url in this repository code not cloudflare url.

[Mini-Sylar]

run ngrok http 3000 in your package.json in your root "dev": "shopify app dev --tunnel-url=<NGROKURL>:3000", without the <>

your webhooks will be setup, (you can see this in the logs)

once they are setup, any action you trigger on shopify will show in your terminal, you can also log it in the callback

export default {
 PRODUCTS_CREATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
        // anything you want to do here
      );
    },
  },
  }

[kuvarGalaxy]

@Mini-Sylar Actually I have tried to change "dev": "shopify app dev --tunnel-url=https://c24a-2409-4063-4d46-8030-2ccf-e0bc-8f5d-b44f.ngrok-free.app/:3000" this URL in the package.json and apply reset command but it will be showing only page url data. but not fixed the issue of undefined shop can you please guide me on how I can fixed that issue

[Mini-Sylar]

Where are you seeing the shop as undefined? can you send that section of your code?

[kuvarGalaxy]

@Mini-Sylar sure import { join } from "path"; import { readFileSync } from "fs"; import express from "express"; import serveStatic from "serve-static";

import shopify from "./shopify.js"; import productCreator from "./product-creator.js"; import GDPRWebhookHandlers from "./gdpr.js";

import { GraphqlQueryError } from "@shopify/shopify-api"; import axios from 'axios'; const PORT = parseInt( process.env.BACKEND_PORT || process.env.PORT || "3000", 10 );

const STATIC_PATH = process.env.NODE_ENV === "production" ? ${process.cwd()}/frontend/dist : ${process.cwd()}/frontend/;

const app = express();

// Set up Shopify authentication and webhook handling app.get(shopify.config.auth.path, shopify.auth.begin()); app.get( shopify.config.auth.callbackPath, shopify.auth.callback(), shopify.redirectToShopifyOrAppRoot() ); app.post( shopify.config.webhooks.path, shopify.processWebhooks({ webhookHandlers: GDPRWebhookHandlers }), (err, _req, res, _next) => { console.error("Failed to process webhook:", err); res.status(500).send("Failed to process webhook"); } );

// If you are adding routes outside of the /api path, remember to // also add a proxy rule for them in web/frontend/vite.config.js

app.use("/api/*", shopify.validateAuthenticatedSession());

app.use(express.json());

app.use(shopify.cspHeaders()); app.use(serveStatic(STATIC_PATH, { index: false }));

app.use("/*", shopify.ensureInstalledOnShop(), async (_req, res, _next) => { return res .status(200) .set("Content-Type", "text/html") .send(readFileSync(join(STATIC_PATH, "index.html"))); });

app.listen(PORT); here showing undefined shop while we trigger the webhook of updating products

[Mini-Sylar]

Let's change a few things By default the app backend runs on port 3000 for local unless specified

const PORT = parseInt(
  process.env.BACKEND_PORT || process.env.PORT || "3000",
  10
);

So when starting an ngrok server you need to create a URL on that same port, assuming you've not changed the port, run

ngrok http 3000  

this will generate a Forwarding URL, example:

Forwarding                    https://3daa-41-218-197-253.ngrok-free.app -> http://localhost:3000    

Copy that forwarding URL and place it in the --tunnel-url , for example

 "dev": "shopify app dev --tunnel-url=https://3daa-41-218-197-253.ngrok-free.app:3000",

notice how short that url is and no slash at the end

Do this and let me know if the issue still persists.