Integrando React, Vite y Django

Publicado el 23 Feb 2025

django vite y react juntos

Una solución simple pero no obvia

A veces da la impresión de que si conoces distintas tecnologías serás capaz de combinarlas fácilmente, ¿verdad? Pues no, no es así. Piénsalo, la mayoría de herramientas tienen una forma establecida de cómo deberían "funcionar las cosas", y la mayoría de los recursos disponibles siguen ese patrón. No es algo malo; de hecho, está perfecto si sigues al pie de la letra algún stack de JavaScript.

Pero... ¿y si tu herramienta de frontend favorita no viene con una recomendación para el backend que estás utilizando?

Sí, te dejaron afuera en la oscuridad. Pero no te preocupes, no estás solo. Siempre habrá gente dispuesta a echarte una mano en este tipo de problemas. Estoy hablando de la app django-vite.

django-vite es una solución para integrar Vite fácilmente con Django y, en consecuencia, puedes usar React (y cualquier otro framework compatible con Vite) en un proyecto Django.

Si bien django-vite es fácil de implementar, la documentación de la app no es tan clara, especialmente si estás comenzando en el desarrollo web. Esta publicación es un paso a paso para realizar esa integración. Podría ser mucho más corta, pero decidí incluir todo el proceso pensando en cómo me habría gustado tener este tutorial hace un par de años.

Estructura del tutorial

  1. Crear un proyecto en Django
  2. Crear una app React usando Vite
  3. Integrar Vite (y React) en un proyecto Django

Es muy probable que no necesites las primeras dos secciones, pero te recomiendo que les des un vistazo rápido para entender la estructura del proyecto. Si usas Mac o Linux, puedes copiar y pegar los comandos en la terminal para seguir la publicación.

🚀 Larga vida a Linux! 🐧

Antes de comenzar

Asumiré que tienes un conocimiento básico de Python, Django y React.

También asumiré que tienes instalado en tu ordenador los siguientes programas:

  • Python
  • Pip
  • Node

Creando el Proyecto de Django

Es buena práctica crear siempre un entorno virtual, aunque en este caso no sea obligatorio.

Abrimos la terminal, navegamos hasta la carpeta donde guardamos nuestros proyectos, creamos una nueva carpeta para este proyecto y accedemos a ella.

mkdir  /home/$USER/code/django-react-vite && cd /home/$USER/code/django-react-vite
Siempre es recomendable llevar un control de las dependencias por proyecto. Dicho esto, el siguiente paso es opcional.
python -m venv env && source env/bin/activate

Instalamos Django:

pip install django

Creamos el proyecto de Django y lo nombramos myproject:

django-admin startproject myproject

Entramos en la carpeta del proyecto y creamos la aplicación, llamandola myapp:

cd myproject && django-admin startapp myapp

Agregamos la aplicación myapp a INSTALLED_APPS:

# myproject/settings.py
INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "myapp",
]

Incluimos las rutas de la aplicación en las rutas del proyecto:

# myproject/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("myapp.urls")),
]

Creación de la vista y el template

Creamos una función para manejar la vista de prueba:

# myapp/views.py
from django.shortcuts import render

def react_template(request):
    return render(request, "myapp/react_template.html")

Creamos el template siguiendo la estructura recomendada por Django:

mkdir -p myapp/templates/myapp && touch myapp/templates/myapp/react_template.html

Agregamos el siguiente contenido al archivo react_template.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Template</title>
</head>
<body>
    <h1>React Template</h1>
    <div id="root"></div>
</body>
</html>

Creamos el archivo urls.py

touch myapp/urls.py

Agregamos una ruta para la función creada anteriormente:

# myapp/urls.py
from django.urls import path, include
from . import views

urlpatterns = [
    path("", views.react_template),
]

Ejecutando el servidor

En este punto, ya podemos probar nuestra aplicación de Django. Deberíamos estar ubicados en el mismo nivel que el archivo manage.py. Ejecutamos el siguiente comando:

python manage.py runserver

vista-previa-1

