Comment installer ReactJS avec un proxy Nginx sur CentOS 8

React est une bibliothèque JavaScript gratuite et open-source développée par Facebook. Elle est utilisée pour créer des composants d’interface utilisateur et des interfaces frontend web. Elle est souvent utilisée pour développer des applications web ou des applications mobiles. Elle permet aux développeurs de créer des composants réutilisables qui sont indépendants les uns des autres. Elle peut être utilisée avec d’autres bibliothèques, y compris Axios, JQuery AJAX, ou la fonction intégrée window.fetch du navigateur.

Dans cet article, nous allons vous montrer comment installer React JS sur CentOS 8

Prérequis

• Un serveur exécutant CentOS 8.
• Un nom de domaine valide pointant vers l’IP de votre serveur.
• Un mot de passe root configuré sur le serveur.

Prise en main

Avant de commencer, vous devrez mettre à jour les paquets de votre système vers la dernière version. Vous pouvez les mettre à jour en exécutant la commande suivante :

dnf update -y

Une fois tous les paquets à jour, installez les autres dépendances requises avec la commande suivante :

dnf install gcc-c++ make curl -y

Une fois que vous avez terminé d’installer les dépendances requises, vous pouvez passer à l’étape suivante.

Installer NPM et Node.js

Ensuite, vous devrez installer Node.js et NPM sur votre système. NPM, également appelé gestionnaire de paquets, est un outil en ligne de commande utilisé pour interagir avec les paquets JavaScript. Par défaut, la dernière version de NPM et Node.js n’est pas incluse dans le dépôt par défaut de CentOS. Vous devrez donc ajouter le dépôt source de Node à votre système. Vous pouvez l’ajouter avec la commande suivante :

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

Une fois le dépôt ajouté, installez Node.js et NPM avec la commande suivante :

dnf install nodejs -y

Une fois l’installation terminée, vérifiez la version de Node.js en exécutant la commande suivante :

node -v

Vous devriez obtenir la sortie suivante :

v14.16.0

Vous pouvez également vérifier la version de NPM en exécutant la commande suivante :

npm -v

Vous devriez obtenir la sortie suivante :

6.14.11

À ce stade, NPM et Node.js sont installés sur votre système. Vous pouvez maintenant procéder à l’installation de Reactjs.

Installer Reactjs

Avant de commencer, vous devrez installer create-react-app sur votre système. C’est un utilitaire en ligne de commande utilisé pour créer une application React.

Vous pouvez l’installer en utilisant NPM comme indiqué ci-dessous :

npm install -g create-react-app

Une fois installé, vérifiez la version installée de create-react-app en utilisant la commande suivante :

create-react-app --version

Vous devriez voir la sortie suivante :

4.0.3

Ensuite, créez votre première application Reactjs avec la commande suivante :

create-react-app myapp

Vous devriez voir la sortie suivante :

Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

Ensuite, changez le répertoire vers myapp et démarrez l’application avec la commande suivante :

cd myapp  
npm start

Une fois l’application démarrée avec succès, vous devriez obtenir la sortie suivante :

Compiled successfully!

You can now view myapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Maintenant, appuyez sur CTRL+C pour arrêter l’application. Vous pouvez maintenant passer à l’étape suivante.

Créer un fichier de service Systemd pour Reactjs

Ensuite, il est judicieux de créer un fichier de service systemd pour gérer le service Reactjs. Vous pouvez le créer avec la commande suivante :

nano /lib/systemd/system/react.service

Ajoutez les lignes suivantes :

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

Enregistrez et fermez le fichier, puis rechargez le démon systemd avec la commande suivante :

systemctl daemon-reload

Ensuite, démarrez le service Reactjs et activez-le pour qu’il démarre au démarrage du système avec la commande suivante :

systemctl start react  
systemctl enable react

Ensuite, vérifiez l’état de l’application Reactjs avec la commande suivante :

systemctl status react

Vous devriez obtenir la sortie suivante :

? react.service
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
 Main PID: 2191 (node)
    Tasks: 29 (limit: 12524)
   Memory: 220.3M
   CGroup: /system.slice/react.service
           ??2191 npm
           ??2202 node /root/myapp/node_modules/.bin/react-scripts start
           ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.

À ce stade, Reactjs est démarré et écoute sur le port 3000. Vous pouvez le vérifier avec la commande suivante :

ss -antpl | grep 3000

Vous devriez obtenir la sortie suivante :

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:((