Configurer une application React avec un serveur proxy Node.js

Temps de lecture: 4 minutes

October 09, 2018

Rédigé par

Twilion

Configurer une application React avec un serveur proxy Node.js

Create react app est un excellent outil pour avoir une application React qui tourne en un rien de temps. Mais c’est un peu plus brouillon quand il s’agit de créer ou de prototyper une application nécessitant un composant côté serveur - comme la création de token d'accès pour Twilio Video ou Chat.

J'ai trouvé qu'il était plus facile de travailler sur un serveur au sein du même projet, afin de pouvoir tout démarrer avec une seule commande.

À la fin de cet article, vous aurez appris à configurer un serveur Express qui fonctionne avec une application React.

Si vous êtes pressés, vous pouvez directement aller voir le code sur GitHub.

Comment ça marche ?

Il existe une option que vous pouvez définir dans le package.json de Create React App. Elle permet de rediriger les requêtes qui ne sont pas au format text/html vers un autre back-end.

Aujourd'hui, nous voulons être en mesure d'exécuter un serveur au sein même du projet React, mais cette fonctionnalité peut aussi être utilisée pour envoyer des requêtes vers des applications qui tournent ailleurs.

Nous allons utiliser plusieurs modules npm - qui permettront d'exécuter une seule commande pour lancer simultanément notre application React et un serveur Express qui nous servira de proxy.

Pour commencer

Pour suivre le reste de ce tutoriel, vous devez avoir installé Node.js et npm.

Commencez par créer une nouvelle application React avec Create React App.

Sachez qu’il n’est pas nécessaire d'installer le package create-react-app globalement, vous pouvez directement exécuter :

npm init react-app my-new-app
cd my-new-app

Sous le capot, npm init prend un nom d'initialisateur, le préfixe avec create- et utilise npx pour installer et exécuter la commande.

Vous pouvez exécuter la nouvelle application React pour vous assurer qu'elle a été générée correctement.

npm start

Si vous voyez un logo React qui tourne, alors c’est tout bon, on va pouvoir rentrer dans le vif du sujet !

Ajouter un serveur

Nous ajouterons nos dépendances serveur aux devDependencies de notre application React car elles ne font pas partie de la construction du front end.

Arrêtez le serveur avec Cmd/Ctrl + C et utilisez npm pour installer Express et Body Parser :

npm install express body-parser --save-dev

Pour lancer à la fois le front end et le serveur, ajoutez les dépendances suivantes :

node-env-run : Module de Dominik pour charger les variables d'environnement à partir d'un fichier de configuration en développement.
nodemon : pour redémarrer automatiquement le serveur lorsqu'il change.
npm-run-all - pour exécuter plusieurs scripts npm simultanément.
express-pino-logger et pino-colada - pour une meilleure journalisation du serveur.

npm install node-env-run nodemon npm-run-all express-pino-logger pino-colada --save-dev

Nous allons créer un fichier intitulé .env dans le répertoire du projet pour stocker nos variables d'environnement.

Pas besoin d'y ajouter quoi que ce soit pour le moment : il nous sera utile plus tard pour inclure les informations d'identification nécessaires pour le serveur, comme les clés API…

Ensuite, toujours dans le répertoire du projet, créez-en un nouveau intitulé server ainsi qu’un fichier server/index.js. Nous allons créer une petite application que nous pourrons tester !

Ajoutez le code suivant dans server/index.js :

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();
 
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);
 
app.get('/api/greeting', (req, res) => {
  const name = req.query.name || 'World';
  res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ greeting: `Hello ${name}!` }));
});
 
app.listen(3001, () =>
  console.log('Express server is running on localhost:3001')
);

Ouvrez package.json et dans l'objet "scripts", ajoutez-en un nouveau pour exécuter le serveur en utilisant node-env-run et nodemon :

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon | pino-colada"
  },

Testons maintenant si le serveur fonctionne correctement en exécutant :

npm run server

Pour vérifier que tout fonctionne bien, ouvrez http://localhost:3001/api/greeting.

