vite-shopify-storefront/README.md

Vite Shopify Storefront

A Shopify storefront built with Vite, React 19, TanStack Router, TanStack Query, Tailwind CSS v4, Hono and @shopify/hydrogen. It's a port of nextjs-templates/shopify-storefront without the AI store assistant.

Getting started

cp .env.example .env.local   # defaults to the tokenless mock.shop
yarn install
yarn dev                     # http://localhost:5173

Script	What it does
yarn dev	Vite dev server with the Hono API mounted at /api
yarn build	Client build to dist/client, server build to dist/server
yarn start	Production Node server (API + static client), PORT or 3000
yarn typecheck	tsc plus hydrogen gql check for the GraphQL documents

Layout

server/            Hono API — classic customer accounts behind an httpOnly cookie
  app.ts           /api routes (mounted by @hono/vite-dev-server in dev)
  account.ts       login, logout, register, recover, reset, activate, me, customer
  node.ts          production entry: API + dist/client + SPA fallback
src/
  routes/          TanStack file routes (route tree is generated)
  hooks/           TanStack Query options + hooks over the Storefront API
  services/shopify Storefront client, catalogue and customer functions
  graphql/         Typed `gql()` documents
  components/      Storefront UI (header, cart drawer, product detail, ...)

How the Next.js pieces map

Next.js	Here
app/**/page.tsx	src/routes/** (TanStack file routes)
generateMetadata / metadata	route head() via src/lib/seo.ts + <HeadContent />
Server-side data fetching	route loaders seeding the TanStack Query cache
app/api/account/* route handlers	server/account.ts (Hono)
next/headers cookies	hono/cookie
next/image	src/components/ui/image.tsx (Shopify CDN srcset)
useSearchParams	validateSearch + Route.useSearch()
NEXT_PUBLIC_* env	VITE_* env

Catalogue and cart requests go straight from the browser to the Storefront API with the public token. Account requests go through Hono so the customer access token never reaches client JavaScript.