|
| 1 | +# Shopify App Template - Node |
| 2 | + |
| 3 | +This is a template for building a [Shopify app](https://shopify.dev/apps/getting-started) using Node and React. It contains the basics for building a Shopify app. |
| 4 | + |
| 5 | +Rather than cloning this repo, you can use your preferred package manager and the Shopify CLI with [these steps](#installing-the-template). |
| 6 | + |
| 7 | +## Benefits |
| 8 | + |
| 9 | +Shopify apps are built on a variety of Shopify tools to create a great merchant experience. The [create an app](https://shopify.dev/apps/getting-started/create) tutorial in our developer documentation will guide you through creating a Shopify app using this template. |
| 10 | + |
| 11 | +The Node app template comes with the following out-of-the-box functionality: |
| 12 | + |
| 13 | +- OAuth: Installing the app and granting permissions |
| 14 | +- GraphQL Admin API: Querying or mutating Shopify admin data |
| 15 | +- REST Admin API: Resource classes to interact with the API |
| 16 | +- Shopify-specific tooling: |
| 17 | + - AppBridge |
| 18 | + - Polaris |
| 19 | + - Webhooks |
| 20 | + |
| 21 | +## Tech Stack |
| 22 | + |
| 23 | +This template combines a number of third party open-source tools: |
| 24 | + |
| 25 | +- [Express](https://expressjs.com/) builds the backend. |
| 26 | +- [Vite](https://vitejs.dev/) builds the [React](https://reactjs.org/) frontend. |
| 27 | +- [React Router](https://reactrouter.com/) is used for routing. We wrap this with file-based routing. |
| 28 | +- [React Query](https://react-query.tanstack.com/) queries the Admin API. |
| 29 | + |
| 30 | +The following Shopify tools complement these third-party tools to ease app development: |
| 31 | + |
| 32 | +- [Shopify API library](https://github.com/Shopify/shopify-node-api) adds OAuth to the Express backend. This lets users install the app and grant scope permissions. |
| 33 | +- [App Bridge React](https://shopify.dev/apps/tools/app-bridge/getting-started/using-react) adds authentication to API requests in the frontend and renders components outside of the App’s iFrame. |
| 34 | +- [Polaris React](https://polaris.shopify.com/) is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants. |
| 35 | +- [Custom hooks](https://github.com/Shopify/shopify-frontend-template-react/tree/main/hooks) make authenticated requests to the Admin API. |
| 36 | +- [File-based routing](https://github.com/Shopify/shopify-frontend-template-react/blob/main/Routes.jsx) makes creating new pages easier. |
| 37 | + |
| 38 | +## Getting started |
| 39 | + |
| 40 | +### Requirements |
| 41 | + |
| 42 | +1. You must [download and install Node.js](https://nodejs.org/en/download/) if you don't already have it. |
| 43 | +1. You must [create a Shopify partner account](https://partners.shopify.com/signup) if you don’t have one. |
| 44 | +1. You must [create a development store](https://help.shopify.com/en/partners/dashboard/development-stores#create-a-development-store) if you don’t have one. |
| 45 | + |
| 46 | +### Installing the template |
| 47 | + |
| 48 | +This template can be installed using your preferred package manager: |
| 49 | + |
| 50 | +Using yarn: |
| 51 | + |
| 52 | +```shell |
| 53 | +yarn create @shopify/app |
| 54 | +``` |
| 55 | + |
| 56 | +Using npm: |
| 57 | + |
| 58 | +```shell |
| 59 | +npm init @shopify/app@latest |
| 60 | +``` |
| 61 | + |
| 62 | +Using pnpm: |
| 63 | + |
| 64 | +```shell |
| 65 | +pnpm create @shopify/app@latest |
| 66 | +``` |
| 67 | + |
| 68 | +This will clone the template and install the required dependencies. |
| 69 | + |
| 70 | +#### Local Development |
| 71 | + |
| 72 | +[The Shopify CLI](https://shopify.dev/apps/tools/cli) connects to an app in your Partners dashboard. It provides environment variables, runs commands in parallel, and updates application URLs for easier development. |
| 73 | + |
| 74 | +You can develop locally using your preferred package manager. Run one of the following commands from the root of your app. |
| 75 | + |
| 76 | +Using yarn: |
| 77 | + |
| 78 | +```shell |
| 79 | +yarn dev |
| 80 | +``` |
| 81 | + |
| 82 | +Using npm: |
| 83 | + |
| 84 | +```shell |
| 85 | +npm run dev |
| 86 | +``` |
| 87 | + |
| 88 | +Using pnpm: |
| 89 | + |
| 90 | +```shell |
| 91 | +pnpm run dev |
| 92 | +``` |
| 93 | + |
| 94 | +Open the URL generated in your console. Once you grant permission to the app, you can start development. |
| 95 | + |
| 96 | +## Deployment |
| 97 | + |
| 98 | +### Application Storage |
| 99 | + |
| 100 | +This template uses [SQLite](https://www.sqlite.org/index.html) 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. |
| 101 | + |
| 102 | +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: |
| 103 | + |
| 104 | +| Database | Type | Hosters | |
| 105 | +| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 106 | +| MySQL | SQL | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-mysql), [Planet Scale](https://planetscale.com/), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/mysql) | |
| 107 | +| PostgreSQL | SQL | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-postgresql), [Amazon Aurora](https://aws.amazon.com/rds/aurora/), [Google Cloud SQL](https://cloud.google.com/sql/docs/postgres) | |
| 108 | +| Redis | Key-value | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-redis), [Amazon MemoryDB](https://aws.amazon.com/memorydb/) | |
| 109 | +| MongoDB | NoSQL / Document | [Digital Ocean](https://www.digitalocean.com/try/managed-databases-mongodb), [MongoDB Atlas](https://www.mongodb.com/atlas/database) | |
| 110 | + |
| 111 | +To use one of these, you need to change your session storage configuration. To help, here’s a list of [SessionStorage adapter packages](https://github.com/Shopify/shopify-api-js/tree/main/docs/usage/session-storage.md). |
| 112 | + |
| 113 | +### Build |
| 114 | + |
| 115 | +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: |
| 116 | + |
| 117 | +Using yarn: |
| 118 | + |
| 119 | +```shell |
| 120 | +cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME yarn build |
| 121 | +``` |
| 122 | + |
| 123 | +Using npm: |
| 124 | + |
| 125 | +```shell |
| 126 | +cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME npm run build |
| 127 | +``` |
| 128 | + |
| 129 | +Using pnpm: |
| 130 | + |
| 131 | +```shell |
| 132 | +cd web/frontend/ && SHOPIFY_API_KEY=REPLACE_ME pnpm run build |
| 133 | +``` |
| 134 | + |
| 135 | +You do not need to build the backend. |
| 136 | + |
| 137 | +## Hosting |
| 138 | + |
| 139 | +When you're ready to set up your app in production, you can follow [our deployment documentation](https://shopify.dev/apps/deployment/web) to host your app on a cloud provider like [Heroku](https://www.heroku.com/) or [Fly.io](https://fly.io/). |
| 140 | + |
| 141 | +When you reach the step for [setting up environment variables](https://shopify.dev/apps/deployment/web#set-env-vars), you also need to set the variable `NODE_ENV=production`. |
| 142 | + |
| 143 | +## Known issues |
| 144 | + |
| 145 | +### Hot module replacement and Firefox |
| 146 | + |
| 147 | +When running the app with the CLI in development mode on Firefox, you might see your app constantly reloading when you access it. |
| 148 | +That happened in previous versions of the CLI, because of the way HMR websocket requests work. |
| 149 | + |
| 150 | +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: |
| 151 | + |
| 152 | +1. Change the definition `hmrConfig` object to be: |
| 153 | + |
| 154 | + ```js |
| 155 | + const host = process.env.HOST |
| 156 | + ? process.env.HOST.replace(/https?:\/\//, "") |
| 157 | + : "localhost"; |
| 158 | + |
| 159 | + let hmrConfig; |
| 160 | + if (host === "localhost") { |
| 161 | + hmrConfig = { |
| 162 | + protocol: "ws", |
| 163 | + host: "localhost", |
| 164 | + port: 64999, |
| 165 | + clientPort: 64999, |
| 166 | + }; |
| 167 | + } else { |
| 168 | + hmrConfig = { |
| 169 | + protocol: "wss", |
| 170 | + host: host, |
| 171 | + port: process.env.FRONTEND_PORT, |
| 172 | + clientPort: 443, |
| 173 | + }; |
| 174 | + } |
| 175 | + ``` |
| 176 | + |
| 177 | +1. Change the `server.host` setting in the configs to `"localhost"`: |
| 178 | + |
| 179 | + ```js |
| 180 | + server: { |
| 181 | + host: "localhost", |
| 182 | + ... |
| 183 | + ``` |
| 184 | +
|
| 185 | +### I can't get past the ngrok "Visit site" page |
| 186 | +
|
| 187 | +When you’re previewing your app or extension, you might see an ngrok interstitial page with a warning: |
| 188 | +
|
| 189 | +```text |
| 190 | +You are about to visit <id>.ngrok.io: Visit Site |
| 191 | +``` |
| 192 | +
|
| 193 | +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. |
| 194 | +We've validated that [Cloudflare Tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/run-tunnel/trycloudflare/) works with this template. |
| 195 | +
|
| 196 | +To do that, you can [install the `cloudflared` CLI tool](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/), and run: |
| 197 | +
|
| 198 | +```shell |
| 199 | +# Note that you can also use a different port |
| 200 | +cloudflared tunnel --url http://localhost:3000 |
| 201 | +``` |
| 202 | +
|
| 203 | +Out of the logs produced by cloudflare you will notice a https URL where the domain ends with `trycloudflare.com`. This is your tunnel URL. You need to copy this URL as you will need it in the next step. |
| 204 | +
|
| 205 | +```shell |
| 206 | +2022-11-11T19:57:55Z INF Requesting new quick Tunnel on trycloudflare.com... |
| 207 | +2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+ |
| 208 | +2022-11-11T19:57:58Z INF | Your quick Tunnel has been created! Visit it at (it may take some time to be reachable): | |
| 209 | +2022-11-11T19:57:58Z INF | https://randomly-generated-hostname.trycloudflare.com | |
| 210 | +2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+ |
| 211 | +``` |
| 212 | +
|
| 213 | +Below you would replace `randomly-generated-hostname` with what you have copied from the terminal. In a different terminal window, navigate to your app's root and with the URL from above you would call: |
| 214 | +
|
| 215 | +```shell |
| 216 | +# Using yarn |
| 217 | +yarn dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000 |
| 218 | +# or using npm |
| 219 | +npm run dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000 |
| 220 | +# or using pnpm |
| 221 | +pnpm dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000 |
| 222 | +``` |
| 223 | +
|
| 224 | +## Developer resources |
| 225 | +
|
| 226 | +- [Introduction to Shopify apps](https://shopify.dev/apps/getting-started) |
| 227 | +- [App authentication](https://shopify.dev/apps/auth) |
| 228 | +- [Shopify CLI](https://shopify.dev/apps/tools/cli) |
| 229 | +- [Shopify API Library documentation](https://github.com/Shopify/shopify-api-js#readme) |
0 commit comments