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.

Anchor to shopifyApp
shopifyApp(
appConfig
)

Function to create a new Shopify API object.

Anchor to shopifyApp-parametersParameters

Anchor to appConfig
appConfig
Readonly<Config>
required

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

Anchor to shopifyApp-returnsReturns

<Config extends <Storage, Future>>

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

Was this section helpful?

Anchor to future flagsFuture flags

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.

Was this section helpful?

The minimum viable configuration

/shopify.server.ts

import { shopifyApp } from "@shopify/shopify-app-react-router/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;

Anchor to examplesExamples

Anchor to example-adddocumentresponseheadersaddDocumentResponseHeaders

Anchor to example-return-headers-on-all-requestsReturn headers on all requests

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-react-router/server";

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

Anchor to example-authenticateauthenticate

Anchor to example-authenticate-shopify-requestsAuthenticate Shopify requests

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-react-router/server";

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

Anchor to example-registerwebhooksregisterWebhooks

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-react-router/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
});

Anchor to example-sessionstoragesessionStorage

Anchor to example-storing-sessions-with-prismaStoring sessions with Prisma

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-react-router/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

Anchor to example-unauthenticatedunauthenticated

Anchor to example-using-unauthenticated-contextsUsing unauthenticated contexts

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-react-router/server";

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

Anchor to example-loginlogin

Anchor to example-creating-a-login-pageCreating a login page

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-react-router/server";

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

Anchor to relatedRelated

Authenticate requests coming from Shopify.Authenticated contexts
Interact with the API on non-Shopify requests.Unauthenticated contexts