App Proxy on Theme Extension App built using Node template, returns 404

Extensions
1

Hello Guys, I’m working on shopify app (with theme extension) using node template.

Using it I’m injection a button to account page using which customer can change their basic details like first_name, last_name, Email & phone number.

Whenever form is submitted to the API’s endpoint through shopify app proxy but it returns “404 not found”.

Here is the API’s Endpoint

3
31918×1040 115 KB

Here is the App Proxy Setup

2
21054×280 10.6 KB

Here is the Ajax Call from theme extension

1
11918×1040 117 KB

Let me know if you have any solutions.

2

My best guess is that your Vite development server proxy isn’t configured to forward requests at /apps to your backend. But I may be wrong.

3

Thanks for reply @Magnus_Fischer, can you please tell me how do I do that?
as it’s my first app.

4

@themaulikshah

Add this to your proxy object inside of the vite config:

//vite.config.js

const proxyOptions = {
  target: `http://127.0.0.1:${process.env.BACKEND_PORT}`,
  changeOrigin: false,
  secure: true,
  ws: false,
};

export default defineConfig({
  server: {
    proxy: {
      "^/apps(/|(\\?.*)?$)": proxyOptions
    }
  }
});
5

How will it work with dynamic updated URLs (URL tunneling)?
something like this “https://temp_domain.trycloudflare.com”.

6

The proxy just needs to point to the host for your backend. Typically in development mode, this would be localhost.

7

Still Returning 404

Screenshot (28)
Screenshot (28)1920×1080 149 KB

8

@Magnus_Fischer Issue is solved.

I was setting wrong route for API endpoint & Proxy at app configuration.

I followed the shopify docs - Display dynamic store data with app proxies