Tutorial: Usando React.js con Vite y Configurando un Proxy en Go

Introducción

En este tutorial, aprenderás cómo configurar un proyecto de React.js utilizando Vite como bundler. Vite es una herramienta moderna que ofrece tiempos de compilación más rápidos que otras herramientas como Webpack. Al final, también veremos cómo configurar un proxy en Go para manejar solicitudes a una API externa.

Requisitos Previos

Antes de comenzar, asegúrate de tener instalado lo siguiente:

• Node.js (versión 14 o superior)
• npm o yarn
• Go (versión 1.16 o superior)

Paso 1: Crear un Proyecto de React con Vite

1. Primero, abre tu terminal y navega a la carpeta donde quieres crear tu proyecto.

cd /ruta/donde/quieres/el/proyecto

2. Ejecuta el siguiente comando para crear un nuevo proyecto de React con Vite:

npm create vite@latest my-react-app --template react

Esto generará un nuevo proyecto basado en React.js. Se te pedirá que selecciones una plantilla; elige react.

3. Después de crear el proyecto, navega dentro de la carpeta del proyecto:

cd my-react-app

4. Instala las dependencias:

npm install

5. Para verificar que todo esté funcionando correctamente, inicia el servidor de desarrollo:

npm run dev

6. Abre tu navegador y ve a http://localhost:5173/. Deberías ver la página predeterminada de React.

cd my-react-app

Paso 2: Configuración del Proxy en Vite

A veces, es necesario configurar un proxy para redirigir las solicitudes de la API desde nuestro servidor de desarrollo a un servidor backend diferente. Esto es útil para evitar problemas de CORS (Cross-Origin Resource Sharing).

Abre el archivo vite.config.js que se encuentra en la raíz de tu proyecto.

Agrega una configuración de proxy dentro de la sección server:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:4000',
                changeOrigin: true,
                secure: false,
            },
        },
    },
})

Con esta configuración, cualquier solicitud a /api en el frontend será redirigida al servidor que esté escuchando en http://localhost:4000.

Paso 3: Configurar un Proxy con Go

Para manejar el proxy del lado del servidor usando Go, crearemos una aplicación básica que actúe como un servidor proxy.

Crea un nuevo archivo en la raíz de tu proyecto llamado proxy.go.

Escribe el siguiente código:

package main

import (
    "io"
    "log"
    "net/http"
)

func handleProxy(w http.ResponseWriter, r *http.Request) {
    resp, err := http.Get("https://api.externa.com" + r.URL.Path)
    if err != nil {
        http.Error(w, "Proxy error", http.StatusInternalServerError)
        return
    }
    defer resp.Body.Close()

    for k, v := range resp.Header {
        w.Header()[k] = v
    }
    w.WriteHeader(resp.StatusCode)
    io.Copy(w, resp.Body)
}

func main() {
    http.HandleFunc("/", handleProxy)
    log.Println("Servidor proxy corriendo en :4000")
    log.Fatal(http.ListenAndServe(":4000", nil))
}

Este código básico configura un servidor HTTP que actúa como un proxy, redirigiendo las solicitudes a https://api.externa.com.

1. Para ejecutar el servidor proxy, abre una terminal nueva y ejecuta:

go run proxy.go

El servidor proxy ahora está corriendo en http://localhost:4000. Todas las solicitudes hechas desde el frontend a /api serán redirigidas por el proxy hacia https://api.externa.com.

Paso 4: Prueba de Integración

Ahora, probemos que todo funcione correctamente. Puedes crear un componente simple en React que haga una solicitud a la API a través del proxy.

1. Crea un componente en React llamado ApiRequest.js dentro de la carpeta src/components.

import React, { useEffect, useState } from 'react'

const ApiRequest = () => {
    const [data, setData] = useState(null)

    useEffect(() => {
        fetch('/api/data')
            .then((response) => response.json())
            .then((data) => setData(data))
            .catch((error) => console.error('Error:', error))
    }, [])

    return (
        <div>
            <h1>Datos desde la API</h1>
            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Cargando...</p>}
        </div>
    )
}

export default ApiRequest

2. Incluye este componente en tu App.js:

import React from 'react'
import ApiRequest from './components/ApiRequest'

function App() {
    return (
        <div className="App">
            <h1>React con Vite y Proxy</h1>
            <ApiRequest />
        </div>
    )
}

export default App

3. Inicia el servidor de Vite nuevamente:

npm run dev