Shopify App Node with TypeScript

This is a sample app (with TypeScript) to help developers bootstrap their Shopify app development.

It leverages the Shopify API Library on the backend to create an embedded app, and Polaris and App Bridge React on the frontend.

The original template (with JavaScript) is Shopify/shopify-app-template-node that is used when you create a new Node app with the Shopify CLI.

This is a minimalistic fork with TypeScript support.

Requirements

If you don’t have one, create a Shopify partner account.
If you don’t have one, create a Development store where you can install and test your app.
If you are not using the Shopify CLI, in the Partner dashboard, create a new app. You’ll need this app’s API credentials during the setup process.

Quickstart

Clone the repo

npx degit kanzitelli/shopify-app-template-typescript shopify-app-ts

Create Shopify app

You can do it using Shopify CLI:

shopify app create node

Then copy .env file to the typescript project and remove the one you just created.

Or you can do it in the Shopify Partner Dashboard and then filling .env file with app's credentials (see .env.example).

Note: HOST value will be auto-filled when you run the app.

Go to your app's directory and install packages

cd shopify-app-ts && yarn

Note: You could see error fatal: not a git repository (or any of the parent directories): .git that comes from husky install command. Once you do git init, it will disappear.

Run the app

shopify app serve

Install and start using the app by opening provided URL in your browser: https://some-ngrok-subdomain-xxxx.ngrok.io/login?shop=your-shop-name.myshopify.com

Deployment

We will probably need to deploy it somewhere in the cloud when we are done with the app.

So Dockerfile and Docker Compose with https:// setup will be coming soon...

Enhancements

There are plans to create an advanced shopify-app-starter that will be powered by React Router, Mobx, a more opinionated structure, release-it, and other useful things.

Similar starters

SaeedYasin/shopify-app-template - fork from the current one + Prisma support added, and some other addons.

Motivation

I started developing a Shopify app some time ago that uses NextJS and Koa, which are deprecated in favour of pure React App and Express. The codebase was primarily written using TS, and it was painful to see that Shopify doesn't provide a new template with TS setup. There is the issue since January 2022 where people ask for TS support but no luck so far. So that's how this repo was born. I tried to keep it as close as possible to the original repo but with TypeScript support.

License

This repository is available as open source under the terms of the MIT License.