- Django
- React
- Instalamos Django
pip install Django
- Creamos el proyecto ejecutando
django-admin startproject django_react
- Ingresamos a la carpeta del proyecto
cd django_react
- Verificamos si tenemos instalado node js
node --version
Si lo tenemos instalado deberia dar la versión en el terminal, usualmente se encuentra instalado en Mac OS, de no ser el caso la guia de instalacion se encuentra en https://nodejs.org/en/.
- Creamos la app de react dentro de la carpeta de nuestro proyecto de Django
npx create-react-app reactapp
La estructura de los archivos deberia ser la siguiente, tengala en consideracion para los siguientes pasos.
django_react
│
└───django_react
│ │──__init__.py
│ │──asgi.py
│ │──settings.py
│ │──urls.py
│ └──wsgi.py
└───reactapp
- Nos desplazamos al directorio de la app que acabamos de crear
cd reactapp
- Agrupamos la aplicación en archivos estáticos para producción.
yarn build
- Modificamos /settings.py
Importamos modulo os
import os
En templates agregamos el path de nuestro build de la app de react
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'reactapp/build'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
y creamos la siguiente variable al final del archivo
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'reactapp/build/static'),
]
- Modificamos /urls.py
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name = 'index.html'))
- Probamos
python manage.py runserver
Y si todo sale bien entonces deberiamos ver algo asi:
Tutorial creado por José Izam.