# Vite Shopify Storefront

A server-rendered Shopify storefront built with TanStack Start (Vite + TanStack
Router), TanStack Query, Tailwind CSS v4, Hono and `@shopify/hydrogen` (used
only as a Storefront API client and typed `gql()`). 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
corepack enable              # uses the Yarn 4 pinned in package.json
yarn install
yarn dev                     # http://localhost:3000
```

| Script           | What it does                                              |
| ---------------- | --------------------------------------------------------- |
| `yarn dev`       | Vite dev server with SSR and the `/api` routes            |
| `yarn build`     | Production build via Nitro (`.output/`, or Vercel's Build Output on Vercel) |
| `yarn start`     | Run the Node build from `.output/`                        |
| `yarn typecheck` | `tsc` plus `hydrogen gql check` for the GraphQL documents |

## Deploying to Vercel

`vercel.json` pins the **TanStack Start** preset. Without it Vercel's
auto-detection sees `@shopify/hydrogen` and picks the Hydrogen preset. It also
installs with Corepack so Vercel uses Yarn 4. Set the `VITE_SHOPIFY_*` variables
in the project; the production domain is picked up for canonical URLs
automatically, or set `VITE_SITE_URL`.

## Layout

```
src/
  router.tsx       Router + per-request QueryClient, SSR query integration
  routes/          File routes; loaders prefetch into TanStack Query
    api/$.ts       Mounts the Hono app for every /api/* request
  server/
    app.ts         Hono API
    account.ts     login, logout, register, recover, reset, activate, me
    account.functions.ts  server functions for account reads in loaders
  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`, server-rendered |
| Server components fetching data    | route `loader`s seeding TanStack Query, dehydrated to the client |
| `app/api/account/*` route handlers | `src/server/account.ts` (Hono)                       |
| `next/headers` cookies             | `hono/cookie`, and `getCookie` in server functions   |
| `next/image`                       | `src/components/ui/image.tsx` (Shopify CDN `srcset`) |
| `NEXT_PUBLIC_*` env                | `VITE_*` env                                         |

Cart and catalogue reads after the first page load go straight from the browser
to the Storefront API with the public token. Account requests stay on the
server, so the customer access token never reaches client JavaScript.