Skip to main content

shopifyApp
function

Returns a set of functions that can be used by the app's backend to be able to respond to all Shopify requests.

The shape of the returned object changes depending on the value of distribution. If it is AppDistribution.ShopifyAdmin, then only ShopifyAppBase objects are returned, otherwise ShopifyAppLogin objects are included.

Function to create a new Shopify API object.

<Config>
required

Configuration options for your Shopify app, such as the scopes your app needs.

<Config extends <Resources, Storage, Future>>

ShopifyApp An object constructed using your appConfig. It has methods for interacting with Shopify.

Was this section helpful?

Set future flags using the future configuration field to opt in to upcoming breaking changes.

With this feature, you can prepare for major releases ahead of time, as well as try out new features before they are released.

boolean
Default: false

When enabled, methods for interacting with the admin REST API will not be returned.

This affects:

  • authenticate.admin(request) * authenticate.webhook(request) * authenticate.flow(request) * authenticate.appProxy(request) * authenticate.fulfillmentService(request) * unauthenticated.admin(shop)

In a future release we will remove REST from the package completely.

Please see: https://www.shopify.com/ca/partners/blog/all-in-on-graphql

Anchor to unstable_newEmbeddedAuthStrategy
unstable_newEmbeddedAuthStrategy
boolean
Default: false

When enabled, embedded apps will fetch access tokens via token exchange. This assumes the app has scopes declared for Shopify managing installation.

Learn more about this new embedded app auth strategy.

Was this section helpful?

The minimum viable configuration

/shopify.server.ts

import { shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
apiKey: process.env.SHOPIFY_API_KEY!,
apiSecretKey: process.env.SHOPIFY_API_SECRET!,
scopes: process.env.SCOPES?.split(",")!,
appUrl: process.env.SHOPIFY_APP_URL!,
});
export default shopify;

Add headers to all HTML requests by calling shopify.addDocumentResponseHeaders in entry.server.tsx.

Was this section helpful?

Return headers on all requests

import { shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
// ...etc
});
export default shopify;
export const addDocumentResponseheaders = shopify.addDocumentResponseheaders;

Use the functions in authenticate to validate requests coming from Shopify.

Was this section helpful?

Authenticate Shopify requests

import { LATEST_API_VERSION, shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
// ...etc
});
export default shopify;

Anchor to example-registering-shop-specific-webhooks-after-installRegistering shop-specific webhooks after install

Trigger the registration to create the shop-specific webhook subscriptions after a merchant installs your app using the afterAuth hook. Learn more about subscribing to webhooks.

Was this section helpful?

Registering shop-specific webhooks after install

app/shopify.server.ts

import { DeliveryMethod, shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
webhooks: {
PRODUCTS_CREATE: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: "/webhooks/products/create",
},
},
hooks: {
afterAuth: async ({ session }) => {
// Register webhooks for the shop
// In this example, every shop will have these webhooks
// You could wrap this in some custom shop specific conditional logic if needed
shopify.registerWebhooks({ session });
},
},
// ...etc
});

Import the @shopify/shopify-app-session-storage-prisma package to store sessions in your Prisma database.

Was this section helpful?

Storing sessions with Prisma

/app/shopify.server.ts

import { shopifyApp } from "@shopify/shopify-app-remix/server";
import { PrismaSessionStorage } from "@shopify/shopify-app-session-storage-prisma";
import prisma from "~/db.server";

const shopify = shopifyApp({
sessionStorage: new PrismaSessionStorage(prisma),
// ...etc
})

// shopify.sessionStorage is an instance of PrismaSessionStorage

Create contexts for requests that don't come from Shopify.

Was this section helpful?

Using unauthenticated contexts

import { LATEST_API_VERSION, shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
// ...etc
});
export default shopify;

Use shopify.login to create a login form, in a route that can handle GET and POST requests.

Was this section helpful?

Creating a login page

import { LATEST_API_VERSION, shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
// ...etc
});
export default shopify;