This app includes code for the following:

• Common application structure for creating, viewing, editing, and deleting entities.
• A list view for the app index, along with an empty state to guide merchants using the app for the first time.
• App Bridge features relevant for most apps, e.g., Titlebar, Contextual Save Bar, Primary Action Button, Resource Picker.
• Polaris components relevant for most apps, e.g., Resource List, Radio button, Index Table.
• Layouts for mobile users on smaller screens.
• A database storing application data.

The app is based on the Shopify App Template for Node. That 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
• REST Admin API: Resource classes to interact with the API
• Shopify-specific tooling:
  • AppBridge
  • Polaris
  • Webhooks

This example app combines a number of third party open-source tools:

• Express builds the backend.
• Vite builds the React frontend.
• React Router is used for routing. We wrap this with file-based routing.
• React Query queries the Admin API.

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 embedded App’s iFrame.
• Polaris React is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
• Custom hooks make authenticated requests to the Admin API.
• File-based routing makes creating new pages easier.

1. You must download and install Node.js if you don't already have it.
2. You must create a Shopify partner account if you don’t have one.
3. You must create a development store if you don’t have one.

1. Use git to clone the example app to your computer:

git clone https://github.com/Shopify/shopify-app-examples

1. Install the required dependencies. You can use your preferred package manager:

Using yarn:

cd qr-code/node
yarn install

Using npx:

cd qr-code/node
npm install

Using pnpm:

cd qr-code/node
pnpm install

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 your preferred package manager. Run one of the following commands from the root of your app.

Using yarn:

yarn dev

Using npm:

npm run dev

Using pnpm:

pnpm run dev

Open the URL generated in your console. Once you grant permission to the app, you can start development.

This template uses SQLite to store session data as well as the QR Codes themselves. The database is a file called db.sqlite which is automatically created in the root. This use of SQLite works in production if your app runs as a single instance.

The database that works best for you depends on the data your app needs and how it is queried. You can run your database of choice on a server yourself or host it with a SaaS company. Here’s a short list of databases providers that provide a free tier to get started:

To use one of these, you need to change your session storage configuration. To help, here’s a list of SessionStorage adapters.

The frontend is a single page app. It requires the SHOPIFY_API_KEY, which you can find on the page for your app in your partners dashboard. Paste your app’s key in the command for the package manager of your choice:

Using yarn:

cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME yarn build

Using npm:

cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME npm run build

Using pnpm:

cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME pnpm run build

You do not need to build the backend.

The following pages document the basic steps to host and deploy your application to a few popular cloud providers:

• fly.io
• Heroku

When running the app with the CLI in development mode on Firefox, you might see your app constantly reloading when you access it. That happened in previous versions of the CLI, because of the way HMR websocket requests work.

We fixed this issue with v3.4.0 of the CLI, so after updating it, you can make the following changes to your app's web/frontend/vite.config.js file:

1. Change the definition hmrConfig object to be:

   const host = process.env.HOST
     ? process.env.HOST.replace(/https?:\/\//, "")
     : "localhost";
   
   let hmrConfig;
   if (host === "localhost") {
     hmrConfig = {
       protocol: "ws",
       host: "localhost",
       port: 64999,
       clientPort: 64999,
     };
   } else {
     hmrConfig = {
       protocol: "wss",
       host: host,
       port: process.env.FRONTEND_PORT,
       clientPort: 443,
     };
   }

2. Change the server.host setting in the configs to "localhost":

   server: {
     host: "localhost",
     ...

• Introduction to Shopify apps
• App authentication
• Shopify CLI
• Shopify API Library documentation
• Shopify App Templates
  • Node backend
  • PHP backend
  • Ruby backend
  • React frontend