Request app's API in webhookHandlers callback

kcin1993
Shopify Partner
63 0 5

Hi Shopify, here is the code for processing webhooks using shopify-app-express. I would like to call another API of the app in the callback function. How can I do that?

 

The intuitive way is to hardcode the app's URL path, but during the App development stage, the ngrok URL may change when ngrok restart.

 

Another way is to use environment variables, but setting an environment variable just for this purpose seems a bit wasteful. Is there any other way to get the app's host name?

 

 

 

 

const OrderWebhookHandlers: WebhookHandlersParam = {
  ORDERS_PAID: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: shopify.config.webhooks.path,
    callback: async (
      topic: any,
      shop: any,
      body: any,
      webhookId: any,
      apiVersion: any
    ) => {
      const payload = JSON.parse(body);
      console.log("> ORDERS_FULFILLED", {
        topic,
        shop,
        webhookId,
        apiVersion,
        payload,
      });
    },
  },
}

 

 

 

 

For example if the app's ngrok url is https://abc-def-ghi.jp.ngrok.io/ How can I get app's host to send request to the endpoint https://abc-def-ghi.jp.ngrok.io/api/invoice/create  in the webhook handlers callback function?  

Replies 2 (2)

Eric-HAN
Shopify Partner
8 1 1

hi, kcin

 

step 1. , you could first use  command  'ngrok http 3000  ' to  host the port  and  a valid url generates. 

step2 .  update the package.json file.   in  scripts dev  part .  refer to the code below. 

"scripts": {
"shopify": "shopify",
"build": "shopify app build",
"dev": "shopify app dev --tunnel-url=https://a6e3-172-105-81-30.eu.ngrok.io:3000",
"info": "shopify app info",
"generate": "shopify app generate",
"deploy": "shopify app deploy"
},

after such steps. you  get the app's name hosted

If this is helpful, please thumbs up
--Feel free to contact me on (iyouandhim@gmail.com)
kcin1993
Shopify Partner
63 0 5

Hi Eric,

 

As I am using Shopify Cli to create my app, I still need to manually set up ngrok and commands in package.json. If I understand correctly, I will also have to do this manually when deploying to the production environment in the future. Is there a better way to do this?

I am wondering how to retrieve the current App host URL in the Shopify app's callback, so that I can call another API of my App within the webhook's callback function.

 

The purpose of doing this is to track orders/paid and order/fulfill in my App to generate invoices.  Generating invoices is already implemented in my App API, and I hope to call my own API in the callback function. However, the callback function does not have parameters like req, res in middleware, which I can refer to the app host URL.

 

Finally, thank you very much for your reply!