@shopify/shopify-app-react-router

This package makes it easy to use React Router to build Shopify apps.

Getting started

Please follow this quick start guide to get started.

Migrating from Remix

Use the migration guide to migrate from the Shopify App Remix template.

Resources

Getting started:

• React Router docs
• Build a Shopify app
• shopify-app-react-router documentation

Shopify:

• Intro to Shopify apps
• Shopify App React Router docs
• Shopify CLI
• Shopify App Bridge.
• Polaris Web Components.
• App extensions
• Shopify Functions

Testing your app

This package exports a helper method through @shopify/shopify-app-react-router/test-helpers to simplify testing: testConfig(). This method can be used to pass dummy configuration properties to shopifyApp().

If your testing framework supports setting environment variables, we recommend using an environment variable, for example "SHOPIFY_TESTING" to replace your default config with the config returned from testConfig().

// my-app/app/shopify.server.ts
import { testConfig } from "@shopify/shopify-app-react-router/test-helpers";
...
const config = {
  ...
};

if (process.env.SHOPIFY_TESTING) {
  Object.assign(config, testConfig());
}

const shopify = shopifyApp(config);
...

testConfig() accepts a config object as an optional parameter. The config values provided override the default config values returned by testConfig(). This is especially useful for integration testing and end-to-end testing to ensure shopifyApp() reads the sessions from the development database.

// my-app/app/shopify.server.ts
import { testConfig } from "@shopify/shopify-app-react-router/test-helpers";
...
const sessionStorage = new PrismaSessionStorage(prisma);
const config = {
  ...
  sessionStorage,
  ...
};

if (process.env.SHOPIFY_TESTING) {
  Object.assign(config, testConfig());
}

if (process.env.SHOPIFY_TESTING === "e2e") {
  Object.assign(config, testConfig({ sessionStorage }));
}
...

Gotchas / Troubleshooting

For solutions to common issues refer to the troubleshooting documentation for the solution to common issues.