Vous devriez voir une réponse JSON contenant le message : " Hello World!". Essayez donc d'ajouter un paramètre de requête name à l'URL et voyez ce que vous obtenez.

Exécuter le serveur et l'application React

Pour faire fonctionner le serveur et l'application React en même temps, nous devons ajouter quelques éléments supplémentaires à package.json.

Tout d'abord, nous allons configurer le proxy vers notre serveur : ajoutez la clé "proxy" au fichier package.json. Nous avons déjà programmé notre serveur pour qu'il fonctionne sur le port 3001, donc faites pointer le proxy sur localhost:3001.

  "proxy": "http://localhost:3001"

Nous avons besoin d'un script pour exécuter à la fois le serveur et le front-end. Pour cela, nous allons utiliser npm-run-all.

Puisque nous allons exécuter deux scripts en même temps, il faut utiliser le mode parallèle. npm-run-all nous donne un raccourci bien pratique pour faire ça avec la commande run-p.

Ajoutez le code suivant à la section "scripts" du fichier package.json:

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start"
  },

Exécutez npm run dev : l'application React et le serveur vont démarrer.

Cependant, nous ne pouvons pas charger localhost:3000/api/greeting dans le navigateur car le proxy de Create React App répondra simplement avec le HTML de base.

Testons-le plutôt à partir d'un composant de notre application React.

Utilisation du serveur proxifié depuis React

Pour ça, nous allons ajouter un formulaire au component App qui utilisera le component /api/greeting pour former une salutation et l'afficher sur la page.

Ajoutez le constructeur et les fonctions suivantes au composant App dans src/App.js :

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      greeting: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
 
  handleChange(event) {
    this.setState({ name: event.target.value });
  }
 
  handleSubmit(event) {
    event.preventDefault();
    fetch(`/api/greeting?name=${encodeURIComponent(this.state.name)}`)
      .then(response => response.json())
      .then(state => this.setState(state));
  }

Puis, ajoutez ce formulaire au JSX dans la fonction render:

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <form onSubmit={this.handleSubmit}>
            <label htmlFor="name">Enter your name: </label>
            <input
              id="name"
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
            <button type="submit">Submit</button>
          </form>
          <p>{this.state.greeting}</p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

Ouvrez l'application React dans le navigateur, saisissez votre nom et envoyez le forumlaire.

Le message d'accueil montre que votre application React communique maintenant avec votre serveur proxy !

Ce n'est que le début

Create React App fait un excellent travail pour démarrer une application React, mais si vous avez besoin d'un composant côté serveur aussi, cela peut être compliqué.

Dans ce billet, vous avez vu comment utiliser l'option proxy et faire fonctionner un serveur Express en parallèle à l’aide des outils comme npm-run-all.

Vous pouvez consulter tout le code de ce post dans ce repo GitHub et l'utiliser comme point de départ si vous voulez construire une application React avec une API Express.

Petit bonus : si vous souhaitez créer une application Twilio Vidéo ou Twilio Chat avec React, la branche Twilio est configurée pour envoyer des tokens d'accès pour l'une ou l'autre. Il suffit de suivre les instructions dans le README.

Grâce à ce template, la création d'applications React avec un serveur Express est plus rapide et plus facile. J'espère que cela vous donnera une bonne plateforme pour développer vos propres idées ; j'ai hâte de voir ce que vous allez construire !

Articles associés

Ressources connexes

Twilio Docs

Des API aux SDK en passant par les exemples d'applications

Documentation de référence sur l'API, SDK, bibliothèques d'assistance, démarrages rapides et didacticiels pour votre langage et votre plateforme.

Centre de ressources

Les derniers ebooks, rapports de l'industrie et webinaires

Apprenez des experts en engagement client pour améliorer votre propre communication.

Ahoy

Le hub de la communauté des développeurs de Twilio

Meilleures pratiques, exemples de code et inspiration pour créer des expériences de communication et d'engagement numérique.