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)

Adapter: Use @sveltejs/adapter-static.
Fallback: Configure fallback: 'index.html' in svelte.config.js.
Client-Side Rendering: Create src/routes/+layout.ts with:
```
export const ssr = false;
export const prerender = false;
```
This ensures the entire app is treated as a SPA.

FastAPI Backend Integration

Static Files: Mount the frontend/build (or dist) directory using StaticFiles.
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.
```
@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

Layout: Move shared UI (header, footer) from App.svelte to src/routes/+layout.svelte.
Routes:
- Dashboard.svelte -> src/routes/+page.svelte (or src/routes/dashboard/+page.svelte)
- Settings.svelte -> src/routes/settings/+page.svelte
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.

2.4 KiB Raw Permalink Blame History