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);
    }
  }
);