ss-tools/specs/004-integrate-svelte-kit/quickstart.md

Quickstart: SvelteKit Integration

This guide provides instructions for setting up and running the SvelteKit frontend integrated with the FastAPI backend.

Prerequisites

• Node.js 18+
• Python 3.9+
• npm

Frontend Setup

1. Initialize SvelteKit:

   cd frontend
   # (Assuming migration to SvelteKit structure)
   npm install
   

2. Development Mode: Run the SvelteKit development server:

   npm run dev
   

   The frontend will be available at http://localhost:5173.

3. Build for Production: Generate the static SPA files:

   npm run build
   

   The output will be in the frontend/build directory.

Backend Setup

1. Install Dependencies:

   cd backend
   pip install -r requirements.txt
   

2. Run Backend:

   python src/app.py
   

   The backend will serve the static frontend files from frontend/build.

Verification Steps

1. Navigation: Open http://localhost:8000 (backend URL). Click on "Settings" and verify the URL changes to /settings without a page reload.
2. Deep Linking: Refresh the page at http://localhost:8000/settings. Verify the Settings page loads correctly.
3. Data Loading: Verify that the Dashboard correctly lists available plugins and Settings shows the current configuration.