Admin
546aef6d83
Updates the compose build context, the Dockerfile header, the package name and the docs. The compose service and container keep the name frontend/musify-frontend, since nginx routes to http://frontend:3000. The source files also carry the first prettier pass, so the rename and the reformat land together for them.
48 lines
2.3 KiB
Markdown
48 lines
2.3 KiB
Markdown
# Musify — web-player
|
|
|
|
Web pública de Musify (carpeta `web-player/`). Para diseño y recetas de UI usa el skill **`musify-web`**.
|
|
|
|
## Stack
|
|
|
|
SvelteKit 2 (`adapter-node`) · Svelte 5 **runes** · Tailwind 4 · TypeScript strict · auth OIDC Zitadel (`openid-client` + `jose`).
|
|
|
|
No hay `svelte.config.js` (config inline en `vite.config.ts`) ni `tailwind.config.js` (config en `src/routes/layout.css`).
|
|
|
|
## Comandos
|
|
|
|
```sh
|
|
npm run dev # servidor de desarrollo (puerto 5173)
|
|
npm run build
|
|
npm run check # svelte-check — debe salir 0 errores antes de cerrar un cambio
|
|
npm run format # prettier --write .
|
|
npm run lint # prettier --check . && eslint .
|
|
```
|
|
|
|
## Reglas
|
|
|
|
- **Sin comentarios** en el código salvo que sean imprescindibles.
|
|
- `npm run lint` y `npm run check` deben salir limpios antes de cerrar un cambio.
|
|
- **Svelte 5 runes siempre:** `$props()` con `interface Props`, `$state`, `$derived`, `$effect`. Nada de `export let` ni `$:`. `{#each}` siempre con clave.
|
|
- **Server-only bajo `$lib/server/`**; nunca importado desde cliente.
|
|
- Datos SSR vía `load` en `+page.server.ts`/`+layout.server.ts` → prop `data`.
|
|
- Enlaces a endpoints `+server.ts` (login/logout) llevan `data-sveltekit-reload`.
|
|
- Reutiliza los tokens/recetas del sistema de diseño; extrae a `$lib/components/ui/` lo que se repita.
|
|
|
|
## Auth
|
|
|
|
`hooks.server.ts` valida la cookie de sesión cifrada (`mf_session`), refresca el `access_token` y puebla `locals.user` / `locals.accessToken`. Para proteger una ruta, comprueba `locals.user` en su `load` y redirige a `/login?returnTo=…`. Para el backend, envía `locals.accessToken` como Bearer hacia `API_BASE_URL`.
|
|
|
|
Variables de entorno en `.env` (ver `.env.example`): `ZITADEL_*`, `AUTH_REDIRECT_URI`, `AUTH_POST_LOGOUT_URI`, `SESSION_SECRET`, `API_BASE_URL`.
|
|
|
|
## Backend API
|
|
|
|
Cliente tipado con `openapi-fetch` sobre el OpenAPI de `Musify.Api`. En un `load`/action server:
|
|
|
|
```ts
|
|
import { createApiClient } from '$lib/server/api';
|
|
const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
|
|
const { data, error: err } = await api.GET('/tracks');
|
|
```
|
|
|
|
Devuelve `{ data, error }` (estilo ErrorOr), no lanza. Los tipos viven en `src/lib/api/schema.d.ts` y se regeneran con `npm run gen:api` (requiere la API dev levantada en `API_BASE_URL`, que expone `/openapi/v1.json` solo en Development).
|