Menu Close

Share-Product-As-QR-Code-Shopify-App

Scan QR code based product discount Shopify App

This is a template for building a Shopify app using Node and React. It contains the basics for building a Shopify app.

Rather than cloning this repo, you can use your preferred package manager and the Shopify CLI with these steps.

Tech Stack

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

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.
  • Custom hooks make authenticated requests to the Admin API.
  • File-based routing makes creating new pages easier.

Getting started

Requirements

  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 store for testing if you don’t have one, either a development store or a Shopify Plus sandbox store.

Installing the template

This template can be installed using your preferred package manager:

Using yarn:

yarn create @shopify/app

Using npm:

npm init @shopify/app@latest

Using pnpm:

pnpm create @shopify/app@latest

This will clone the template and install the required dependencies.

Local Development

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.

Deployment

Application Storage

This template uses SQLite to store session data. The database is a file called database.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:

Database Type Hosters
MySQL SQL Digital Ocean, Planet Scale, Amazon Aurora, Google Cloud SQL
PostgreSQL SQL Digital Ocean, Amazon Aurora, Google Cloud SQL
Redis Key-value Digital Ocean, Amazon MemoryDB
MongoDB NoSQL / Document Digital Ocean, MongoDB Atlas

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

Build

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

Developer resources

View Source Code
Posted in Development