Comment faire fonctionner create-react-app avec une API back-end de nœud

C'est une question très courante parmi les nouveaux développeurs React, et une question que j'avais lorsque je débutais avec React et Node.js. Dans ce court exemple, je vais vous montrer comment faire create-react-appfonctionner Node.js et Express Back-end.

create-react-app

Créez un projet en utilisant create-react-app.

npx create-react-app example-create-react-app-express

Créez un /clientrépertoire sous le example-create-react-app-expressrépertoire et déplacez tout le code standard React créé par create-react-appvers ce nouveau répertoire client.

cd example-create-react-app-expressmkdir client

Le serveur Node Express

Créez un package.jsonfichier dans le répertoire racine ( example-create-react-app-express) et copiez le contenu suivant:

{ "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" } }

Notez que j'utilise concurrently pour exécuter l'application React et le serveur en même temps. L' –kill-others-on-failindicateur tuera les autres processus si l'on sort avec un code d'état différent de zéro.

Installez nodemon globalement et les dépendances du serveur:

npm i nodemon -g yarn

Créez un server.jsfichier et copiez le contenu suivant:

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}`));

Il s'agit d'un simple serveur Express qui fonctionnera sur le port 5000 et qui aura deux routes API: GET- /api/helloet POST- /api/world.

À ce stade, vous pouvez exécuter le serveur Express avec la commande suivante (toujours dans le répertoire racine):

node server.js

Naviguez maintenant vers //localhost:5000/api/hello, et vous obtiendrez ce qui suit:

Nous testerons la POSTroute une fois que nous aurons créé l'application React.

L'application React

Passez maintenant au clientrépertoire où réside notre application React.

Ajoutez la ligne suivante au package.jsonfichier créé par create-react-app.

"proxy": "//localhost:5000/"

La clé pour utiliser un serveur back-end Express avec un projet créé avec create-react-appest d'utiliser un proxy. Cela indique au serveur de développement Web-pack de transmettre par proxy nos requêtes API à notre serveur API, étant donné que notre serveur Express est en cours d'exécution localhost:5000.

Modifiez maintenant ./client/src/App.jspour appeler notre Back-end API Express, les modifications sont en gras.

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;

Nous créons une callApiméthode pour interagir avec notre GETroute API Express, puis nous appelons cette méthode componentDidMountet définissons finalement l'état sur la réponse API, qui sera Hello From Express .

Notez que nous n'avons pas utilisé une URL complète //localhost:5000/api/hellopour appeler notre API, même si notre application React s'exécute sur un port différent (3000). C'est à cause de laproxyligne que nous avons ajoutée au package.jsonfichier plus tôt.

Nous avons un formulaire avec une seule entrée. Lors des appels soumis handleSubmit, qui à son tour appelle notre POSTroute API Express, enregistre la réponse à l'état et affiche un message à l'utilisateur: J'ai reçu votre demande POST. Voici ce que vous m'avez envoyé: [message de l'entrée] .

Maintenant, ouvrez ./client/src/App.csset modifiez la .App-headerclasse comme suit (changements en gras)

.App-header { ... min-height: 50%; ... padding-bottom: 10px; }

Lancer l'application

Si vous avez toujours le serveur en cours d'exécution, continuez et arrêtez-le en appuyant sur Ctrl + C dans votre terminal.

À partir du répertoire racine du projet, exécutez ce qui suit:

yarn dev

Cela lancera l'application React et exécutera le serveur en même temps.

Naviguez maintenant vers //localhost:3000et vous accéderez à l'application React affichant le message provenant de notre GETitinéraire Express. Agréable ?!

Maintenant, tapez quelque chose dans le champ de saisie et soumettez le formulaire, vous verrez la réponse de l' POSTitinéraire express affiché juste en dessous du champ de saisie.

Enfin, jetez un œil à votre terminal, vous verrez le message que nous avons envoyé du client, c'est parce que nous appelons console.logle corps de la demande dans l' POSTitinéraire Express.

Déploiement en production sur Heroku

Ouvrez server.jset remplacez par le contenu suivant:

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}`));

Ouvrez ./package.jsonet ajoutez ce qui suit à l' scriptsentrée

"start": "node server.js", "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"

Heroku exécutera le startscript par défaut et cela servira notre application. Ensuite, nous voulons demander à Heroku de créer notre application client, nous le faisons avec un heroku-postbuildscript.

Maintenant, rendez-vous sur Heroku et connectez-vous (ou ouvrez un compte si vous n'en avez pas).

Créez une nouvelle application et donnez-lui un nom

Click on the Deploy tab and follow the deploy instructions (which I think they are pretty self-explanatory, no point on replicating them here ?)

And that is it, you can open your app by clicking on the Open app button at the top right corner within the Heroku dashboard for your app.

Visit the deployed app for this tutorial: //cra-express.herokuapp.com/

Other Deployment Options

I write about other deployments options here:

  • Netlify
  • Now
  • Heoku (more in-depth explanation)

Project Structure

This will be the final project structure.

Get the full code on the GitHub repository.

Thank you for reading and I hope you enjoyed it. Any question, suggestions let me know in the comments below!

You can follow me on Twitter, GitHub, Medium, LinkedIn or all of them.

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 ?