Cómo conectar tu aplicación React a un backend en el mismo origen

 

 

 

Como conectar tu aplicacion react a un backend en el mismo origen 1

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-appcó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.jsonarchivo 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 buildcuando 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.jsonarchivo si te parece conveniente.

En el código a continuación, requerimos el pathmó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:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. 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

 

Como conectar tu aplicacion react a un backend en el mismo origen 1
Como conectar tu aplicacion react a un backend en el mismo origen 1

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

 

 

Update cookies preferences