---
title: Shopify App package for Remix
description: |-
  The [@shopify/shopify-app-remix](https://www.npmjs.com/package/@shopify/shopify-app-remix) package enables Remix apps to authenticate with Shopify and make API calls. It uses [App Bridge](/docs/api/app-bridge-library) to enable apps to embed themselves in the Shopify Admin.

  In this page we'll go over the main components you need to integrate an app with Shopify.
api_version: v1
api_name: shopify-app-remix
source_url:
  html: https://shopify.dev/docs/api/shopify-app-remix/v1
  md: https://shopify.dev/docs/api/shopify-app-remix/v1.md
---

# Shopify App package for Remix

The [@shopify/shopify-app-remix](https://www.npmjs.com/package/@shopify/shopify-app-remix) package enables Remix apps to authenticate with Shopify and make API calls. It uses [App Bridge](https://shopify.dev/docs/api/app-bridge-library) to enable apps to embed themselves in the Shopify Admin.

In this page we'll go over the main components you need to integrate an app with Shopify.

***

## Quick start

The quickest way to create a new app is using the Shopify CLI. You can use your preferred package manager for that.

Check out the [getting started guide](https://shopify.dev/docs/apps/getting-started), or the [app template](https://github.com/Shopify/shopify-app-template-remix) for a complete example.

[![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/docs/apps/getting-started/build-qr-code-app)

[Navigate toBuild an app](https://shopify.dev/docs/apps/getting-started/build-qr-code-app)

### Examples

* #### Scaffold an app

  ##### npm

  ```sh
  npm init @shopify/app@latest
  ```

  ##### yarn

  ```sh
  yarn create @shopify/app
  ```

  ##### pnpm

  ```sh
  pnpm create @shopify/app
  ```

## Installation

If you're not using the CLI, then you can use the examples in this page to set up an existing app to use this package. Start by installing it using your preferred package manager.

### Examples

* #### Install package

  ##### npm

  ```sh
  npm i --save @shopify/shopify-app-remix
  ```

  ##### yarn

  ```sh
  yarn add @shopify/shopify-app-remix
  ```

  ##### pnpm

  ```sh
  pnpm add @shopify/shopify-app-remix
  ```

## Backend setup

Using the `shopifyApp` function, you can create an object that enables your app's backend to authenticate requests coming from Shopify, and interacting with Shopify APIs.

These functions make it easy for your app stays up to date, benefitting from the current best practices and security updates.

Caution

When running on a node environment, you'll also need to import the node adapter, as per the example. This will ensure your app is using the appropriate implementation of the Web [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) APIs.

[![](https://shopify.dev/images/icons/32/clicode.png)![](https://shopify.dev/images/icons/32/clicode-dark.png)](https://shopify.dev/docs/api/shopify-app-remix/entrypoints/shopifyapp)

[shopifyApp](https://shopify.dev/docs/api/shopify-app-remix/entrypoints/shopifyapp)

### Examples

* #### /app/shopify.server.ts

  ##### /app/shopify.server.ts

  ```ts
  import '@shopify/shopify-app-remix/server/adapters/node';
  import {
    LATEST_API_VERSION,
    shopifyApp,
  } from '@shopify/shopify-app-remix/server';

  const shopify = shopifyApp({
    apiKey: process.env.SHOPIFY_API_KEY!,
    apiSecretKey: process.env.SHOPIFY_API_SECRET!,
    appUrl: process.env.SHOPIFY_APP_URL!,
    scopes: ['read_products'],
    apiVersion: LATEST_API_VERSION,
  });
  export default shopify;
  ```

## Response headers

When loading inside the Shopify Admin, your app will need to add the required `Content-Security-Policy` header directives, as per [our documentation](https://shopify.dev/docs/apps/store/security/iframe-protection). To do that, this package provides the `shopify.addDocumentResponseHeaders` method.

You should return these headers from any endpoint that renders HTML in your app. Most likely you'll want to add this to every HTML response by updating the `entry.server.tsx` file:

### Examples

* #### /app/entry.server.tsx

  ##### /app/entry.server.tsx

  ```tsx
  import shopify from './shopify.server';

  export default function handleRequest(
    request: Request,
    responseStatusCode: number,
    responseHeaders: Headers,
    remixContext: EntryContext,
  ) {
    shopify.addDocumentResponseHeaders(request, responseHeaders);

    // ..etc
  }
  ```

## Error boundaries

The OAuth process can't happen inside the admin iframe, and this package is capable of detecting that scenario and properly redirecting using the [Remix `ErrorBoundary`](https://remix.run/docs/en/main/guides/errors) export to set the correct headers for App Bridge.

Use the abstractions provided by this package in your authenticated routes, to automatically set up the error and headers boundaries to redirect outside the iframe when needed.

Tip

You can also add this to a [Remix layout](https://remix.run/docs/en/main/file-conventions/route-files-v2) if you want to authenticate more than one route, but make sure to call the Shopify boundary methods whenever you need to add your own exports.

### Examples

* #### /app/routes/\*\*/\*.tsx

  ##### /app/routes/\*\*/\*.tsx

  ```tsx
  import {boundary} from '@shopify/shopify-app-remix/server';

  export function ErrorBoundary() {
    return boundary.error(useRouteError());
  }

  export const headers = (headersArgs) => {
    return boundary.headers(headersArgs);
  };
  ```

## OAuth route

To install an app or refresh tokens, you'll need to set up an [OAuth](docs/apps/auth/oauth) route. To do that, set up a [splat route](https://remix.run/docs/en/main/guides/routing#splats) that calls `authenticate.admin`.

When that function is called, the package will start the OAuth process, and handle the callback from Shopify after it completes.

The default route is `/app/routes/auth/$.tsx`, but you can configure this route using the `authPathPrefix` option.

### Examples

* #### /app/routes/auth/$.tsx

  ##### /app/routes/auth/$.tsx

  ```ts
  import {LoaderArgs} from '@remix-run/node';

  import shopify from '~/shopify.server';

  export async function loader({request}: LoaderArgs) {
    await shopify.authenticate.admin(request);

    // App logic goes here

    return null;
  }
  ```

## AppProvider

In order to use all of the features from App Bridge, you'll need to use the `AppProvider` component in your app's routes.

This component will set up App Bridge and Polaris so you can integrate your app into the Shopify Admin, and it helps us ensure your app stays up to date with Shopify requirements.

To do this pass the `process.env.SHOPIFY_API_KEY` to the frontend via the loader.

[![](https://shopify.dev/images/icons/32/shopify.png)![](https://shopify.dev/images/icons/32/shopify-dark.png)](https://shopify.dev/docs/api/app-bridge-library)

[Learn more about App Bridge.App bridge](https://shopify.dev/docs/api/app-bridge-library)

[![](https://shopify.dev/images/icons/32/shopify.png)![](https://shopify.dev/images/icons/32/shopify-dark.png)](https://polaris.shopify.com)

[Learn more about Polaris.Polaris](https://polaris.shopify.com)

[![](https://shopify.dev/images/icons/32/clicode.png)![](https://shopify.dev/images/icons/32/clicode-dark.png)](https://shopify.dev/docs/api/shopify-app-remix/entrypoints/appprovider)

[AppProvider](https://shopify.dev/docs/api/shopify-app-remix/entrypoints/appprovider)

### Examples

* #### /app/root.tsx

  ##### /app/root.tsx

  ```tsx
  import {LoaderArgs} from '@remix-run/node';
  import {AppProvider} from '@shopify/shopify-app-remix/react';

  import shopify from '~/shopify.server';

  export async function loader({request}: LoaderArgs) {
    await shopify.authenticate.admin(request);

    return json({
      apiKey: process.env.SHOPIFY_API_KEY,
    });
  }

  export default function App() {
    const {apiKey} = useLoaderData<typeof loader>();

    return (
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <AppProvider apiKey={apiKey} isEmbeddedApp>
            <Outlet />
          </AppProvider>
        </body>
      </html>
    );
  }
  ```