ReactJS est une bibliothèque JavaScript open source frontale très puissante utilisée pour créer l'interface utilisateur et les composants associés. Il est maintenu par Facebook et la communauté des développeurs. ReactJS peut être utilisé dans le développement d'applications Web ou d'applications mobiles.
Dans ce tutoriel, nous allons vous montrer comment installer ReactJS sur votre serveur Ubuntu 20.04.
Prérequis
- Un VPS Ubuntu 20.04 avec un accès root activé ou un utilisateur avec des privilèges Sudo.
- 4 Go de RAM (minimum 2 Go)
- 10 Go d'espace libre
Étape 1 :Connectez-vous via SSH et mettez à jour votre système
Tout d'abord, vous devrez vous connecter à votre serveur Ubuntu 20.04 via SSH en tant qu'utilisateur root :
ssh root@IP_Address -p Port_number
Vous devrez remplacer "IP_Address" et "Port_number" par l'adresse IP et le numéro de port SSH respectifs de votre serveur. De plus, remplacez "root" par le nom d'utilisateur sudo si nécessaire.
Vous devez vous assurer que tous les packages du système d'exploitation Ubuntu installés sur le serveur sont à jour. Exécutez les commandes suivantes pour mettre à niveau tous les packages installés sur votre serveur :
apt-get update apt-get upgrade
Étape 2. Installer Nodejs et NPM
Tout d'abord, vous devez installer NodeJS car une application ReactJS ne peut s'exécuter que si NodeJS est installé sur votre serveur. Node.js est un environnement d'exécution JavaScript open source et multiplateforme basé sur le moteur JavaScript V8 de Chrome.
Le moyen simple et le plus simple d'installer Node.js et npm consiste à les installer à partir du référentiel par défaut d'Ubuntu.
Par défaut, la dernière version de Node.js n'est pas disponible dans le référentiel par défaut d'Ubuntu 20.04. Vous devrez donc ajouter le référentiel officiel Node.js à votre système.
Ajoutez le dépôt Node.js avec la commande suivante :
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Et installez Node.js à partir des référentiels ajoutés en exécutant la commande suivante :
sudo apt-get install nodejs
Une fois NodeJS installé, vous pouvez vérifier la version installée de Node.js avec la commande suivante :
node -v
Vous devriez obtenir le résultat suivant :
v14.17.1
Une fois Node.js installé, mettez à jour le NPM vers la dernière version à l'aide de la commande suivante :
npm install npm@latest -g
Vous pouvez maintenant vérifier la version de npm avec la commande suivante :
npm -v
Vous devriez obtenir le résultat suivant :
7.19.0
Étape 3. Installer l'outil Create-React-App
Installez maintenant le create-react-app outil utilisant NPM. Cet outil permet de définir tous les outils nécessaires pour créer un nouveau projet dans React.
npm install -g create-react-app
Vérifiez la version avec :
create-react-app --version
Vous devriez obtenir le résultat suivant :
4.0.3
Étape 4 :Créez votre application ReactJS
Vous pouvez créer votre application ReactJS avec la commande suivante :
create-react-app my-project
Une fois l'installation terminée, vous devriez voir le résultat suivant :
Success! Created my-project at /root/my-project 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 my-project npm start Happy hacking!
Une fois votre projet créé, changez le répertoire vers l'application ReactJS :
cd my-project
Vous devez maintenant démarrer votre application ReactJS avec la commande suivante :
npm start
Vous devriez obtenir le résultat suivant :
Compiled successfully! You can now view my-project in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.101:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Par défaut, l'application ReactJS démarre sur le port 3000.
Étape 5 :Créer un fichier de service Systemd pour l'application ReactJS
Ensuite, vous devez 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/reactjs.service
Ajoutez les lignes suivantes :
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/my-project ExecStart=npm start -- --port=3000
Enregistrez et fermez le fichier, puis rechargez le service systemd avec la commande suivante :
systemctl daemon-reload
Ensuite, démarrez le service ReactJS et activez-le au redémarrage du système avec la commande suivante :
systemctl start reactjs systemctl enable reactjs
Vous pouvez vérifier l'état du service ReactJS avec la commande suivante :
systemctl status reactjs
Vous devriez obtenir le résultat suivant :
● reactjs.service Loaded: loaded (/lib/systemd/system/reactjs.service; static; vendor preset: enabled) Active: active (running) Main PID: 66390 (npm start --por) Tasks: 30 (limit: 2248) Memory: 188.7M CGroup: /system.slice/reactjs.service ├─66390 npm start --port=3000 ├─66401 sh -c react-scripts start "--port=3000" ├─66402 node /root/my-project/node_modules/.bin/react-scripts start --port=3000 └─66409 /usr/bin/node /root/my-project/node_modules/react-scripts/scripts/start.js --port=3000
Étape 6 :Accéder à l'interface utilisateur Web ReactJS
Maintenant, ouvrez votre navigateur Web et tapez l'URL http://your-server-ip-address . Vous devriez voir votre application ReactJS sur l'écran suivant :
Toutes nos félicitations! vous avez installé avec succès l'application ReactJS sur Ubuntu 20.04.
Bien sûr, vous n'êtes pas obligé d'installer ReactJS sur Ubuntu si vous utilisez l'un de nos services d'hébergement géré, auquel cas vous pouvez simplement demander à nos administrateurs Linux experts de l'installer pour vous. Ils sont disponibles 24h/24 et 7j/7 et prendront immédiatement en charge votre demande.
PS . Si vous avez aimé cet article sur l'installation de ReactJS sur Ubuntu, partagez-le avec vos amis sur les réseaux sociaux en utilisant les boutons à gauche ou laissez simplement une réponse ci-dessous. Merci.