Template
Rami BitarandClaude Opus 5.5
c447c51e82
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>
53 lines
2.7 KiB
Markdown
53 lines
2.7 KiB
Markdown
# 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.
|