This repository is supplementary material to usage billing workshop.

In this workshop we will be adding a usage based billing workflow to the app template generated by the Shopify CLI. This workshop will use the app template using Node.js for the backend and React for the frontend. Usage based billing will allow you to charge merchants based off of how much they use your app, or use certain features within your app.

After completing this workshop you will have experience with:

• Using the Shopify API library to prompt users to accept a Usage Based subscription on install
• Create Usage Records to increase the amount a merchants will be charged
• Prompt a merchant to increase their plan if they reach their usage limit
• Subscribe to webhooks to be notified about changes to a merchant's subscription

• Usage Billing Workshop

• Usage Billing API Documenation

• Introduction to Shopify apps

• App authentication

• Shopify CLI

• Shopify API Library documentation

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

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

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.

2022-11-11T19:57:55Z INF Requesting new quick Tunnel on trycloudflare.com...
2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+
2022-11-11T19:57:58Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2022-11-11T19:57:58Z INF |  https://randomly-generated-hostname.trycloudflare.com                                     |
2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+

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:

# Using yarn
yarn dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
# or using npm
npm run dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
# or using pnpm
pnpm dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000