Como mencionamos al principio, si ya conocen Django, seguramente esta parte les resultará familiar. Nada fuera de lo normal, y esa es precisamente la idea.

Antes de continuar con la creación de la aplicación en React, echemos un vistazo a la estructura actual de archivos:

django-react-vite
└── myproject
    ├── db.sqlite3
    ├── manage.py
    ├── myapp
    │   ├── admin.py
    │   ├── apps.py
    │   ├── __init__.py
    │   ├── migrations
    │   │   ├── __init__.py
    │   │   └── __pycache__
    │   ├── models.py
    │   ├── templates
    │   │   └── myapp
    │   │       └── react_template.html
    │   ├── tests.py
    │   ├── urls.py
    │   └── views.py
    └── myproject
        ├── asgi.py
        ├── __init__.py
        ├── __pycache__
        ├── settings.py
        ├── urls.py
        └── wsgi.py

Creando la Aplicación en React

Ahora es momento de crear la aplicación de React. Abrimos una nueva terminal y nos ubicamos en la carpeta raíz del proyecto, django-react-vite.

cd /home/$USER/code/django-react-vite

Aquí crearemos el proyecto de React utilizando Vite:

npm create vite@latest

Para esta integración, hemos nombrado el proyecto como reactland, aunque el nombre no tiene ninguna importancia.

  1. En el proceso de instalación, seleccionamos React como framework.
  2. Luego, Vite nos pedirá elegir una variante. Podemos seleccionar la que prefiramos; en este caso, hemos optado por JavaScript.

A continuación, inicializamos el proyecto con los comandos que proporciona Vite:

cd reactland
npm install
npm run dev

Podemos ver la aplicación de React abriendo el navegador en http://127.0.0.1:5173.

pantalla inicial de react con vite

A partir de este punto, no agregaremos más archivos de forma manual. La estructura de archivos queda definida, y avanzaremos con la integración entre Django y React. Puedes echarle un vistazo.

django-react-vite
├── myproject
│   ├── db.sqlite3
│   ├── manage.py
│   ├── myapp
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── __init__.py
│   │   ├── migrations
│   │   └── __init__.py
│   │   ├── models.py
│   │   ├── templates
│   │   │   └── myapp
│   │   │       └── react_template.html
│   │   ├── tests.py
│   │   ├── urls.py
│   │   └── views.py
│   └── myproject
│       ├── asgi.py
│       ├── __init__.py
│       ├── settings.py
│       ├── urls.py
│       └── wsgi.py
└── reactland
    ├── eslint.config.js
    ├── index.html
    ├── package.json
    ├── package-lock.json
    ├── public
    │   └── vite.svg
    ├── README.md
    ├── src
    │   ├── App.css
    │   ├── App.jsx
    │   ├── assets
    │   │   └── react.svg
    │   ├── index.css
    │   └── main.jsx
    └── vite.config.js

Integrando Django y React

Finalmente, hemos llegado a la parte más interesante: la integración entre Django y React.

Para esta etapa, necesitaremos ejecutar en paralelo el servidor de desarrollo de Django y Vite. Por lo tanto, debemos abrir dos terminales y asegurarnos de que en una de ellas tengamos activado el entorno virtual de Python.

Instalando django-vite

En la primera terminal, detenemos el servidor de desarrollo de Django si está en ejecución y procedemos a instalar django-vite

pip install django-vite

Ahora agregamos la configuración de django-vite en el archivo settings.py:

# myproject/settings.py
INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "myapp",
    "django_vite", # new
]

DJANGO_VITE = {
  "default": {
    "dev_mode": DEBUG
  }
}

tambien agregaremos la configuración para servir los archivos compilados de React. Esto es algo que no utilizaremos hasta llegar al final de este tutorial.

STATICFILES_DIRS = [
  BASE_DIR / "assets"
]
STATIC_ROOT = "static/" # for collect static

Configurando el Template en Django

Editamos el archivo react_template.html dentro de templates/myapp/ para incluir las etiquetas de django-vite:

