How to setup app proxy route in remix app?

Divy_tatva
Shopify Partner
32 1 9

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

Replies 3 (3)

Liam
Shopify Staff
2731 299 769

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!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

CodeCodeCode
Shopify Partner
4 0 1

Hey Liam, here is my theme extension code 

<script>
document.addEventListener('submit', async function(event) {
if (event.target.matches('form[action="/cart/add"]')) {
console.log("Form submitted");
console.log("Form submitted");
const productId = "43565159415939";
const data = { productId };

const response = await fetch('/apps/proxy943/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
}
});
</script>
 
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?
 
yunusarli
Shopify Partner
1 0 0

Did you find any solution for this?