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.

Check out Hydrogen docs Get familiar with Remix

What's included

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

Getting started

Requirements:

• Node.js version 16.14.0 or higher

npm create @shopify/hydrogen@latest

Building for production

npm run build

Local development

npm run dev

Setup for using Customer Account API (/account section)

Setup public domain using ngrok

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

Include public domain in Customer Account API settings

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

Prepare Environment variables

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

Alternatly, the values of the required environment varaibles "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.

🗒️ Note that mock.shop doesn't supply these variables automatically.