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.

Check out Hydrogen docs Get familiar with Remix

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

Requirements:

• Node.js version 16.14.0 or higher

npm create @shopify/hydrogen@latest

npm run build

npm run dev

1. Go to your Shopify admin => Settings => Customer accounts => New customer account

1. Setup a ngrok account and add a permanent domain (ie. https://<your-ngrok-domain>.app).
2. Install the ngrok CLI to use in terminal
3. Start ngrok using ngrok http --domain=<your-ngrok-domain>.app 3000

1. Go to your Shopify admin => Hydrogen or Headless app/channel => Customer Account API => Application setup
2. Edit Callback URI(s) to include https://<your-ngrok-domain>.app/account/authorize
3. Edit Javascript origin(s) to include your public domain https://<your-ngrok-domain>.app or keep it blank
4. Edit Logout URI to include your public domain https://<your-ngrok-domain>.app or keep it blank

Modify your /app/entry.server.tsx to allow the ngrok domain as a connect-src

-  const {nonce, header, NonceProvider} = createContentSecurityPolicy()
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
+   connectSrc: [
+     'wss://<your-ngrok-domain>.app:*', // Your ngrok websocket domain
+   ],
+ });

Run npx shopify hydrogen link or npx shopify hydrogen env pull to link this app to your own test shop.

Alternately, the values of the required environment variables "PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID" and "PUBLIC_CUSTOMER_ACCOUNT_API_URL" can be found in customer account api settings in the Hydrogen admin channel.