> Note:
> Most of Shopify App Bridge’s functionality relies on actions. See the [Actions](/docs/api/app-bridge/previous-versions/actions) section to learn more about how to use these.

## Initialization methods

### `createApp(config)`

Returns an `app` object. Used to [initialize your app instance](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).

The config object should contain the following keys:

| Key | Type | Description |
|---|---|---|
| `apiKey` | string | The client ID provided for your application in the Partner Dashboard. |
| `host` | string | The base64-encoded origin/domain of the Shopify shop, which is provided by Shopify as a query parameter on the initial load of your app in the Shopify Admin. The host is set dynamically and should be stored in the session from the initial load. |

> Note
> In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).


<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="js" data-title="Modular JavaScript">
RAW_MD_CONTENTimport createApp from '@shopify/app-bridge';
const app = createApp(config);
END_RAW_MD_CONTENT</script>
<script type="text/plain" data-language="js" data-title="CDN-hosted">
RAW_MD_CONTENTvar AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
const app = createApp(config);
END_RAW_MD_CONTENT</script>

</div>
</p>


## App object methods

### `app.dispatch(action)`

Dispatches an action to Shopify App Bridge. Hosts (like Shopify Admin and Shopify Mobile) can subscribe to actions to listen for these dispatches.

| Key | Type | Description |
|---|---|---|
| `action` | Action | One of Shopify App Bridge’s included [actions](/docs/api/app-bridge/previous-versions/actions/).|

```js
app.dispatch(
  Redirect.toRemote({
    url: 'http://example.com',
  }),
);
```

### `app.error(callback)`

Subscribe to all errors, including those that are caused by actions. Returns a method you can use to unsubscribe from all errors.

| Key | Type | Description |
|---|---|---|
| `callback` | function | The function you want to execute when an error occurs.

```js
const unsubscribeFromErrors = app.error((data) => {
  const {
    type,    // the error type
    action,  // the original action including its id
    message, // additional hints on how to fix the error
  } = data;

  // Handle all errors here

  switch(type) {
    case Error.Action.INVALID_PAYLOAD:
    // Do something with the error
    break;
  }
});

// Unsubscribe from all errors
unsubscribeFromErrors();
```

### `app.getState()`

Returns a Promise which, when resolved, returns information about your app’s current state, including the currently logged in staff member.

```js
app.getState().then((data) => {
  const {
    appInfo,
    loading,
    modal,
    navigation,
    pos,
    resourcePicker,
    staffMember,
    titleBar,
    toast
  } = data;
});
```

### `app.subscribe(callback, id?)`

Subscribe to all actions. Returns a method you can use to unsubscribe.

Arguments:

| Key | Type | Description |
|---|---|---|
| `callback` | function | The function you want to execute when an action is dispatched. |
| `id` | int | The ID of a particular action set instance to subscribe to (optional). |

```js
const unsubscribeFromAll = app.subscribe((data) => {
  // Handle all actions here
  console.log(data);
});

// Unsubscribe from all actions
unsubscribeFromAll();
```

### `app.subscribe(eventNameSpace, callback, id?)`

When `eventNameSpace` or `id` are provided, this method subscribes to actions of the provided type.

Arguments:

| Key | Type | Description |
|---|---|---|
| `eventNameSpace` | string | Include this to subscribe only to actions of a particular type: for example, `Modal.Action.OPEN`. (optional) |
| `callback` | function | The function you want to execute when an action is dispatched. |
| `id` | int | The ID of a particular action set instance to subscribe to (optional). |

```js
const unsubscribeModalOpen = app.subscribe(Modal.Action.OPEN, (data) => {
  // Do something whenever a Modal open action is dispatched
});

// Unsubscribe from Modal open actions
unsubscribeModalOpen();
```

## Platform methods

The following utility methods, available in the [`app-bridge` package](https://www.npmjs.com/package/@shopify/app-bridge), return `true` or `false` depending on which platform an embedded app is running on:

- `isShopifyMobile`: Returns `true` if the app is running on [Shopify Mobile](https://help.shopify.com/manual/shopify-admin/shopify-app).
- `isShopifyPOS`: Returns `true` if the app is running on [Shopify POS](https://help.shopify.com/manual/sell-in-person/shopify-pos).
- `isShopifyPing`: Returns `true` if the app is running on [Shopify Ping](https://help.shopify.com/manual/ping).
- `isMobile`: Returns true if any of the conditions above are true.
- `isShopifyEmbedded`: Returns `true` if the app is running as an [embedded app](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup).

```js
import {isMobile, isShopifyEmbedded} from '@shopify/app-bridge/utilities';

if (isShopifyEmbedded()){
  if (isMobile()) {
    // app is running as an embedded on mobile
  } else {
    // app is running as an embedded app in a desktop web browser
  }
} else {
  // app is not running as an embedded app
}
```