# 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/`).
### Wrap a route with an AppProxyProvider component

```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 (
    &lt;AppProxyProvider appUrl={appUrl}&gt;
      Page content
    &lt;/AppProxyProvider&gt;
  );
}
```


## AppProxyProviderProps
Props for the `AppProxyProvider` component.
### AppProxyProviderProps

### appUrl
The URL where the app is hosted. You can set this from the `SHOPIFY_APP_URL` environment variable.
### children
The children to render.
## Related
- [authenticate.public.appProxy](/docs/api/shopify-app-remix/authenticate/public/app-proxy)
- [AppProxyForm](/docs/api/shopify-app-remix/app-proxy-components/appproxy-form)
- [AppProxyLink](/docs/api/shopify-app-remix/app-proxy-components/appproxy-link)