---
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/app-proxy-components/appproxyprovider
  md: https://shopify.dev/docs/api/shopify-app-remix/v3/app-proxy-components/appproxyprovider.md
---

# App​Proxy​Providercomponent

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/`).

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

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