Typescript implementation of the shopif-app-template-node

Overview

Shopify App Template - Node

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.

Benefits

Shopify apps are built on a variety of Shopify tools to create a great merchant experience. The create an app tutorial in our developer documentation will guide you through creating a Shopify app using this template.

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
  • REST Admin API: Resource classes to interact with the API
  • Shopify-specific tooling:
    • AppBridge
    • Polaris
    • Webhooks

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 development store if you don’t have one.

Installing the template

Clone this repository :D

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 adapters.

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

You do not need to build the backend.

Hosting

When you're ready to set up your app in production, you can follow our deployment documentation to host your app on a cloud provider like Heroku or Fly.io.

When you reach the step for setting up environment variables, you also need to set the variable NODE_ENV=production.

Some things to watch out for

Using express.json middleware

If you use the express.json() middleware in your app and if you use Shopify.Webhooks.Registry.process() to process webhooks API calls from Shopify (which we recommend), the webhook processing must occur before calling app.use(express.json()). See the API documentation for more details.

Known issues

Hot module replacement and Firefox

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",
      ...

I can't get past the ngrok "Visit site" page

When you’re previewing your app or extension, you might see an ngrok interstitial page with a warning:

You are about to visit <id>.ngrok.io: Visit Site

If you click the Visit Site button, but continue to see this page, then you should run dev using an alternate tunnel URL that you run using tunneling software. We've validated that Cloudflare Tunnel works with this template.

To do that, you can install the cloudflared CLI tool, and run:

# Note that you can also use a different port
cloudflared tunnel --url http://localhost:3000

In a different terminal window, navigate to your app's root and call:

# Using yarn
yarn dev --tunnel-url https://tunnel-url:3000
# or using npm
npm run dev --tunnel-url https://tunnel-url:3000
# or using pnpm
pnpm dev --tunnel-url https://tunnel-url:3000

Developer resources

You might also like...

A TypeScript implementation of High-Performance Polynomial Root Finding for Graphics (Yuksel 2022)

Nomial Nomial is a TypeScript implementation of Cem Yuksel's extremely fast, robust, and simple root finding algorithm presented in the paper "High-Pe

Aug 3, 2022

An implementation of Saudi Arabia ZATCA's E-Invoicing requirements, processes, and standards in TypeScript.

An implementation of Saudi Arabia ZATCA's E-Invoicing requirements, processes, and standards in TypeScript.

v0.1.0 (experimental) An implementation of Saudi Arabia ZATCA's E-Invoicing requirements, processes, and standards in TypeScript. Read the documentati

Nov 21, 2022

A lightweight Nano Node implementation made for wallets, exchanges and other services.

About This is a Light Nano Node implementation made for Wallets, Exchanges and other services. This Node has been built to be compatible with the offi

Jun 25, 2022

A Node.js client & server implementation of the WAMP-like RPC-over-websocket system defined in the OCPP-J protcols.

A Node.js client & server implementation of the WAMP-like RPC-over-websocket system defined in the OCPP-J protcols.

OCPP-RPC A client & server implementation of the WAMP-like RPC-over-websocket system defined in the OCPP-J protcols (e.g. OCPP1.6J and OCPP2.0.1J). Re

Nov 21, 2022

API implementation for the TERA Online retail server (patch 92/100) on Node.js.

tera-api API implementation for the TERA Online retail server (patch 92/100) on Node.js. The API consists of two independent servers running on differ

Nov 17, 2022

Node.js implementation of the Socket SDK client

SYNOPSIS A Node.js adapter for the Socket SDK DESCRIPTION Socket SDK uses a simple uri-based protocol for brokering messages between the render proces

Oct 30, 2022

This document introduces an early implementation of the Node-RED runtime that runs on resource-constrained microcontrollers (MCUs).

Node-RED MCU Edition Copyright 2022, Moddable Tech, Inc. All rights reserved. Peter Hoddie Updated June 25, 2022 Introduction This document introduces

Nov 9, 2022

An implementation of gRPC health checks, for node.js-based apps that uses @grpc/grpc-js as a base.

gRPC Health Check An implementation of gRPC health checks, for node.js-based apps that uses @grpc/grpc-js as a base. Installation yarn add git+https:/

Aug 31, 2022

A quotaless, partially limitless, and fast Node.js Multiplayer Piano server implementation that efficiently makes use of the protocol and uWebSockets.js

speedymppserver A quotaless, partially limitless, and fast Node.js Multiplayer Piano server implementation that efficiently makes use of the protocol

Oct 14, 2022
Owner
Kai Spencer
Software Engineer working for NHS Digital. Specifically: AWS serverless, Terraform, Python, React.js, Angular, Typescript
Kai Spencer
A front-end only implementation of linked template cards for Lovelace

Linked Lovelace by @daredoes A Javascript/Websocket way to do templating in the Lovelace UI Support Hey you! Help me out for a couple of ?? or a ☕ ! F

Daniel Evans 11 Nov 29, 2022
This project is a boilerplate for Next and TypeScript projects. This template was built with Vite, TypeScript and Stitches.

Awesome Template Stitches — NextJS, TypeScript, Stitches and Design Tokens Summary About this template Avaliale scripts Other scripts available Main t

Diego Silva 13 Nov 17, 2022
A node, express and typescript starter template for 2022

Node Express & Typescript Starter for 2022 "A minimally opinionated typescript & express starter for 2022" Usage: You should copy .env.sample to .env

Carter Adams 12 Nov 6, 2022
A Node.js REST API example built with Express and Typescript that can be used as template for creation of new servers.

api-example-firebase-nodejs A Node.js REST API example built with Express and Typescript that can be used as template for creation of new servers. The

Rodrigo João Bertotti 5 Nov 25, 2022
A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker.

Node.js Template Quickly start a new Node.js project A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker. ⏩ G

Lorenzo Carneli 2 Oct 12, 2022
Template TypeScript Node.js package with all the CI bells & whistles I commonly use. ✨

Template TypeScript Node Package Template TypeScript Node.js package with all the CI bells & whistles I commonly use. ✨ Usage npm i template-typescrip

Josh Goldberg 6 Nov 18, 2022
Template to start developing a REST API with Node.js (Express), TypeScript, DDD, etc. 🔰🦸

Typescript DDD Boilerplate Plantilla para una API con Typescript basada en arquitectura DDD. En qué consiste este proyecto Este proyecto es un punto d

Bryan Herrera ~ ርᚱ1ናተᛰ ᚻህᚥተპᚱ 2 Nov 2, 2022
💻 A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools.

⚡ Next Typescript Template ⚡ A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools. Quic

João Gabriel 13 Nov 2, 2022
Charm implementation in JavaScript (TypeScript)

charm.js A tiny, self-contained cryptography library, implementing authenticated encryption and keyed hashing. Any number of hashing and authenticated

Frank Denis 12 Nov 2, 2022
Implementation of original Lisp as described in Paul Graham's article "The Roots of Lisp". In Typescript

Roots of Lisp This is the implementation of original Lisp from 1960 as described in Paul Graham's article How to use Building If you just want to run

Serhii Dolia 7 Oct 28, 2022