Skip to content

README_DEV.md

Latest commit

 

History

History
118 lines (84 loc) · 3.32 KB

README_DEV.md

File metadata and controls

118 lines (84 loc) · 3.32 KB

Hydrogen template: Skeleton

Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework. This template contains a minimal setup of components, queries and tooling to get started with Hydrogen.

What's included

  • Remix
  • Hydrogen
  • Oxygen
  • Vite
  • Shopify CLI
  • ESLint
  • Prettier
  • GraphQL generator
  • TypeScript and JavaScript flavors
  • Minimal setup of components and routes

Placing a test order

Do the following to test cart attributes:

  1. Navigate to the app with query parameters for campaignId and templateId, e.g. https://itbl-hydrogen-dev-storefront-03b5cbc92343e7c5b861.o2.myshopify.dev?iterable_campaign=1&iterable_template=2
  2. Sign in, add things to cart
  3. Go to checkout
  4. We use bogus payment gateway which means you'd have to:
    • Provide 1 as a card number for transaction to be successful
    • Any valid future expiry date and 3-digit CVV
  5. Proceed to finalize the order and observe cloudwatch for the webhooks. Attributes will be a top-level webhook payload note_attributes field, for instance:
    "note_attributes": [
        {
            "name": "__iterable_campaign_id",
            "value": "1"
        },
        {
            "name": "__iterable_template_id",
            "value": "2"
        }
    ],

Getting started

Requirements:

  • Node.js version 18.0.0 or higher
npm create @shopify/hydrogen@latest

Building for production

npm run build

Local development

npm run dev

In order to deploy a new version, type:

npx shopify hydrogen deploy

You will be asked either deploying to preview or production. Choose preview if you want to just test it out on oxygen outside of local environment and production for changes merged to main.

ngrok

You will need to run ngrok (public address proxy) in order for the Customer Account API to function properly. In order to access auth token, refer to "Integrations Team Vault" in 1password, note name is ngrok auth token

ngrok config add-authtoken $auth_token

Then, after running a local server, in parallel run

ngrok http --domain=ketogenetic-archaeological-jaylah.ngrok-free.dev 3000

You can access the store at https://ketogenetic-archaeological-jaylah.ngrok-free.dev now.

Setup for using Customer Account API (/account section)

Follow step 1 and 2 of https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen#step-1-set-up-a-public-domain-for-local-development

Client ID should be set by

npx shopify hydrogen env pull

Read more at https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started

Authorization endpoint

https://shopify.com/authentication/86249668965/oauth/authorize

Token endpoint

https://shopify.com/authentication/86249668965/oauth/token

Logout endpoint

https://shopify.com/authentication/86249668965/logout