Mise à niveau avec Node.js : ajout d'un serveur à ma bibliothèque de poses de yoga

Mise à niveau avec Node.js : ajout d'un serveur à ma bibliothèque de poses de yoga

Après m'être familiarisé avec React en créant une simple bibliothèque de poses de yoga, j'ai voulu faire passer mon projet au niveau supérieur en ajoutant des fonctionnalités backend. C'est là qu'intervient Node.js. Node.js est un environnement d'exécution qui nous permet d'exécuter du code JavaScript côté serveur. Dans cet article de blog, je vais expliquer comment j'ai ajouté un serveur Node.js à mon application Yoga Pose Library. C'était une façon fantastique de m'entraîner à travailler avec les technologies frontend et backend, et cela m'a permis de mieux comprendre le fonctionnement des applications full-stack.

Pourquoi ajouter Node.js à mon application React ?

La principale motivation pour ajouter un serveur Node.js à ma bibliothèque de poses de yoga était de servir l'application React et de préparer des fonctionnalités plus avancées ultérieurement, comme la récupération de données de pose à partir d'une base de données ou la gestion de l'authentification des utilisateurs. Pour l'instant, je voulais me concentrer sur la configuration du serveur et sur la diffusion de mes fichiers statiques (l'application React) à partir de celui-ci. De cette façon, je pourrais héberger l’application d’une manière qui pourrait facilement évoluer ultérieurement.

Premiers pas avec Node.js

Avant de plonger dans le code, j'ai installé Node.js et initialisé mon projet avec npm, le gestionnaire de packages Node. Si Node.js n’est pas installé, c’est aussi simple que de vous rendre sur le site Web Node.js et de télécharger la dernière version. Une fois cela fait, j'ai mis en place un serveur Node.js de base.

npm init -y 
npm install express 

J'ai utilisé Express.js, un framework Web minimaliste pour Node.js, pour gérer le routage et servir des fichiers statiques. C'est parfait pour les applications légères comme celle-ci.

Présentation de server.js

Jetons maintenant un coup d'œil au server.js, qui est responsable de la configuration du serveur. Voici le code complété :

// Importing the Express framework
const express = require('express'); 
// Importing the path module to handle file paths
const path = require('path'); 
// Creating an Express App
const app = express(); 
// Setting the PORT
const PORT = process.env.PORT || 3000; 

// Serve static files from the React app app.use(express.static(path.join(__dirname, 'build'))); 

// For any request that doesn't match an API route 
// serve the React app's index.html. 
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); 
}); 

// Start the server
app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
}); 

Décrypter le code

Maintenant, décomposons le server.js une étape à la fois.

Importation de dépendances :

const express = require('express'); 
const path = require('path'); 

Ici, nous importons express, qui est un framework Web pour Node.js, et path, un module Node.js intégré qui nous aide à travailler avec les chemins de fichiers et de répertoires, afin que le serveur puisse localiser correctement les fichiers qui nous voulons servir.

Création d'une application express :

const app = express();  

Nous créons une instance d'une application Express, qui gérera les requêtes et les réponses de notre serveur.

Configuration du port :

const PORT = process.env.PORT || 3000; 

Nous définissons le numéro de port que notre serveur écoutera. Nous recherchons une variable d'environnement PORT, utile pour le déploiement avec un service d'hébergement, et revenons au port 3000 si elle n'est pas définie.

Servir des fichiers statiques :

app.use(express.static(path.join(__dirname, 'build')));

Cette ligne indique à Express de servir les fichiers statiques du répertoire build, qui contient les fichiers compilés de notre application React.

Itinéraire fourre-tout :

app.get('*', (req, res) => { 
  res.sendFile(path.join(__dirname, 'build', 
'index.html')); 
}); 

Cette route fourre-tout garantit que toute requête non traitée par les routes précédentes répondra avec index.html. Ceci est important pour que le routage côté client fonctionne correctement avec React Router.

Démarrage du serveur :

app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
});

Enfin, nous démarrons le serveur et écoutons sur le port défini, en enregistrant un message sur la console lorsqu'elle est prête.

Conclusion : une base solide pour les fonctionnalités futures

L'ajout de Node.js à mon application Yoga Pose Library m'a donné une base solide pour créer des fonctionnalités plus avancées sur toute la ligne. En servant l'application à partir d'un serveur Node.js, je me suis configuré pour gérer facilement des données plus dynamiques, des entrées utilisateur et même des fonctionnalités en temps réel à l'avenir. Ce fut un excellent exercice de combinaison des technologies front-end et back-end, et je suis ravi d'explorer davantage Node.js et Express à mesure que je continue à développer.

Dans mon prochain article de blog, je prévois d'approfondir la façon dont je peux étendre cette configuration avec une base de données, mais pour l'instant, je suis ravi de tout ce que j'ai appris en me familiarisant avec Node.js !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!