Choose a version:

AppProxyProvider

Sets up a page to render behind a Shopify app proxy, enabling JavaScript and CSS to be loaded from the app.

Also provides components that enable using other components such as links and forms within proxies.

Caution

Because Remix 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., https://<shop>/apps/proxy/).

Anchor to appproxyproviderpropsAppProxyProviderProps

Props for the AppProxyProvider component.

Anchor to appUrl appUrl string required: The URL where the app is hosted. You can set this from the SHOPIFY_APP_URL environment variable.
Anchor to children children React.ReactNode: The children to render.

Examples

/app/routes/**\/*.ts

import {authenticate} from '~/shopify.server';

import {AppProxyProvider} from '@shopify/shopify-app-remix/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 (

Page content

</AppProxyProvider>

);

}

Examples

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-remix/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>
  );
}

Anchor to RelatedRelated

Authenticate app proxy requests.authenticate.public.appProxy

Render form elements in proxies.AppProxyForm

Render link elements in proxies.AppProxyLink

Was this page helpful?