Shopify App package for React Router
The @shopify/shopify-app-react-router package enables React Router apps to authenticate with Shopify and make API calls. It uses App Bridge to enable apps to embed themselves in the Shopify Admin.
On this page learn the key concepts when building an app with this package.
Anchor to quick-startQuick start
The quickest way to create a new app is using the Shopify CLI, and the Shopify App Template.
Check out the getting started guide, or the app template.
Create an app
Terminal
Anchor to shopify-appConfigure the package
Using the function, you can configure the package's functionality for different app distributions types, access tokens, logging levels and future flags.
Configure ShopifyApp
/app/shopify.server.ts
Anchor to graphql-requestMake Admin API GraphQL requests
Authenticated requests with the Admin API GraphQL client are made by calling the admin.graphql
function. This function returns a GraphQL client that is authenticated with the Admin API.
Make a GraphQL request
/app/routes/admin/$.tsx
Anchor to add-routesAdd a new route to your app
Routes embedded in the Shopify Admin must be nested under an Admin layout route for proper authentication and functionality.
The template includes an admin route at that handles App Bridge initialization, authenticates requests via
authenticate.admin
, provides error boundaries and headers required by the admin.
When creating new routes, place them in the directory with the
app.
prefix (e.g., app.products.tsx
) to ensure they inherit these features. This structure ensures your app behaves correctly within the Shopify Admin and has access to authenticated API clients.
Add a route
Anchor to authenticate-webhookAuthenticate Webhook Requests
The package provide functions to authenticate webhook requests. This function returns a webhook client that is authenticated with the Admin API.
Ensure your webhook route is not nested under you app layout route.
Authenticate Webhook Requests
/app/routes/webhooks.app.product_updated.tsx
Anchor to session-storageSession Storage
When using this package, installed shops access tokens will be stored in session storage.You can configure the storage mechanism by passing a custom storage object to the function.By default, the template will use Prisma and SQLite, but other session storage adapters are available.
The type of session storage you use may impact how your app will be deployed.
Session Storage
/app/shopify.server.ts
Anchor to deploy-appDeploy your app
You can deploy your app to your preferred hosting service that is compatible with JavaScript apps. Review our deployment guide to learn about the requirements for deploying your app.