---
title: AppProxyProvider
description: >-
  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/`).
api_version: v3
api_name: shopify-app-remix
source_url:
  html: >-
    https://shopify.dev/docs/api/shopify-app-remix/v3/entrypoints/appproxyprovider
  md: >-
    https://shopify.dev/docs/api/shopify-app-remix/v3/entrypoints/appproxyprovider.md
---

# App​Proxy​Provider

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\&#39;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., \<code>\<span class="PreventFireFoxApplyingGapToWBR">https://\&lt;shop\&gt;/apps\<wbr/>/proxy\<wbr/>/\</span>\</code>).

## AppProxyProviderProps

Props for the `AppProxyProvider` component.

* **appUrl**

  **string**

  **required**

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

* **children**

  **React.ReactNode**

  The children to render.

Examples

### 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

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

## Related

[Authenticate app proxy requests. - authenticate.public.appProxy](https://shopify.dev/docs/api/shopify-app-remix/authenticate/public/app-proxy)

[Render form elements in proxies. - AppProxyForm](https://shopify.dev/docs/api/shopify-app-remix/app-proxy-components/appproxyform)

[Render link elements in proxies. - AppProxyLink](https://shopify.dev/docs/api/shopify-app-remix/app-proxy-components/appproxylink)