46 lines
2.4 KiB
Markdown
46 lines
2.4 KiB
Markdown
# Research: SvelteKit Integration
|
|
|
|
## Decision: SvelteKit SPA with FastAPI Backend
|
|
|
|
### Rationale
|
|
SvelteKit provides a robust file-based routing system and shared layout mechanism that fulfills the requirements (FR-001, FR-002, FR-004, FR-005). By using `adapter-static` in SPA mode, we can generate a set of static files that can be served by the existing FastAPI backend, satisfying the constraint of no Node.js server in production (FR-003, Assumptions).
|
|
|
|
### Alternatives Considered
|
|
- **Vanilla Svelte (Current)**: Lacks built-in routing and layout management, leading to manual implementation overhead.
|
|
- **SvelteKit with Node.js Server**: Rejected because the project requires the Python backend to be the primary server.
|
|
- **Inertia.js**: Requires more tight coupling between backend and frontend than desired for this project.
|
|
|
|
## Technical Implementation Details
|
|
|
|
### SvelteKit Configuration (SPA Mode)
|
|
1. **Adapter**: Use `@sveltejs/adapter-static`.
|
|
2. **Fallback**: Configure `fallback: 'index.html'` in `svelte.config.js`.
|
|
3. **Client-Side Rendering**: Create `src/routes/+layout.ts` with:
|
|
```typescript
|
|
export const ssr = false;
|
|
export const prerender = false;
|
|
```
|
|
This ensures the entire app is treated as a SPA.
|
|
|
|
### FastAPI Backend Integration
|
|
1. **Static Files**: Mount the `frontend/build` (or `dist`) directory using `StaticFiles`.
|
|
2. **SPA Routing**: Implement a catch-all route to serve `index.html` for any non-API request. This allows SvelteKit's client-side router to handle deep links like `/settings`.
|
|
```python
|
|
@app.get("/{full_path:path}")
|
|
async def serve_spa(full_path: str):
|
|
# Check if path exists in static files, else serve index.html
|
|
...
|
|
```
|
|
|
|
### Migration Strategy
|
|
1. **Layout**: Move shared UI (header, footer) from `App.svelte` to `src/routes/+layout.svelte`.
|
|
2. **Routes**:
|
|
- `Dashboard.svelte` -> `src/routes/+page.svelte` (or `src/routes/dashboard/+page.svelte`)
|
|
- `Settings.svelte` -> `src/routes/settings/+page.svelte`
|
|
3. **API Client**: Reuse existing `frontend/src/lib/api.js` but ensure it works within SvelteKit's load functions if needed (though for pure SPA, standard `onMount` or reactive statements also work).
|
|
|
|
## Best Practices
|
|
- Use SvelteKit's `$lib` alias for shared components and utilities.
|
|
- Leverage `+page.ts` `load` functions for data fetching to ensure data is ready before component mount (User Story 2).
|
|
- Use SvelteKit's `goto` for programmatic navigation.
|