Gadget app url in app proxy not working
Hey
I am using gadget url as app proxy but it is not displaying any data however if I directly visit the link it opens. Can anybody tell me which url to use here?
19 Replies
Hello,
Could you please share how you call the URL in your storefront code?
Also, looking at your Gadget app, you don't have any routes for the proxy
With no routes, there's nothing for the proxy to hit
here's the link i used: https://try-before-you-buy-almond-labs--development.gadget.app/customer_area
I populated it according to the docs.
Your base route in Gadget (for the proxy) needs to be
<proxyURL>/<subPath>
You didn't set up the Gadget end of the app proxy so no matter what you put in the proxy settings, in Shopify, the calls will fail
I am using this to access: https://orion-master.myshopify.com/apps/tbyb-almondlabs/customer_area?customer_id=8024873566460&shop_id=66730754300&authentication_token=fca85d2b040d5da4e6faaf724b7c65d9d3728ababbb5e4bb01a81eac03502221
Actually I just exposed the route without authentication on the gadget side in the App.jsx.
like this
const isCustomerPath = window.location.pathname.startsWith("/customer_area");
if (isCustomerPath) {
return <CustomerApp />;
}
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Layout />}>
<Route index element={<Navigate to="/settings" replace />} />
<Route path="/settings" element={<Settings />} />
<Route path="*" element={<Error404 />} />
</Route>
)
);
Shopify app proxies aren't meant for rendering a React app in the storefront. What you're trying to do won't work
So, how should I configure my gadget app for the proxy to work?
You need to make backend routes which will handle the requests. Then you can send back data, not frontend code
understood, but where should i write the frontend code then?
The root URL of the proxy needs to be <proxyURL>/<subPath>
The frontend code needs to be in the storefront Liquid
Do you have a theme app extension?
yes
Then make some JS code in the theme app extension that will use the return of the request to display a UI
Actually, I can't use theme extension. As, I am creating a customer portal and shopify recommended to use app proxy to render views and forms here: https://shopify.dev/docs/apps/build/purchase-options/customer-portal/create-customer-portal
Not sure how can we use proxy to render view if its not serving react applications.
As you said to use theme extensions, but I would need a separate route for the customer portal that I can't do with theme extensions.
For a Try Before You Buy (TBYB) Customer Portal where customers can view & pay for their orders - that's why i need a new route which i can expose via an email and where the customer could visit
Have you asked Shopify for their recommendations?
nope but they mentioned in the docs
After clicking the link, the customer is redirected to an endpoint predetermined by the URL.
For example, if the following URL is provided:
https://example.com/apps/my-purchase-option-app/customer_area?customer_id={customer_id}&shop_id={shop_id}&authentication_token={authentication_token}
Then Shopify makes a request to the following endpoint:
https://my-purchase-option-app.com/app_proxy/customer_area?customer_id={customer_id}&shop_id={shop_id}&authentication_token={authentication_token}
The app can then implement the relevant views and forms. For example, the app might do the following implementation tasks:
Updating billing and shipping addresses
Pausing, unpausing, skipping, and canceling subscriptions
Canceling and modifying pre-orders
I am confused how can the app implement the relevant views via the app proxy
are they talking about simple html and not react apps
I'm not familiar with the thing that you're trying to do so I don't know what their docs are referring to. You should ask them first and then I can point you in the right direction
You might honestly be able to do something like this but you'd need to redirect the user to that React app (from backend routes): https://shopify.dev/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/show-gates-storefront
Shopify
Show gates on the storefront using a theme app extension
Learn how to show the gates in the online store, verify that the customer is the owner of the wallet, and pass the gate context to checkout.
or as it allows sending html from server; can i use server-side rendering with hydration of the customerPortal component of the react app; I think vite also make the easier to configure: any thoughts on this?
for example:
// vite.config.js
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import { gadget } from "gadget-server/vite";
import ssr from 'vite-plugin-ssr/plugin'
export default defineConfig({
plugins: [
gadget(),
react(),
ssr() // Add SSR plugin
],
clearScreen: false,
build: {
rollupOptions: {
input: {
main: './src/index.jsx', // Your admin app entry
customer: './src/client/customerEntry.jsx' // Customer portal entry
}
}
}
});
// src/server/customerRender.jsx
import { renderToString } from 'react-dom/server';
import { CustomerApp } from '../components/CustomerApp';
export async function renderCustomerPortal(initialData) {
const html = renderToString(<CustomerApp initialData={initialData} />);
return
return
<!DOCTYPE html>
<html>
<head>
<title>Customer Portal</title>
<!-- Include any Gadget-specific meta tags -->
</head>
<body>
<div id="customer-root">${html}</div>
<script>window.__INITIAL_DATA__ = ${JSON.stringify(initialData)}</script>
<script type="module" src="/src/client/customerEntry.jsx"></script>
</body>
</html>;
}