# 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 <b>match the pathname of the proxy URL exactly</b>, and <b>end in a trailing slash</b> (e.g., `https://<shop>/apps/proxy/`).

```typescript
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>
  );
}
```

## AppProxyProviderProps

Props for the `AppProxyProvider` component.

### AppProxyProviderProps

### appUrl

value: `string`

The URL where the app is hosted. You can set this from the `SHOPIFY_APP_URL` environment variable.

### children

value: `React.ReactNode`

The children to render.

## Related

- [authenticate.public.appProxy](https://shopify.dev/docs/api/shopify-app-remix/authenticate/public/app-proxy)
- [AppProxyForm](https://shopify.dev/docs/api/shopify-app-remix/app-proxy-components/appproxyform)
- [AppProxyLink](https://shopify.dev/docs/api/shopify-app-remix/app-proxy-components/appproxylink)