Skip to content

This template contains a full-featured setup of components, queries and tooling to get started with Hydrogen. It is deployed to https://hydrogen.shop

Notifications You must be signed in to change notification settings

Form-Factory/hydrogen-demo-store

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

98 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hydrogen template: Demo Store

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 full-featured setup of components, queries and tooling to get started with Hydrogen. It is deployed at hydrogen.shop

Check out Hydrogen docs Get familiar with Remix

What's included

  • Remix
  • Hydrogen
  • Oxygen
  • Shopify CLI
  • ESLint
  • Prettier
  • GraphQL generator
  • TypeScript and JavaScript flavors
  • Tailwind CSS (via PostCSS)
  • Full-featured setup of components and routes

Getting started

Requirements:

  • Node.js version 18.0.0 or higher
npm create @shopify/hydrogen@latest -- --template demo-store

Remember to update .env with your shop's domain and Storefront API token!

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

About

This template contains a full-featured setup of components, queries and tooling to get started with Hydrogen. It is deployed to https://hydrogen.shop

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 97.3%
  • CSS 1.4%
  • JavaScript 1.3%