Phase 2B: Frontend Build Pipeline and FastAPI Static Asset Integration

[helgeerbe]

Description

Set up the build pipeline for the Vue.js SPA and configure the FastAPI backend to serve the compiled frontend assets.

Subtasks

• Configure Vite (or chosen bundler) for building the Vue.js SPA for production.
• Configure FastAPI to mount and serve the compiled static assets (HTML, JS, CSS) from the frontend build directory.
• Ensure routing works correctly so that SPA routes fallback to index.html.

Phase 2B: Success Factors & Definition of Done

Success Factors

1. API Completeness: FastAPI backend provides all necessary REST endpoints and WebSocket connections for the Vue.js SPA.
2. SPA Functionality: Vue.js SPA successfully implements "The Remote" (media player interface) and "Settings" (administrative dashboard) views.
3. Real-time Synchronization: WebSocket connection reliably broadcasts state changes (e.g., current media, playback state) to all connected clients with minimal latency.
4. Database Integration: SQLite database correctly stores and retrieves configuration settings and media metadata.
5. CLI Usability: The picframe CLI allows users to initialize the application, manage the database, and start the web server.
6. Clean Architecture Alignment: The web control plane and CLI adhere to the established Clean Architecture and Event-Driven Architecture principles.

Definition of Done (DoD)

• Code Complete: All required features for the issue are implemented according to the Architecture Solution Document and Frontend Specification.
• Unit Tests: Comprehensive unit tests are written and pass for all new backend and frontend code (minimum 80% coverage).
• Integration Tests: Integration tests verify the interaction between the FastAPI backend, SQLite database, and Vue.js SPA.
• Code Quality: Code passes all linting and formatting checks (e.g., Ruff, MyPy, ESLint, Prettier).
• Documentation: Relevant documentation (e.g., README, API docs) is updated to reflect the new features and changes.
• Review: Code has been reviewed and approved by at least one other developer.
• No Regressions: Existing functionality (Phase 1) remains intact and unaffected by the new changes.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.