🌍 Shopify Node App with Typescript tRPC, Redis and Prisma [WIP]

This is a template for building a Shopify app using Node and React.

🚀 It contains the basics for building a Shopify app + Typesafety, tRPC routers redis and prisma! 🚀

🟢 Ready to use on your next project!

Commits and PRs are welcome! :)

🟢 What works

[✅] - Shopify CLI, create theme-app-extensions deploy etc

[✅] - tRPC

[✅] - Express & Node

[✅] - Redis

[✅] - Prisma DB client works

[✅] - Typesafe GraphQL Codegen Generator

Benefits

Typesafety over all! Plus main node shopify functionalities like theme-app-extensions are working out of the box for embedded apps. I'm using Railway for redis and prisma.

Tech Stack

This template 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.
• Prisma ORM
• Trpc for API routing
• Redis for caching
• Graphql for graphql codegen

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.
4. Add you .env with your keys

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 pnpm:

pnpm run dev

To generate Graphql, write some queries under graphql and run:

cd web/frontend && 
pnpm generate

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

Deployment

Application Storage

This template uses planetscale, but you can use anything you want with your prisma file. You can change the url on the .env file.

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 pnpm:

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

You do not need to build the backend.

Theme app extensions

Easily add theme app extensions

Important to know you might need to go to https://partners.shopify.com/ > All apps > Your app > Browse Extensions and enable to work

npm run shopify app generate extension

Hosting

I personally prefer digitalocean apps, easy to setup and cheap! You can use this link to signup with a referral :)

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

You can always find more info on the official shopify node app template https://github.com/Shopify/shopify-api-node/tree/main/docs

Developer resources

• Introduction to Shopify apps
• App authentication
• Shopify CLI
• Shopify API Library documentation