How to setup app proxy route in remix app?

Retired Boards Appdev Tools
, , , ,
1

Hello

In the old CLI version, We are calling the proxy route from the theme app extension via Ajax call, and in the web/index.js file we have created route logic for that proxy route.

Now in the new Remix CLI app, In which file we can create proxy route logic, and how to create it?

Thank you

3 Likes
2

Hi Divy_tatva,

We have documentation here on how to authenticate requests coming from Shopify app proxies, with examples of how to use the session object and communicate with the Admin API.

Hope this helps!

1 Like
3

Hey Liam, here is my theme extension code

Here is my App proxy config
[app_proxy]
url = “https://rivers-sin-resistant-bigger.trycloudflare.com/app/ClientRequests”
subpath = “proxy943”
prefix = “apps”

this is my app.ClientRequests route,

import shopify from “../shopify.server”;
export async function action({request, params}) {
const { admin } = await shopify.authenticate.public.appProxy(request);
const formData = await request.formData();
const productData = Object.fromEntries(formData);
const variantId = productData.productId;
const response = await admin.graphql( { node(id: "${variantId}") { ... on ProductVariant { id sku title price product { id title description handle featuredImage { height url altText } } } } });

const jsonResponse = await response.json();
return new Response(JSON.stringify(jsonResponse), {
status: 200,
headers: {
‘Content-Type’: ‘application/json’,
},
});
}

why would I get a 404 error?

1 Like
4

Did you find any solution for this?

5

In a Remix CLI app, you can set up a proxy route by creating a new file in the app directory called routes.ts or routes.js. In this file, you can define your proxy route logic using Remix’s routing capabilities.First, import the json function from Remix:typescriptimport { json } from ‘@remix-run/node’;Then, define your proxy route handler:typescriptexport const loader = json(async () => {// Your proxy route logic here});Next, update your remix.config.js file to include the proxy route configuration:javascriptmodule.exports = {// Other configuration optionsroutes: {‘/your-proxy-route’: require.resolve(‘./app/routes’),},};Regarding LTE proxies, they are similar to 4G proxies and provide a secure and stable connection. Using such proxies can be beneficial for various purposes, such as bypassing geo-restrictions or improving security and anonymity.