# 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.