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 appUrlappUrlstringrequired
The URL where the app is hosted. You can set this from the
environment variable.- Anchor to childrenchildrenReact.ReactNode
The children to render.
AppProxyProviderProps
- appUrl
The URL where the app is hosted. You can set this from the `SHOPIFY_APP_URL` environment variable.
string - children
The children to render.
React.ReactNode
export interface AppProxyProviderProps {
/**
* The URL where the app is hosted. You can set this from the `SHOPIFY_APP_URL` environment variable.
*/
appUrl: string;
/**
* The children to render.
*/
children?: React.ReactNode;
}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>
);
}
examples
Wrap a route with an AppProxyProvider component
description
Wrap your route component in the `AppProxyProvider` component and pass in your app URL.
/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> ); }
