How to Set Up App Proxy for Fetching Data in Frontend Extension in Remix JS?

[Kit_3]

Hi Developers,

I am working on a Shopify app via Remix Js, I am new to the Remix Js and Shopify app.

My plan is to make simple app that would display the price based on the zipcode.

I have pretty much done for the backend, it posts, update and display shipping price and zipcode correctly.

I have stored all this zipcodes and price in one of the product metafield.

My only concern is that it is getting hard for me to get the data from the backend, especially display data on the front store via extensions.

Now, my code app.calculateshipping.tsx as per below would display the shipping cost based on the zipcode provided via url:

import { json, LoaderFunction } from "@remix-run/node";
import { authenticate } from "../shopify.server";  // Adjust path as needed

export const loader: LoaderFunction = async ({ request }) => {
  const { admin } = await authenticate.admin(request);
  const urlParams = new URL(request.url).searchParams;
  const zipCode = urlParams.get("zip");

  if (!zipCode) {
    return json({ error: "Zip code is required" }, { status: 400 });
  }

  // Fetch all relevant metafields
  const response = await admin.graphql(`
    query {
      product(id: "gid://shopify/Product/8304181903529") {
        metafields(namespace: "custom_app", first: 100) {
          edges {
            node {
              key
              value
            }
          }
        }
      }
    }
  `);

  const parsedResponse = await response.json();
  const metafields = parsedResponse.data?.product?.metafields?.edges || [];

  // Look for the metafield that contains the requested zip code
  for (const { node } of metafields) {
    const data = JSON.parse(node.value);
    if (data.some(entry => entry.range.includes(zipCode))) {
      const matchingEntry = data.find(entry => entry.range.includes(zipCode));
      if (matchingEntry) {
        return json({ shipping_cost: matchingEntry.price }, { status: 200 });
      }
    }
  }

  return json({ error: "No shipping cost found for this zip code" }, { status: 404 });
};

below is the output i get for the above code, which is right:

Now, all i want is to display the shipping price, in the front end based via extension. Below is my liquid code to display the shipping cost based on the zipcode. However, the fetch url is not correct:

I have set up the my App proxy as per below, I would really appreciate to have your assistant in order to get the data from the Shopify backend => https://admin.shopify.com/store/taktwoapp/apps/zip-code-3/app/calculateshipping?zip=8848

I would really appreciate your help and information.

Thank you for your time reading this.

Many thanks