Archivo vite.config.ts #

Este archivo es el corazón de la configuración de Vite para tu proyecto. Define cómo Vite debe comportarse durante el desarrollo (servidor de desarrollo) y la construcción (build) de tu aplicación, incluyendo optimizaciones y proxys.

• Descripción: vite.config.ts es un archivo de configuración basado en TypeScript que utiliza la función defineConfig de Vite. Configura el servidor de desarrollo, incluyendo un proxy para redirigir las solicitudes a la API, y también integra los plugins necesarios para tu aplicación React.
• Propósito: Personalizar el comportamiento de Vite para satisfacer las necesidades específicas de tu proyecto, como configurar proxys, plugins, alias de rutas, o reglas de build. Es fundamental para optimizar la experiencia de desarrollo local y el proceso de compilación para producción.
• Secciones Clave:
  • import { defineConfig } from 'vite';:
    • Significado: Importa la función defineConfig de Vite. Usar defineConfig proporciona autocompletado y verificación de tipos para la configuración de Vite, asegurando que el archivo de configuración sea leído correctamente.
  • import react from '@vitejs/plugin-react';:
    • Significado: Importa el plugin oficial de Vite para React. Este plugin es esencial para que Vite entienda y compile el código JSX de React y habilite funcionalidades como el "Fast Refresh" durante el desarrollo.
  • export default defineConfig({ ... });:
    • Significado: Exporta la configuración predeterminada de Vite. Todo lo que esté dentro de este objeto configurará el comportamiento de Vite.
  • plugins: [react()]:
    • Significado: Registra el plugin de React en Vite. Esto le indica a Vite que debe aplicar las transformaciones necesarias para los archivos de React, permitiendo la transpilación de JSX y otras características específicas de React.
  • server:
    • Significado: Contiene opciones específicas para el servidor de desarrollo local de Vite.
    • proxy:
      • Significado: Configura un proxy inverso. Durante el desarrollo, tu frontend (ej. localhost:5173) y tu backend (ej. localhost:3000) pueden estar en puertos diferentes.
      • '/api': 'http://localhost:3000': Le indica al servidor de desarrollo de Vite que cualquier solicitud que comience con /api (ej. localhost:5173/api/students) debe ser redirigida a http://localhost:3000. Vite actúa como un intermediario, reenviando la petición a tu backend y devolviendo la respuesta al frontend, lo que resuelve problemas de CORS (Cross-Origin Resource Sharing) en desarrollo.
• Rol en el Proyecto: vite.config.ts es el centro de control para el proceso de desarrollo y compilación de tu aplicación frontend. Es crucial para una experiencia de desarrollo fluida, permitiendo la comunicación entre el frontend y el backend en entornos locales y optimizando la salida final para producción.

// vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; // Importa el plugin de React

export default defineConfig({
  plugins: [react()], // Habilita el plugin de React
  server: {
    proxy: {
      '/api': 'http://localhost:3000', // Redirige todas las solicitudes que comienzan con "/api" al backend
    },
  },
});