Inna
98c3cbdbc6
Arquitectura elegida: islas React/TSX montadas sobre las plantillas Django
existentes (django-vite), alimentadas por endpoints JSON bajo /api/. El backend,
las URLs y la auth por sesión se mantienen; se migra sección a sección.
Fase 0 (tooling):
- frontend/ con Vite + React 18 + TypeScript. Build a static/dist con manifest.
- django-vite 3.1 en INSTALLED_APPS + DJANGO_VITE (dev_mode=DEBUG,
static_url_prefix='dist'). STATIC_URL pasa a '/static/' (absoluto) para que los
assets no choquen con el <base href> de la plantilla. WhiteNoise sirve el bundle.
- .gitignore: frontend/node_modules y static/dist (artefactos de build).
Fase 1 (piloto: lista de noticias de la portada):
- API: home/views/api.py -> home_news_api (JsonResponse); ruta /api/home/news/
montada en home/api_urls.py fuera de i18n_patterns.
- React: NewsList.tsx hace fetch de la API y renderiza las noticias (mismas clases
CSS que el HTML original). Entry src/entries/home.tsx monta en #home-news-app.
- partials/noticias.html: el bucle {% for noticia %} se reemplaza por el contenedor
de montaje + {% vite_asset %}.
Verificado en producción: manage.py check OK, /api/home/news/ 200, la home incluye
el mount y el <script> del bundle, y el bundle se sirve (200).
Build en deploy: cd frontend && npm run build && collectstatic (ver frontend/README.md).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
33 lines
1.3 KiB
Markdown
33 lines
1.3 KiB
Markdown
# Frontend NovaWoW (islas React/TSX con Vite)
|
|
|
|
Migración incremental de las plantillas HTML de Django a componentes React/TSX,
|
|
montados como **islas** sobre las páginas que sigue sirviendo Django. Los datos se
|
|
obtienen de endpoints JSON bajo `/api/` (ver `home/api_urls.py`).
|
|
|
|
## Estructura
|
|
- `src/entries/*.tsx` — puntos de entrada de Vite; cada uno monta una isla en un
|
|
contenedor que deja la plantilla Django (p. ej. `#home-news-app`).
|
|
- `src/components/*.tsx` — componentes React.
|
|
- `vite.config.ts` — build a `../static/dist` con manifest (base `/static/dist/`).
|
|
|
|
La plantilla carga la isla con `{% load django_vite %}` + `{% vite_asset 'src/entries/xxx.tsx' %}`.
|
|
|
|
## Desarrollo (con HMR)
|
|
Requiere `DJANGO_DEBUG=True`. En un terminal:
|
|
```
|
|
cd frontend && npm install && npm run dev
|
|
```
|
|
django-vite (dev_mode = DEBUG) inyecta el cliente HMR y sirve desde el dev server.
|
|
|
|
## Producción (build)
|
|
Con `DJANGO_DEBUG=False`, Django sirve el bundle construido vía manifest. Tras
|
|
cualquier cambio en `frontend/`:
|
|
```
|
|
cd /root/NovaWoW/frontend && npm run build # genera ../static/dist + manifest
|
|
cd /root/NovaWoW && .venv/bin/python manage.py collectstatic --noinput
|
|
systemctl restart novawow
|
|
```
|
|
|
|
Los artefactos (`node_modules/`, `static/dist/`) están en `.gitignore`: se regeneran
|
|
con `npm run build`.
|