@trancong12102/shopify-app-react-router

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

Early access

This package is in early access. Most apps will be fine to adopt React Router. If you encounter issues please provide feedback.

Requirements

To use this package, you will need to have:

• a Shopify Partner account or the Shopify Dev Dashboard
• The Shopify CLI installed

Getting started

Scaffold an app template that uses this package using the Shopify CLI.

shopify app init --template=https://github.com/Shopify/shopify-app-template-react-router

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 @trancong12102/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 "@trancong12102/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 "@trancong12102/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.