How krol-x/elysia-vue-spa-template works
Purpose and Runtime
A Bun-based full-stack SPA template: Vue/Vite provides the browser UI, while an Elysia API serves application endpoints and, in production, the built SPA. Development runs frontend and backend together; production targets a compiled server plus static assets.
Key entry points: bin/dev.ts, app/api/src/index.ts, app/api/src/server.ts, and app/web/src/main.ts.
Backend Application Host
The API is organized around an Elysia server and modular route registration. app/api/src/index.ts is the backend process entry, while app/api/src/server.ts likely assembles API routes, health endpoints, middleware, and static SPA serving for the production full-app runtime.
app/api/build.ts is the API build boundary; resulting artifacts are intended to be run by Bun.
Domain Modules: Authentication and Users
Backend business capabilities are split into feature modules with explicit routing, controllers, services, DTOs, and user persistence models:
• Authentication: app/api/src/module/auth/routes.ts, app/api/src/module/auth/controller.ts, app/api/src/module/auth/service.ts
• User management: app/api/src/module/user/routes.ts, app/api/src/module/user/controller.ts, app/api/src/module/user/service.ts
• User data model/contracts: app/api/src/module/user/model.ts, app/api/src/module/user/dto.ts
The expected request flow is Elysia route → controller → service → database, with DTOs defining API input/output boundaries.
Database and Lifecycle Operations
Drizzle manages relational database schema and migration state. The database integration boundary is app/api/src/db.ts and app/api/src/config/database.ts. Schema evolution is represented by checked-in migrations, beginning with app/api/drizzle/0000_new_giant_girl.sql.
Operational database commands are separate executable paths: app/api/bin/migrate.ts applies migrations and app/api/bin/seed.ts populates initial data. This keeps application startup distinct from schema deployment and data initialization.
Frontend SPA
Vue bootstraps from app/web/src/main.ts into the root shell app/web/src/App.vue. Client-side navigation is defined in app/web/src/router/index.ts.
The UI centers on authentication-aware and user/dashboard views: app/web/src/composables/useAuth.ts, app/web/src/components/AuthModal.vue, app/web/src/components/Dashboard.vue, and app/web/src/components/Users.vue. Modal components provide interaction boundaries for authentication, profiles, and user actions.
Frontend–API Boundary
In development, Vite hosts the SPA and proxies API calls, allowing browser access through port 5173 while the API can also run directly on port 3000. app/web/vite.config.ts defines this dev-server integration boundary.
In production, the backend serves both static frontend output and /api endpoints on one host (documented as port 3030). The health endpoint /api/up is the basic process/API availability probe.
Shared Contracts and Build Orchestration
app/shared/index.ts is the intended cross-package contract location for types or utilities used by both API and web packages. Package-level manifests at app/api/package.json, app/web/package.json, and app/shared/package.json establish the workspace boundaries.
Root scripts coordinate the system: bin/dev.ts orchestrates development, while root build commands produce the deployable API and SPA artifacts.
Main entry points: server.ts Elysia server · db.ts Drizzle database · controller.ts User controller · App.vue App shell
Components 22
API service
Bun/Elysia application and domain modules.
- API process entry
app/api/src/index.ts - Elysia server · Registers endpoints and serves the SPA in production.
app/api/src/server.ts - Auth routes
app/api/src/module/auth/routes.ts - Auth controller
app/api/src/module/auth/controller.ts - Auth service
app/api/src/module/auth/service.ts - User routes
app/api/src/module/user/routes.ts - User controller
app/api/src/module/user/controller.ts - User service
app/api/src/module/user/service.ts - User models and DTOs · Defines user persistence and request/response boundaries.
app/api/src/module/user/dto.ts - API build · Produces Bun-run server artifacts.
app/api/build.ts
Vue SPA
Browser application and development host.
- Vue bootstrap
app/web/src/main.ts - App shell
app/web/src/App.vue - Client router
app/web/src/router/index.ts - Auth UI state · Authentication-aware browser interaction boundary.
app/web/src/composables/useAuth.ts - Dashboard and users UI
app/web/src/components/Dashboard.vue - Vite dev host · Hosts the SPA and proxies API calls during development.
app/web/vite.config.ts
Database operations
Drizzle schema, migrations, and lifecycle commands.
- Drizzle database
app/api/src/db.ts - Schema migrations
app/api/drizzle/0000_new_giant_girl.sql - Migration command
app/api/bin/migrate.ts - Seed command
app/api/bin/seed.ts
Other components
- Development orchestrator · Runs frontend and backend together.
bin/dev.ts - Shared contracts · Cross-package types and utilities.
app/shared/index.ts
Connections 26
- Development orchestrator → API process entry: starts API
- Development orchestrator → Vite dev host: starts web dev
- API process entry → Elysia server: boots
- Elysia server → Auth routes: registers
- Elysia server → User routes: registers
- Auth routes → Auth controller: dispatches
- Auth controller → Auth service: calls
- User routes → User controller: dispatches
- User controller → User service: calls
- User controller → User models and DTOs: validates with
- User service → Drizzle database: persists
- Auth service → Drizzle database: accesses
- Migration command → Schema migrations: applies
- Migration command → Drizzle database: updates schema
- Seed command → Drizzle database: populates
- Vue bootstrap → App shell: mounts
- App shell → Client router: uses
- App shell → Auth UI state: uses
- Client router → Dashboard and users UI: navigates to
- Vite dev host → Elysia server: proxies /api
- Auth UI state → Elysia server: API requests
- Dashboard and users UI → Elysia server: API requests
- Elysia server → Vue bootstrap: serves built SPA
- API build → API process entry: compiles
- Shared contracts → Elysia server: shared by
- Shared contracts → Vue bootstrap: shared by