{% load django_vite %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Template</title>
    {% vite_hmr_client %}
</head>
<body>
    <h1>React Template</h1>
    <div id="root"></div>

    {% vite_react_refresh %}
    {% vite_asset 'src/main.jsx' %}
</body>
</html>

Ejecutando Django y Revisando Errores

Ya casi estamos listos. Ahora podemos iniciar nuevamente el servidor de Django:

python manage.py runserver

pantalla de sitio en django con consola de desarrollo mostrando errores

Si abrimos nuestro navegador en http://127.0.0.1:8000 y revisamos la consola de desarrollo, veremos que las etiquetas de django-vite están intentando cargar los archivos desde el servidor de Vite, pero con una pequeña diferencia: están buscando los archivos dentro de la carpeta static/.

Esto ocurre porque static/ es el valor de STATIC_URL, y para solucionarlo, debemos editar la configuración de Vite.

Configurando vite.config.js

Abrimos el archivo django-react-vite/reactland/vite.config.js y lo editamos de la siguiente manera:

// vite.config.js
import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/static/",
  build: {
    manifest: "manifest.json",
    outDir: path.join(path.dirname(__dirname), "myproject", "assets"),
    rollupOptions: {
      input: {
        main: path.resolve('./src/main.jsx'),
      }
    }
  }
})

Con esta configuración:

  • base: Coincide con STATIC_URL, lo que soluciona el problema de carga de archivos.
  • outDir: Apunta a la carpeta "assets", la misma que incluimos en STATICFILES_DIRS. Esto será útil al ejecutar el comando de django collectstatic.
  • rollupOptions: Define el punto de entrada de la aplicación React.

react visto dentro de django

Ahora, seguramente habrás notado que hay un link "roto". Para ser totalmente sincero, no se por qué pasa esto particularmente con el svg de react, puedes probar a colocar otro archivo en la misma ubicación de este svg y se servirá sin problemas.

import { useState } from 'react'
// import reactLogo from './assets/react.svg'
import chefLogo from './assets/chef.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
        <>
            . . .
            <a href="https://vite.dev" target="_blank">
                <img src={viteLogo} className="logo" alt="Vite logo" />
            </a>
            <a href="https://react.dev" target="_blank">
                <img src={chefLogo} className="logo react" alt="React logo" />
            </a>
             . . .
        </>
    )
}

Con esto nuestra integración esta completa

applicacion react dentro de django

Producción

Al momento de desplegar nuestro proyecto, es importante asegurarnos de que los archivos de nuestra aplicación React estén correctamente compilados y listos para ser servidos por Django. Para lograrlo, primero ejecutamos el siguiente comando en la terminal dentro de la carpeta del frontend:

npm run build

Esto generará una versión optimizada de nuestra aplicación en la carpeta configurada en vite.config.js. Luego, en Django, debemos recopilar los archivos estáticos para que puedan ser servidos correctamente en producción:

python manage.py collectstatic

Para simular un entorno de producción sin cambiar demasiado la configuración, simplemente ajustaremos la variable que indica si Django debe servir los archivos directamente desde el servidor de desarrollo de Vite o desde la carpeta de archivos estáticos:

DJANGO_VITE = {
  "default": {
    "dev_mode": False
  }
}

Con este cambio, Django ahora servirá los archivos de React como cualquier otro recurso estático, permitiendo que la integración funcione sin depender del servidor de desarrollo de Vite.

archivos de react compilados siendo servidos desde django

Si has llegado hasta aquí, quiero felicitarte por completar la integración de Django con React usando Vite. Espero que este proceso te haya resultado claro y útil para futuros proyectos. Si tienes alguna duda, sugerencia o simplemente quieres compartir tu experiencia, estaré encantado de leerte, puedes usar el formulario de contacto ¡Que tengas un excelente tiempo de codeo y mucho éxito en tus proyectos! 🚀

Contacto

Puedes escribirme por Whatsapp, pero si prefieres no usar ese medio tambien puedes contactarme el formulario de contacto en esta sección.

Yo prefiero el contacto por medio de Whatsapp.

Iniciar conversación