Shopify React Router - to simplify the building of Shopify Apps with React Router
npm install @shopify/shopify-app-react-router@shopify/shopify-app-react-router

This package makes it easy to use React Router to build Shopify apps.
Please follow this quick start guide to get started.
Use the migration guide to migrate from the Shopify App Remix template.
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
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().
``ts
// 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.
`ts
// 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 }));
}
...
``
For solutions to common issues refer to the troubleshooting documentation for the solution to common issues.