From b2a350a754ea2d29bc267c260dc298a02f8f4470 Mon Sep 17 00:00:00 2001 From: Michelle Chen Date: Tue, 5 Dec 2023 12:39:30 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20edit=20customer=20api=20env=20va?= =?UTF-8?q?riable=20name=20to=20sync=20with=20cli=20(#1542)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/brave-taxis-laugh.md | 7 +++ examples/customer-api/.gitignore | 1 + examples/customer-api/README.md | 47 +++++++++---------- examples/customer-api/example.env | 4 +- examples/customer-api/package.json | 2 +- examples/customer-api/remix.env.d.ts | 4 +- examples/customer-api/server.ts | 4 +- .../cli/src/lib/setups/i18n/replacers.test.ts | 2 + templates/skeleton/remix.env.d.ts | 2 + 9 files changed, 42 insertions(+), 31 deletions(-) create mode 100644 .changeset/brave-taxis-laugh.md create mode 100644 examples/customer-api/.gitignore diff --git a/.changeset/brave-taxis-laugh.md b/.changeset/brave-taxis-laugh.md new file mode 100644 index 0000000000..8328feee0f --- /dev/null +++ b/.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. diff --git a/examples/customer-api/.gitignore b/examples/customer-api/.gitignore new file mode 100644 index 0000000000..ad5f2cad45 --- /dev/null +++ b/examples/customer-api/.gitignore @@ -0,0 +1 @@ +.shopify diff --git a/examples/customer-api/README.md b/examples/customer-api/README.md index a5a6845e88..e610d36de2 100644 --- a/examples/customer-api/README.md +++ b/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_ -PUBLIC_CUSTOMER_ACCOUNT_URL=https://shopify.com/ -PUBLIC_STOREFRONT_API_TOKEN= -PUBLIC_STORE_DOMAIN=.myshopify.com -SESSION_SECRET=foobar -``` +1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain (ie. `https://.app`). +1. Install the [ngrok CLI](https://ngrok.com/download) to use in terminal +1. Start ngrok using `npm run 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://.app/authorize` +1. Edit `Javascript origin(s)` to include your public domain `https://.app` or keep it blank +1. Edit `Logout URI` to include your public domain `https://.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://.app` to start the login process diff --git a/examples/customer-api/example.env b/examples/customer-api/example.env index 48741c5b0a..6b26a2c117 100644 --- a/examples/customer-api/example.env +++ b/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" \ No newline at end of file +PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID="shp_0200d288-18b6-4799-8172-426957e6148e" +PUBLIC_CUSTOMER_ACCOUNT_API_URL="https://shopify.com/55145660472" diff --git a/examples/customer-api/package.json b/examples/customer-api/package.json index a54065de05..2763cf7a60 100644 --- a/examples/customer-api/package.json +++ b/examples/customer-api/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "shopify hydrogen build", "dev": "shopify hydrogen dev --worker", - "ngrok": "ngrok http --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" diff --git a/examples/customer-api/remix.env.d.ts b/examples/customer-api/remix.env.d.ts index 834652d51f..31759a7e60 100644 --- a/examples/customer-api/remix.env.d.ts +++ b/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; } } diff --git a/examples/customer-api/server.ts b/examples/customer-api/server.ts index 761d1287b8..524edee843 100644 --- a/examples/customer-api/server.ts +++ b/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, }); /** diff --git a/packages/cli/src/lib/setups/i18n/replacers.test.ts b/packages/cli/src/lib/setups/i18n/replacers.test.ts index c5202fa25c..52fc66ad35 100644 --- a/packages/cli/src/lib/setups/i18n/replacers.test.ts +++ b/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; } /** diff --git a/templates/skeleton/remix.env.d.ts b/templates/skeleton/remix.env.d.ts index e2066539e7..1ceb45a10d 100644 --- a/templates/skeleton/remix.env.d.ts +++ b/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; } }