App
component
Sets up a page to render behind a Shopify app proxy, enabling JavaScript and CSS to be loaded from the app.
Caution
Because React Router doesn't support URL rewriting, any route using this component should match the pathname of the proxy URL exactly, and end in a trailing slash (e.g., ).
Anchor to appproxyproviderpropsAppProxyProviderProps
Props for the component.
Anchor to appUrl
appUrl
string
required
The URL where the app is hosted. You can set this from the environment variable.
Anchor to children
children
React.ReactNode
The children to render.
Was this section helpful?
Wrap a route with an AppProxyProvider component
/app/routes/**\/*.ts
import {authenticate} from '~/shopify.server';
import {AppProxyProvider} from '@shopify/shopify-app-react-router/react';
export async function loader({ request }) {
await authenticate.public.appProxy(request);
return json({ appUrl: process.env.SHOPIFY_APP_URL });
}
export default function App() {
const { appUrl } = useLoaderData();
return (
<AppProxyProvider appUrl={appUrl}>
Page content
</AppProxyProvider>
);
}
