Cómo servir una aplicación React y una aplicación backend del lado del servidor desde el mismo origen, sin tener que usar CORS en el servidor y preocuparse por los puertos
Creo que la forma más utilizada de iniciar una aplicación React es mediante create-react-app
. Es muy conveniente.
Un problema con el que podrías encontrarte es cómo conectarlo a un backend que ya tienes o a uno que quieras crear.
En desarrollo
Al desarrollar la aplicación, desea aprovechar la recarga en caliente y todas las demás funciones convenientes de create-react-app. ¿Cómo puede combinar eso con un backend sin tener que usar CORS en el servidor y preocuparse por los puertos?
Voy a proporcionar un ejemplo usando Express en la publicación, pero esto se aplica a cualquier otro marco.
Suponiendo que estás probando esto, creemos una aplicación React:
npx create-react-app testing
entonces
cd testing
Ahora crea un servidor Express simple en un archivo server.js, que puedes agregar donde quieras. Incluso puede estar en una carpeta separada.
Si elige agregar este archivo dentro del create-react-app
código de la aplicación, ejecute:
npm install express
Y ya estamos listos. Agregue esta sencilla configuración de Express:
const express = require('express');const app = express();app.get('/hey', (req, res) = res.send('ho!'))app.listen(8080)
Punto crucial aquí: abrir el package.json
archivo y agregar esta línea en algún lugar:
"proxy": "https://localhost:8080"
Esto le indica a React que envíe las solicitudes de API al servidor Node.js creado con Express. Tramites en Ecuador
Ahora ejecute este proceso de Node usando node server.js
. En otra ventana, inicie la aplicación CRA usando npm start
.
Cuando el navegador se abra en el puerto 3000 (por defecto), abra DevTools y ejecute:
fetch('/hey')
Si verifica el panel de red, debería obtener una respuesta exitosa con el ho!
mensaje.
En producción
En producción, lo ejecutarás npm run build
cuando estés listo para implementar y usaremos el servidor Express para servir esos archivos estáticos.
Ahora todo el asunto del proxy es inútil (y tampoco funcionará en producción: está pensado para facilitar el desarrollo), lo que significa que puedes dejarlo en el package.json
archivo si te parece conveniente.
En el código a continuación, requerimos el path
módulo Node integrado y le indicamos a la aplicación que sirva la compilación estática de la aplicación React:
const express = require('express')const path = require('path')const app = express()app.use(express.static(path.join(__dirname, 'build')))app.get('/ping', (req, res) = { return res.send('pong')})app.get('/', (req, res) = { res.sendFile(path.join(__dirname, 'build', 'index.html'))})app.listen(8080)
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Cómo conectar tu aplicación React a un backend en el mismo origen
Cómo servir una aplicación React y una aplicación backend del lado del servidor desde el mismo origen, sin tener que usar CORS en el servidor y preocuparse
programar
es
https://aprendeprogramando.es/static/images/programar-como-conectar-tu-aplicacion-react-a-un-backend-en-el-mismo-origen-2049-0.jpg
2024-11-01
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente