Esta es una pregunta muy común entre los desarrolladores de React más nuevos, y una pregunta que tenía cuando comencé con React y Node.js. En este breve ejemplo, le mostraré cómo hacer que create-react-appfuncione con Node.js y Express Back-end.
crear-reaccionar-aplicación
Crea un proyecto usando create-react-app.
npx create-react-app example-create-react-app-expressCree un /clientdirectorio en el example-create-react-app-expressdirectorio y mueva todo el código repetitivo de React creado por create-react-appa este nuevo directorio de cliente.
cd example-create-react-app-expressmkdir clientEl servidor Node Express
Cree un package.jsonarchivo dentro del directorio raíz ( example-create-react-app-express) y copie el siguiente contenido:
{ "name": "example-create-react-app-express", "version": "1.0.0", "scripts": { "client": "cd client && yarn start", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"" }, "dependencies": { "body-parser": "^1.18.3", "express": "^4.16.4" }, "devDependencies": { "concurrently": "^4.0.1" } }Observe que estoy usando concurrently para ejecutar la aplicación React y el servidor al mismo tiempo. La –kill-others-on-failbandera matará otros procesos si uno sale con un código de estado distinto de cero.
Instale nodemon globalmente y las dependencias del servidor:
npm i nodemon -g yarnCree un server.jsarchivo y copie el siguiente contenido:
const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const port = process.env.PORT || 5000; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.get('/api/hello', (req, res) => { res.send({ express: 'Hello From Express' }); }); app.post('/api/world', (req, res) => { console.log(req.body); res.send( `I received your POST request. This is what you sent me: ${req.body.post}`, ); }); app.listen(port, () => console.log(`Listening on port ${port}`));Este es un servidor Express simple que se ejecutará en el puerto 5000 y tendrá dos rutas API: GET- /api/helloy POST- /api/world.
En este punto, puede ejecutar el servidor Express con el siguiente comando (aún dentro del directorio raíz):
node server.jsAhora navegue hasta //localhost:5000/api/helloy obtendrá lo siguiente:
Probaremos la POSTruta una vez que creemos la aplicación React.
La aplicación React
Ahora cambie al clientdirectorio donde vive nuestra aplicación React.
Agregue la siguiente línea al package.jsonarchivo creado por create-react-app.
"proxy": "//localhost:5000/"La clave para usar un servidor back-end Express con un proyecto creado con create-react-appes usar un proxy. Esto le dice al servidor de desarrollo del paquete web que envíe nuestras solicitudes de API a nuestro servidor de API, dado que nuestro servidor Express se está ejecutando localhost:5000.
Ahora modifique ./client/src/App.jspara llamar a nuestro Express API Back-end, los cambios están en negrita.
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { state = { response: '', post: '', responseToPost: '', }; componentDidMount() { this.callApi() .then(res => this.setState({ response: res.express })) .catch(err => console.log(err)); } callApi = async () => { const response = await fetch('/api/hello'); const body = await response.json(); if (response.status !== 200) throw Error(body.message); return body; }; handleSubmit = async e => { e.preventDefault(); const response = await fetch('/api/world', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ post: this.state.post }), }); const body = await response.text(); this.setState({ responseToPost: body }); }; render() { return ( Edit src/App.js and save to reload.
Learn React {this.state.response}
Post to Server:
this.setState({ post: e.target.value })} /> Submit {this.state.responseToPost}
); } } export default App;Creamos un callApimétodo para interactuar con nuestra GETruta de la API Express, luego llamamos a este método componentDidMounty finalmente establecemos el estado en la respuesta de la API, que será Hello From Express .
Observe que no usamos una URL completamente calificada //localhost:5000/api/hellopara llamar a nuestra API, a pesar de que nuestra aplicación React se ejecuta en un puerto diferente (3000). Esto se debe a laproxylínea que agregamos al package.jsonarchivo anteriormente.
Tenemos un formulario con una sola entrada. Cuando se envían llamadas handleSubmit, que a su vez llama a nuestra POSTruta de API Express, luego guarda la respuesta en el estado y muestra un mensaje al usuario: Recibí su solicitud POST. Esto es lo que me enviaste: [mensaje de entrada] .
Ahora abra ./client/src/App.cssy modifique la .App-headerclase de la siguiente manera (cambios en negrita)
.App-header { ... min-height: 50%; ... padding-bottom: 10px; }Ejecutando la aplicación
Si aún tiene el servidor en ejecución, continúe y deténgalo presionando Ctrl + C en su terminal.
Desde el directorio raíz del proyecto, ejecute lo siguiente:
yarn devEsto iniciará la aplicación React y ejecutará el servidor al mismo tiempo.
Ahora navega //localhost:3000y presionarás la aplicación React que muestra el mensaje proveniente de nuestra GETruta Express. Agradable ?!
Ahora, escriba algo en el campo de entrada y envíe el formulario, verá la respuesta de la POSTruta Express que se muestra justo debajo del campo de entrada.
Finalmente eche un vistazo a su terminal, verá el mensaje que le enviamos desde el cliente, eso es porque llamamos console.logal cuerpo de la solicitud en la POSTruta Express.
Implementación de producción en Heroku
Abra server.jsy reemplace con el siguiente contenido:
const express = require('express'); const bodyParser = require('body-parser'); const path = require('path'); const app = express(); const port = process.env.PORT || 5000; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); // API calls app.get('/api/hello', (req, res) => { res.send({ express: 'Hello From Express' }); }); app.post('/api/world', (req, res) => { console.log(req.body); res.send( `I received your POST request. This is what you sent me: ${req.body.post}`, ); }); if (process.env.NODE_ENV === 'production') { // Serve any static files app.use(express.static(path.join(__dirname, 'client/build'))); // Handle React routing, return all requests to React app app.get('*', function(req, res) { res.sendFile(path.join(__dirname, 'client/build', 'index.html')); }); } app.listen(port, () => console.log(`Listening on port ${port}`));Abra ./package.jsony agregue lo siguiente a la scriptsentrada
"start": "node server.js", "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"Heroku ejecutará el startscript de forma predeterminada y este servirá a nuestra aplicación. Luego queremos instruir a Heroku para que cree nuestra aplicación cliente, lo hacemos con heroku-postbuildscript.
Ahora, dirígete a Heroku e inicia sesión (o abre una cuenta si no tienes una).
Crea una nueva aplicación y dale un nombre
Haga clic en la pestaña Implementar y siga las instrucciones de implementación (que creo que se explican por sí mismas, ¿no tiene sentido replicarlas aquí?)
Y eso es todo, puede abrir su aplicación haciendo clic en el botón Abrir aplicación en la esquina superior derecha dentro del panel de Heroku para su aplicación.
Visite la aplicación implementada para este tutorial: //cra-express.herokuapp.com/
Otras opciones de implementación
Escribo sobre otras opciones de implementación aquí:
- Netlify
- Ahora
- Heoku (explicación más detallada)
Estructura del proyecto
Esta será la estructura final del proyecto.
Obtenga el código completo en el repositorio de GitHub.
Gracias por leer y espero que lo hayan disfrutado. Cualquier pregunta, sugerencia, hágamelo saber en los comentarios a continuación.
Puedes seguirme en Twitter, GitHub, Medium, LinkedIn o todos ellos.
This post was originally posted on my personal blog website.
Update 8/25/19: I have been building a prayer web app called "My Quiet Time - A Prayer Journal". If you would like to stay in the loop please sign up through the following link: //b.link/mqt
The app will be released before the end of the year, I have big plans for this app. To see some mockup screenshots follow the following link: //pc.cd/Lpy7
My DMs on Twitter are open if you have any questions regarding the app ?