🐛 edit customer api env variable name to sync with cli (#1542)

.changeset/brave-taxis-laugh.md

@@ -0,0 +1,7 @@
+---
+'customer-api': patch
+'skeleton': patch
+'@shopify/cli-hydrogen': patch
+---
+
+Sync up environment variable names across all example & type files.

examples/customer-api/.gitignore

@@ -0,0 +1 @@
+.shopify

examples/customer-api/README.md

@@ -7,32 +7,31 @@ This is an example using the new Shopify [Customer Accounts API](https://shopify
 ## Requirements
 
 1. Hydrogen 2023.7 or later
-2. [Ngrok](https://ngrok.com/) for pointing a public https domain to your local machine required for oAuth
+1. A `Hydrogen` or `Headless` app/channel installed to your store and a storefront created
+1. [Ngrok](https://ngrok.com/) for pointing a public https domain to your local machine required for oAuth
 
-## Environment variables
+## Setup
 
-Create a `.env` file at the root of your project
+### Setup public domain using ngrok
 
-```toml
-PUBLIC_CUSTOMER_ACCOUNT_ID=shp_<your-id>
-PUBLIC_CUSTOMER_ACCOUNT_URL=https://shopify.com/<your-url-id>
-PUBLIC_STOREFRONT_API_TOKEN=<your-storefront-api-token>
-PUBLIC_STORE_DOMAIN=<your-store>.myshopify.com
-SESSION_SECRET=foobar
-```
+1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain (ie. `https://<your-ngrok-domain>.app`).
+1. Install the [ngrok CLI](https://ngrok.com/download) to use in terminal
+1. Start ngrok using `npm run ngrok --domain=<your-ngrok-domain>.app`
 
-## Setup
+### Include public domain in Customer Account API settings
+
+1. Go to your Shopify admin => `Hydrogen` or `Headless` app/channel => Customer Account API => Application setup
+1. Edit `Callback URI(s)` to include `https://<your-ngrok-domain>.app/authorize`
+1. Edit `Javascript origin(s)` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
+1. Edit `Logout URI` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
+
+### Prepare Environment variables
+
+To preview this example with mock data, copy `example.env` and rename it to `.env` in the root of your project.
+
+Alternatly, run [`npx shopify hydrogen link`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#link) or [`npx shopify hydrogen env pull`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#env-pull) to link this example to your own test shop
+
+### Start example
 
-1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain.
-2. Add the `Hydrogen` or `Headless` app/channel to your store via the Shopify admin
-3. Create a storefront if one doesn't exist
-4. Access the `Customer Account API` settings via the storefront settings page
-5. Copy the permanent domain from ngrok and add it as a `callback URI`: `https://your-ngrok-domain.app/authorize`
-6. Add a `JavaScript origin` with your ngrok domain: `https://your-ngrok-domain.app`
-7. Add a logout URI to your ngrok domain: `https://your-ngrok-domain.app`
-8. Copy the `Client ID` from the Customer Account API credentials to the `.env` `PUBLIC_CUSTOMER_ACCOUNT_ID` variable
-9. Copy the Customer Account API url to the `.env` `PUBLIC_CUSTOMER_ACCOUNT_URL` variable
-10. Update the ngrok npm script within `package.json` to use your ngrok domain
-11. Install the [ngrok CLI](https://ngrok.com/download)
-12. In a terminal start ngrok with `npm run ngrok`
-13. In another terminal, start hydrogen with `npm run dev`
+1. In a seperate terminal, start hydrogen with `npm run dev`
+1. Goto `https://<your-ngrok-domain>.app` to start the login process

examples/customer-api/example.env

@@ -3,5 +3,5 @@
 SESSION_SECRET="foobar"
 PUBLIC_STOREFRONT_API_TOKEN="3b580e70970c4528da70c98e097c2fa0"
 PUBLIC_STORE_DOMAIN="hydrogen-preview.myshopify.com"
-PUBLIC_CUSTOMER_ACCOUNT_ID="shp_0200d288-18b6-4799-8172-426957e6148e"
-PUBLIC_CUSTOMER_ACCOUNT_URL="https://shopify.com/55145660472"
+PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID="shp_0200d288-18b6-4799-8172-426957e6148e"
+PUBLIC_CUSTOMER_ACCOUNT_API_URL="https://shopify.com/55145660472"

examples/customer-api/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "shopify hydrogen build",
     "dev": "shopify hydrogen dev --worker",
-    "ngrok": "ngrok http --domain=<your-ngrok-domain> 3000",
+    "ngrok": "ngrok http --domain=${npm_config_domain} 3000",
     "preview": "npm run build && shopify hydrogen preview --worker",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "typecheck": "tsc --noEmit"

examples/customer-api/remix.env.d.ts

@@ -21,8 +21,8 @@ declare global {
     PRIVATE_STOREFRONT_API_TOKEN: string;
     PUBLIC_STORE_DOMAIN: string;
     PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_URL: string;
+    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
+    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
   }
 }
 

examples/customer-api/server.ts

@@ -57,8 +57,8 @@ export default {
         waitUntil,
         request,
         session,
-        customerAccountId: env.PUBLIC_CUSTOMER_ACCOUNT_ID,
-        customerAccountUrl: env.PUBLIC_CUSTOMER_ACCOUNT_URL,
+        customerAccountId: env.PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID,
+        customerAccountUrl: env.PUBLIC_CUSTOMER_ACCOUNT_API_URL,
       });
 
       /**

packages/cli/src/lib/setups/i18n/replacers.test.ts

@@ -82,6 +82,8 @@ describe('i18n replacers', () => {
             PRIVATE_STOREFRONT_API_TOKEN: string;
             PUBLIC_STORE_DOMAIN: string;
             PUBLIC_STOREFRONT_ID: string;
+            PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
+            PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
           }
 
           /**

templates/skeleton/remix.env.d.ts

@@ -24,6 +24,8 @@ declare global {
     PRIVATE_STOREFRONT_API_TOKEN: string;
     PUBLIC_STORE_DOMAIN: string;
     PUBLIC_STOREFRONT_ID: string;
+    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
+    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
   }
 }