Shopify Multistore App Middleware
Requirements
- Multiple Shopify Stores,
- Shopify App Created in Partners Account - one for each store - this is where we get unique API_KEY and API_SECRET from,
- Each App needs to have the URL configured to point to the same URL where we have our App deployed, so multiple apps but pointing to same URL,
Usage:
npm install @paweljedrzejczyk/shopify-multistore-app-middleware
createMultistoreMiddleware
import express from "express";
import { createMultistoreMiddleware } from "@paweljedrzejczyk/shopify-multistore-app-middleware";
const app = express();
app.use(createMultistoreMiddleware(createShopifyApp));
where createShopifyApp
is a function you declare that will accept the (shop: string)
argument and return ShopifyApp
instance created with @shopify/shopify-app-express
. Shop passed as argument is sanitized to be used within the process.env variable name so it's also uppercased etc.
Consider we are connecting from my-dummy-store-1.myshopify.com
store, the store argument will be: MY_DUMMY_STORE_1
. The createShopifyApp
function is up to us how we want to have it, but we can allow multiple shops by exposing process.env variables like:
process.env.SHOPIFY_API_KEY_MY_DUMMY_STORE_1 = 'XYZ';
process.env.SHOPIFY_API_SECRET_MY_DUMMY_STORE_1 = 'XYZ';
example:
import { LATEST_API_VERSION } from "@shopify/shopify-api";
import { ShopifyApp, shopifyApp } from "@shopify/shopify-app-express";
import { AppConfigParams } from "@shopify/shopify-app-express/build/ts/config-types";
import { PostgreSQLSessionStorage } from "@shopify/shopify-app-session-storage-postgresql";
let { restResources } = await import(
`@shopify/shopify-api/rest/admin/${LATEST_API_VERSION}`
);
export const shopifyAppConfig: Pick<AppConfigParams, "auth" | "webhooks"> = {
auth: {
path: "/api/auth",
callbackPath: "/api/auth/callback",
},
webhooks: {
path: "/api/webhooks",
},
};
export const createShopifyApp = (shop: string): ShopifyApp => {
const app = shopifyApp({
api: {
apiVersion: LATEST_API_VERSION,
restResources,
apiKey: process.env[`SHOPIFY_API_KEY_${shopName}`],
apiSecretKey: process.env[`SHOPIFY_API_SECRET_${shopName}`],
},
auth: shopifyAppConfig.auth,
webhooks: shopifyAppConfig.webhooks,
sessionStorage: new PostgreSQLSessionStorage(
new URL(process.env.DATABASE_URL)
),
});
return app;
};
In the example above multiple stores will be using different shopify API keys, but same postgres database. We can rewrite it to connect to separate database for each store if needed.
useShopifyApp
ShopifyApp
instance is later stored in res.locals.shopify.app
to be used in the request handlers, this is where useShopifyApp
comes handy.
We can rewrite:
app.get(shopifyAppConfig.auth.path, (req, res, next) => {
return res.locals.shopify.app.auth.begin()(res, res, next);
});
to:
app.get(
shopifyAppConfig.auth.path,
useShopifyApp((shopifyApp) => shopifyApp.auth.begin())
);
getShopifyApp
This function is just a shortcut for accessing res.locals.shopify.app
but it does return proper typing. Used to access the shopify app within the request handler.
Example:
app.post(
"/api/graphql",
useShopifyApp((shopifyApp) => shopifyApp.validateAuthenticatedSession()),
async (req, res) => {
try {
const response = await getShopifyApp(res).api.clients.graphqlProxy({
session: res.locals.shopify.session,
rawBody: req.body,
});
return res.status(200).send(response.body);
} catch (error: unknown) {
return res.status(500).send(error);
}
}
);