MCPcopy Index your code
hub / github.com/Shopify/hydrogen-demo-store

github.com/Shopify/hydrogen-demo-store @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
264 symbols 592 edges 91 files 11 documented · 4%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

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

Extension points exported contracts — how you extend this code

Env (Interface)
* Declare expected Env parameter in fetch handler.
env.d.ts
FeaturedProductsProps (Interface)
(no doc)
app/components/FeaturedProducts.tsx
ActionData (Interface)
(no doc)
app/routes/($locale).account.address.$id.tsx
GetSiteMapOptions (Interface)
(no doc)
app/lib/sitemap.ts
SessionData (Interface)
* Declare local additions to the Remix session data.
env.d.ts
AccountType (Interface)
(no doc)
app/routes/($locale).account.tsx
AppLoadContext (Interface)
(no doc)
env.d.ts
AccountOutletContext (Interface)
(no doc)
app/routes/($locale).account.edit.tsx

Core symbols most depended-on inside this repo

get
called by 24
app/lib/session.server.ts
getInputStyleClasses
called by 13
app/lib/utils.ts
set
called by 11
app/lib/session.server.ts
truncate
called by 10
app/lib/seo.server.ts
missingClass
called by 9
app/lib/utils.ts
getImageLoadingPriority
called by 5
app/lib/const.ts
doLogout
called by 4
app/routes/($locale).account_.logout.ts
usePrefixPathWithLocale
called by 4
app/lib/utils.ts

Shape

Function 236
Interface 17
Method 9
Class 2

Languages

TypeScript100%

Modules by API surface

app/lib/utils.ts15 symbols
app/components/Icon.tsx15 symbols
app/lib/seo.server.ts14 symbols
app/components/PageLayout.tsx13 symbols
app/components/Cart.tsx13 symbols
app/components/SortFilter.tsx12 symbols
app/lib/session.server.ts11 symbols
app/root.tsx10 symbols
app/routes/($locale).products.$productHandle.tsx9 symbols
app/routes/($locale).account.tsx7 symbols
app/lib/sitemap.ts6 symbols
app/routes/($locale).search.tsx5 symbols

For agents

$ claude mcp add hydrogen-demo-store \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact