How to Handle Multiple Endpoints in App Proxy for a Remix App?

Shopify Apps
1

Hi everyone,

I’m building a Remix app that includes multiple endpoints. These endpoints are called from a Shopify theme app extension. Normally, this requires referencing the full app URL for each request. To avoid exposing the app URL, I decided to use Shopify’s App Proxy feature.

However, I’ve noticed that the App Proxy configuration in the Shopify Partner Dashboard allows only one proxy path. Since my app has multiple endpoints (e.g., /api/getWishlistData, /api/getProductDetails, etc.), I’m unsure how to handle this limitation.

Has anyone dealt with a similar situation?

  • Is there a way to route multiple endpoints through a single App Proxy path?

  • How do you structure your Remix app to handle these proxy requests correctly?

Any guidance or examples would be greatly appreciated!

2

Hi there!

A simple way to work around the single App Proxy path limitation is to use an action query parameter on the proxy URL — and route your logic based on its value.

Example:

export async function loader({ request }: LoaderArgs) {
  const url = new URL(request.url);
  const action = url.searchParams.get('action');

  switch (action) {
    case 'getWishlistData':
      return json(await handleGetWishlistData());
    case 'getProductDetails':
      return json(await handleGetProductDetails());
    default:
      return new Response('Invalid action', { status: 400 });
  }
}
3

Hi @greeshma

At present, Shopify app proxy does not support multiple endpoints, which can be determined by URL parameters

export const loader = async ({request, params}) => {
  const {admin} = await authenticate.admin(request);
  const topic = params.topic;
  switch (topic) {
    case "ORDERS_CREATE":
      orderEventEmitter.emit("order-create", payload);
      break;
    case "ORDERS_UPDATED":
      orderEventEmitter.emit("order-updated", payload);
      break;
    default:
  }
  ...
};