This is a template is heavily inspired from shopify-app-template-node and is used for building a Shopify app using Node and React in Typescript. It contains the basics for building a Shopify app.
The Node app template comes with the following out-of-the-box functionality:
- OAuth: Installing the app and granting permissions
- GraphQL Admin API: Querying or mutating Shopify admin data
- GraphQL Admin API Types: Types are generated run-time for all the queries and mutations within server's graphql directory.
- REST Admin API: Resource classes to interact with the API
- Shopify-specific tooling:
- AppBridge
- Polaris
- Webhooks with HMAC verification middleware
- App Proxy with HMAC verification middleware
- Typescript Configuration: Recommended rules for typescript are implied by default
- Linting and Formatting: Leveraging ESLint and Prettier to enforce linting rules and formatting code on pre-commit using Husky and Lint-Staged.
- Logging: This template leverages the popular Winston library to provide a robust logging solution. It supports logging to multiple tools and services, including:
- Prisma
- Rollbar
- Console
This template combines a number of third party open-source tools:
- Express builds the backend.
- Prisma to talk with the database
- Vite builds the React frontend.
- Typescript to enforce types.
- React Router is used for routing. We wrap this with file-based routing.
- React Query queries the Admin API.
i18nextand related libraries are used to internationalize the frontend.react-i18nextis used for React-specific i18n functionality.i18next-resources-to-backendis used to dynamically load app translations.@formatjs/intl-localematcheris used to match the user locale with supported app locales.@formatjs/intl-localeis used as a polyfill forIntl.Localeif necessary.@formatjs/intl-pluralrulesis used as a polyfill forIntl.PluralRulesif necessary.
- Winston for logging to different services
- Rollbar for error logging and monitoring in real-time
The following Shopify tools complement these third-party tools to ease app development:
- Shopify API library adds OAuth to the Express backend. This lets users install the app and grant scope permissions.
- App Bridge React adds authentication to API requests in the frontend and renders components outside of the App’s iFrame.
- Polaris React is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
- File-based routing makes creating new pages easier.
@shopify/i18next-shopifyis a plugin fori18nextthat allows translation files to follow the same JSON schema used by Shopify app extensions and themes.
- You must download and install Node.js if you don't already have it.
- You must create a Shopify partner account if you don’t have one.
- You must create a store for testing if you don't have one, either a development store or a Shopify Plus sandbox store.
The Shopify CLI connects to an app in your Partners dashboard. It provides environment variables, runs commands in parallel, and updates application URLs for easier development.
You can develop locally using npm package manager. Run one of the following commands from the root of your app.
Using npm:
npm run devOpen the URL generated in your console. Once you grant permission to the app, you can start development.
This template uses MySQL to store session data, with Prisma as the ORM to manage database interactions efficiently.
The choice of database depends on your app's data requirements and query patterns. You can either host your database on your own server or use a SaaS provider for managed hosting.
If you'd prefer to use a different form of storage for session data, you’ll need to update the session storage configuration accordingly. For guidance, refer to the list of available SessionStorage adapter packages.
Proper configuration is required to build and run the app. You can find the necessary configurations on your app's page in the Shopify Partners Dashboard.
Copy and paste your app's configurations into the .env file to ensure the app functions correctly.