Vite + Hono + TanStack port of the Shopify storefront

Ports nextjs-templates/shopify-storefront to Vite, TanStack Router/Query, Tailwind v4 and Hono, without the AI store assistant. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-03 11:27:27 -04:00
commit c447c51e82
82 changed files with 11712 additions and 0 deletions
@@ -0,0 +1,52 @@
+# 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
+
+```sh
+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 `loader`s 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.