Fase 0/1 migración a TSX: islas React con Vite + API JSON (piloto: noticias)
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>
This commit is contained in:
+13
-1
@@ -76,6 +76,7 @@ INSTALLED_APPS = [
|
||||
'django_extensions',
|
||||
'wotlk_db',
|
||||
'forum',
|
||||
'django_vite',
|
||||
]
|
||||
|
||||
# Configuración para AC SOAP
|
||||
@@ -276,9 +277,20 @@ USE_TZ = True
|
||||
# Static files (CSS, JavaScript, Images)
|
||||
# https://docs.djangoproject.com/en/5.1/howto/static-files/
|
||||
|
||||
STATIC_URL = 'static/'
|
||||
STATIC_URL = '/static/'
|
||||
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
|
||||
|
||||
# --- Integración con Vite (islas React/TSX) ---
|
||||
# En producción (DEBUG=False) se sirve el bundle construido vía manifest;
|
||||
# en desarrollo (DEBUG=True) se usa el dev server de Vite con HMR.
|
||||
DJANGO_VITE = {
|
||||
"default": {
|
||||
"dev_mode": DEBUG,
|
||||
"static_url_prefix": "dist",
|
||||
"manifest_path": os.path.join(BASE_DIR, "static", "dist", ".vite", "manifest.json"),
|
||||
}
|
||||
}
|
||||
|
||||
# Directorios adicionales donde buscar archivos estáticos
|
||||
STATICFILES_DIRS = [
|
||||
os.path.join(BASE_DIR, 'static'),
|
||||
|
||||
@@ -8,6 +8,7 @@ from django.conf.urls.static import static
|
||||
urlpatterns = [
|
||||
path('', redirect_to_spanish), # Redirige la raíz a `/es/`
|
||||
path('i18n/', include('django.conf.urls.i18n')), # URL para cambiar el idioma
|
||||
path('api/', include('home.api_urls')), # API JSON de las islas React (sin prefijo i18n)
|
||||
]
|
||||
|
||||
urlpatterns += i18n_patterns(
|
||||
|
||||
Reference in New Issue
Block a user