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

Cómo servir un React y una aplicación de 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 usarcreate-react-app. Es muy conveniente.

Un problema con el que puede tropezar es cómo conectarlo a un backend que ya tiene, o uno que desee crear.

En desarrollo

Al desarrollar la aplicación, desea aprovechar la recarga en caliente y todas las otras funciones convenientes de create-react-app. ¿Cómo puedes combinar eso con un backend sin tener que usar CORS en el servidor y preocuparte 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á probando esto, creemos una aplicación React:

npx create-react-app testing

entonces

cd testing

Ahora cree un servidor Express simple en un archivo server.js, que puede agregar en cualquier lugar que desee. Incluso puede estar en una carpeta separada por completo.

Si elige agregar este archivo dentro delcreate-react-appcódigo de aplicación, ejecute:

npm install express

Y estamos listos para empezar. Agregue esta sencilla configuración Express:

const express = require('express');
const app = express();

app.get(’/hey’, (req, res) => res.send(‘ho!’))

app.listen(8080)

Punto crucial aquí: abra elpackage.jsonarchivo y agregue esta línea en algún lugar:

"proxy": "http://localhost:8080"

Esto le dice a React a las solicitudes de la API de proxy al servidor Node.js creado con Express.

Ahora ejecute este proceso de nodo usandonode server.js. En otra ventana, inicia la aplicación CRA usandonpm start.

Cuando el navegador se abre en el puerto 3000 (por defecto), abra DevTools y ejecute:

fetch('/hey')

Si revisa el panel de red, debería tener una respuesta exitosa con elho!mensaje.

En producción

En producción, vas a ejecutarnpm run buildcuando esté listo para implementar y usaremos el servidor Express para servir esos archivos estáticos.

Todo el asunto del proxy ahora es inútil (y tampoco funcionará en producción, está destinado a facilitar el desarrollo). Lo que significa que puede dejarlo en elpackage.jsonarchivo si lo encuentra conveniente.

En el código a continuación, requerimos elpathmódulo de nodo incorporado y le decimos 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)

Descarga mi gratisReact Handbook


Más tutoriales de react: