aewing
05f8e2e3b6
- Create reusable components: auth, api-client, shared-types - ModeTemplate with Hono backend and SvelteKit frontend - Auth store refactored to class-based Svelte 5 pattern - SSR-safe hydrate() pattern for localStorage access - Frontend builds successfully with Svelte 5 runes
Mode Template
Base template for creating new Modes. Copy this entire folder and rename it.
Structure
ModeTemplate/
├── backend/
│ ├── server.ts # Hono API server
│ └── modules/
│ └── auth/ # Copy of components/auth
├── frontend/
│ ├── src/
│ │ ├── routes/
│ │ │ ├── +page.svelte
│ │ │ └── +layout.svelte
│ │ ├── lib/
│ │ │ ├── api.ts # API client instance
│ │ │ └── stores/
│ │ │ └── auth.ts
│ │ └── app.html
│ ├── static/
│ ├── svelte.config.js
│ ├── vite.config.ts
│ └── package.json
├── types/ # Copy of components/shared-types
├── package.json
├── .env
└── README.md
Quick Start
- Copy folder:
cp -r ModeTemplate Mode7YourProject - Update
package.jsonname - Install deps:
cd Mode7YourProject && bun install - Start backend:
bun run backend/server.ts - Start frontend:
cd frontend && bun run dev
Ports
- Backend runs on PORT from env (orchestrator sets to 3005)
- Frontend dev server runs on 5173 (proxies API to backend)
Adding to Orchestrator
Edit ModeSwitch/backend/orchestrator.ts:
const MODE_FOLDERS: Record<string, string> = {
'Mode6Test': 'Mode6Test',
'Mode7YourProject': 'Mode7YourProject', // Add this
};