frontend/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate to vite

Browse Source
This commit is contained in:
Rami Bitar
2026-05-03 17:10:49 -04:00
parent b5cca5a6d8
commit 6cbbccf3bf
22 changed files with 661 additions and 3041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@@ -1,15 +1,15 @@
# React Editor Demo (Shopify)
Standalone Next.js 16 (app router) demo wiring up the Shopify-aware React Editor.
Standalone Vite SPA wiring up the Shopify-aware React Editor via `<App />` from `@reacteditor/core`.
## What's here
- **`index.html`** — Vite entrypoint.
- **`src/main.tsx`** — mounts `<App />` into `#root`.
- **`src/App.tsx`** — wires `<App />` from `@reacteditor/core` with the schema, plugins, and the Shopify provider.
- **`editor/`** — drop-in copy of the editor scaffold from `fe-shopify-client/app/editor`. Components, config, theme, Shopify client/queries/hooks/contexts, plugin-ai vendor css.
- **`app.schema.json`** — source of truth for every page in the demo. Shape: `{ "/": { root, content }, "/about": { ... }, ... }`. The save endpoint writes back to this file.
- **`app/[[...path]]/page.tsx`** — view route. Reads the schema and mounts `<Render>`.
- **`app/edit/[[...path]]/page.tsx`** — edit route. Reads the schema and mounts `<Editor>`.
- **`app/api/save-schema/route.ts`** — POST `{ route, data }` → patches `app.schema.json` on disk.
- **`app/api/chat/route.ts`** — `aiPlugin` endpoint. Uses the Vercel AI Gateway (`AI_GATEWAY_API_KEY`) to talk to Claude, with the editor + Shopify tool surface (`updatePage`, `searchProducts`, etc.).
- **`app.schema.json`** — source of truth for every page in the demo. Shape: `{ "/": { root, content }, "/about": { ... }, ... }`.
- **`api/chat.ts`** — `aiPlugin` endpoint exposed in dev via a Vite middleware. Talks to Claude via `@ai-sdk/anthropic` with the editor + Shopify tool surface (`updatePage`, `searchProducts`, etc.).
## Run
@@ -19,14 +19,10 @@ yarn install
yarn dev # → http://localhost:3001
```
- View any route: `http://localhost:3001/`, `/about`, `/products/handle`, etc.
- Edit any route: `http://localhost:3001/edit`, `/edit/about`, etc.
- 404 in view mode means the route isn't in `app.schema.json` yet — add it via the editor's **New page** button.
## Shopify
Defaults to the public `mock.shop` storefront (no token needed) so commerce blocks render demo data immediately. Override via `NEXT_PUBLIC_SHOPIFY_DOMAIN` and `NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN` in `.env.local`.
Defaults to the public `mock.shop` storefront (no token needed) so commerce blocks render demo data immediately. Override via `VITE_SHOPIFY_DOMAIN` and `VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN` in `.env.local`.
## AI
`/api/chat` mirrors the host app's pattern — pass a string-form model id (`anthropic/claude-sonnet-4.6`) and the AI SDK routes through the Vercel AI Gateway using `AI_GATEWAY_API_KEY`. Tools include the React Editor built-ins plus Shopify search/lookup helpers.
`/api/chat` is served in dev by a Vite middleware that loads `api/chat.ts` via `ssrLoadModule`. Set `ANTHROPIC_API_KEY` in `.env.local`. Tools include the React Editor built-ins plus Shopify search/lookup helpers. For production deployment you'll need to host `api/chat.ts` behind your own Node server (the handler exports a standard `POST(req: Request): Promise<Response>`).