Call fetch from Extension to App Proxy using NodeJS return an HTML code, not my expected data

Shopify Apps
1

Hi guys,

Please help me to get through the wall.

I’m a newbie to Shopify app. I’ve used yarn create @shopify/app with Node. After that, I made the Theme App Extension too.

I have watched too many videos about proxies, including the video by Liz Kenyon: https://www.youtube.com/watch?v=ZiugtHDctFk&ab_channel=ShopifyDevs

I followed her instructions, as well as this article from @Brandon15 : https://community.shopify.com/c/shopify-apis-and-sdks/404-error-with-app-proxy-in-node/m-p/1624693#M80700

Here is my proxy configuration:

Notes: If I make the proxy url with “api” at the end like this (similar to the video by Liz Kenyon): https://fbad-210-245-34-240.ap.ngrok.io/api, it event worse. I don’t know why.

In the project extension, I used JavaScript to fetch data from my back-end app:

fetch("/apps/my_app/settings", { method: "GET" });

In the web directory (server side), I modify the index.js file to add just simple code:

app.use("/api/*", shopify.validateAuthenticatedSession());
app.use(express.json());
////// THIS IS MY NEW PROXY TEST HERE /////
app.get("/settings", (req, res) => {
console.log("======> I GOT THIS!");
const jsonObject = { content: "Proxy is working" };
res.send(jsonObject);
});
///// END OF PROXY TESTING ///

Whenever I try to use the front store, I always receive the returned HTML as a response.

I tried to to modify the index.js (in the web directory - server side) at the line “app.get(“/settings”, (req, res) => {“ to “app.get(“/api/settings”, (req, res) => {“ but no luck.

In all cases, I’ve never seen the log by this line**:**

console.log("======> I GOT THIS!");

It seemed that this endpoint would never be called.

I have been stuck on this for a few days now. Please, anyone with experience in proxy calling with Node, please help me.

Thank you so much.

1 Like
2

I found the problem!

This is because I haven’t edit the vite.config.js file to allow new path. By default it allows only “/api…” and “/” only.

To make sure I can access “/settings…”, here what I’ve added:

"^/settings(/|(\\?.*)?$)": proxyOptions,

at the proxy section:

server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
      "^/settings(/|(\\?.*)?$)": proxyOptions,
    },
  },
3 Likes
3

Hello @ntkhiem ,

I’m facing same problem. I have tried your solution but it’s not working. I have add new proxy URL in vite.config.js but same error occur.

server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
      "^/data(/|(\\?.*)?$)": proxyOptions,
    },
  },
1 Like
4

could you please share with me the config in your Proxy?

5

Hi @ntkhiem , Thank you for your solution.

In the project extension, I used JavaScript to fetch data from my back-end app, too. And in file .js, I have variable url = “https://xxx.ap.ngrok.io/apps” to call function fetch api. It will be rendered after run “yarn dev” in local. Do you have any solution for it?

6

I think you might ask about the proxy url that should be updated automatically during dev time (just like other fields). If so, unfortunately, you have to do it manually for only the proxy url field (in the app settings).

I’ve tried to open the shopify package to make it work automatically, but no luck!

Everytime you launch the app in dev environment with https://xxx.ap.ngrok.io (Shopify CLI higher version is using cloudflare for now), you have to go to the app settings, and copy the url to the proxy field manually.

1 Like
7

Thank you so much :blush:

8

Hi Ntkhiem, I have a similar problem with 404s, I am trying a POST fetch request. I think your solution will work for me, but I am also not sure if I’ve entered the Proxy URL right. My main issue is I haven’t deployed / hosted yet on production, I am not using ngrok, but rather I think shopify now has some default tunneling via its CLI / Cloudflare? How do i determine this? Thanks in advance - I am a huge noob.

Config & Code below for reference:

Config:

Frontend in extensions/api-input-block/blocks/hello.liquid:

Backend (in index.js):

app.post('/form', (req, res) => {
  const formData = req.body;

  // Perform desired actions with form data
  // For example, you can store it in a database or send an email

 // Generate a response
 const response = {
  message: 'Form submitted successfully',
  data: formData  // Include any additional data you want to send back to the client
};​
9

Hello @All

If anyone resolve this issue kindly share here I am stuck same think, express app shopify doesn’t provide app proxy?