---
title: Migrate your app from EASDK to Shopify App Bridge
description: Migrate your application from EASDK to Shopify App Bridge.
api_name: app-bridge
source_url:
  html: https://shopify.dev/docs/api/app-bridge/previous-versions/migrating-legacy
  md: https://shopify.dev/docs/api/app-bridge/previous-versions/migrating-legacy.md
---

# Migrate your app from EASDK to Shopify App Bridge

**Deprecated:**

The [Embedded App SDK (EASDK)](https://shopify.dev/docs/api/embedded-app-sdk) is deprecated. After March 1st, 2022, apps that are using this SDK won't be listed on the Shopify App Store. Use [Shopify App Bridge](https://shopify.dev/docs/api/app-bridge) instead.

***

## Using Shopify App Bridge directly

If your app is using the [Embedded App SDK (EASDK)](https://shopify.dev/docs/api/embedded-app-sdk), then we recommend that you update your app using the [Shopify App Bridge](https://shopify.dev/docs/api/app-bridge). The EASDK will no longer receive updates.

If you update your app using the Shopify App Bridge actions directly, then you get the following benefits:

* modern front-end development workflows, including modular JavaScript
* strict versioning using SemVer, for even more stability and predictability

***

## Migrating your EASDK app

The best place to start is the [Embedded App SDK (EASDK) documentation](https://shopify.dev/docs/api/embedded-app-sdk), which has been updated with corresponding App Bridge methods. Here are a few additional things to keep in mind when migrating an existing app from EASDK to Shopify App Bridge.

**Note:**

After you've migrated your app to use Shopify App Bridge, Shopify continues to monitor your app for 30 days to ensure that the migration was successful and all EASDK methods have been removed. During this monitoring period, you'll still see a warning prompting you to update your app. If no EASDK calls are detected for 30 consecutive days, then the warning is automatically removed.

### Deprecated features

#### Shopify.​API.​Modal.​input

Input modals are not supported in Shopify App Bridge.

You can [use an iFrame modal instead](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/modal#create-an-iframe-modal).

#### Shopify.​API.​Modal.​set​Height

Modal size is [set in increments in App Bridge](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/modal#set-modal-size), and can [automatically fit to the modal contents](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/modal#set-modal-size-automatically).

#### Modal URL

Modals will not accept URLs from outside of your app's origin.

To embed content from another domain, create an iFrame modal and embed the content there.

#### Tertiary modal buttons

Because Shopify App Bridge gives you full control over button styling, primary and secondary buttons can now cover all use cases.

#### App icon

Setting an app icon via `ShopifyApp.Bar.setIcon` or `ShopifyApp.Bar.initialize` with an `icon` param has been deprecated.

You can now set your app icon on the **Configuration** page in the Partner Dashboard.

#### Shopify​App.​init with debug option

Calling `init` with the `debug` option is not supported in App Bridge.

We recommend [debugging using the Redux DevTools and the development version of the library instead](https://shopify.dev/docs/api/app-bridge/previous-versions/debugging).

#### Pagination

Adding pagination to the title bar using `ShopifyApp.Bar.initialize` and `ShopifyApp.Bar.setPagination` has been deprecated. We recommend implenting pagination within your app's UI. If you're using Polaris, then you can use the pagination controls provided by the Polaris Page component.

If you prefer to keep pagination in your app's titlebar, then you can use Shopify App Bridge to add pagination buttons to the titlebar.

##### Use Shopify App Bridge to add pagination buttons to the title bar

[Learn more about the TitleBar action set](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/titlebar).

```js
import createApp from '@shopify/app-bridge';
import { TitleBar, Button } from '@shopify/app-bridge/actions';


const app = createApp({
apiKey: '12345',
host: 'host from URL param',
});


const paginationPreviousButton = Button.create(app, { label: '←' })
paginationPreviousButton.subscribe(Button.Action.CLICK, function() {
// pagination previous action
})


const paginationNextButton = Button.create(app, { label: '→' })
paginationNextButton.subscribe(Button.Action.CLICK, function() {
// pagination next action
})


const titleBarOptions = {
buttons: {
  secondary: [paginationPreviousButton, paginationNextButton],
}
};
const myAppTitleBar = TitleBar.create(app, titleBarOptions);
```

##### Use the Polaris React Page component pagination controls

[Learn more about the Polaris Page component](https://polaris-react.shopify.com/components/layout-and-structure/page).

```jsx
import React, {useCallback} from 'react';
import {Page} from '@shopify/polaris';


function myApp() {


const paginationPrevious = useCallback(() => {
  // pagination previous action
}, []);


const paginationNext = useCallback(() => {
  // pagination next action
}, []);


const paginationOptions = {
  hasNext: true,
  hasPrevious: true,
  onNext: paginationNext,
  onPrevious: paginationPrevious
};


return (
  <Page title="My App" pagination={paginationOptions}>
    App
  </Page>
);
}
```

#### protocol URL parameter

Since all embedded apps must use HTTPS, the `protocol` parameter is no longer relevant.

### Keeping the frame URL in sync

The EASDK `initialize` function automatically updates the Shopify admin URL.

Since Shopify App Bridge is designed to accomodate a broader range of uses, it can't make this assumption. It's only aware of navigation using [History](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/navigation/history) and [Redirect](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/navigation/redirect-navigate) actions.

If your app uses links or server-side redirects for navigation, you can keep the URL in sync by dispatching a `History.Action.REPLACE` action wherever you called EASDK's `initialize` method (for example, after `createApp()`).

### Using modular Java​Script

```js
import createApp from '@shopify/app-bridge';
import { History } from '@shopify/app-bridge/actions';


function initializeApp() {
const app = createApp({
  apiKey: 'Client ID from Shopify Partner Dashboard',
  host: 'host from URL param'
});


const history = History.create(app);
history.dispatch(History.Action.REPLACE, `${window.location.pathname}`);


return app;
}
```

### Using ES5 and the CDN-hosted library

```js
var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
var actions = AppBridge.actions;
var History = actions.History;


function initializeApp() {
var app = createApp({
  apiKey: 'Client ID from Shopify Partner Dashboard',
  host: 'host from URL param'
});


var history = History.create(app);
history.dispatch(History.Action.REPLACE, window.location.pathname);


return app;
}
```

***