Crée un répertoire
La première étape consiste à la création d'un répertoire.
Il faut retenir le nom du répertoire créé et la localité du nouveau répertoire créé.
Le répertoire va contenir tous les répertoires et fichiers nécessaires pour:
- Initialiser un serveur web local en mode écoute.
- Contenir les répertoires de dépendances provenus de librairies tiers.
En guise d'exemple, je crée un répertoire nommé «boiler».
Ce répertoire sera localiser:
/Users/[NAME]/Documents/NODE3/boiler
Mon système est Mac OS Ventura 13.1. Le concept devrait être le même pour les systèmes d'exploitations Windows ou autres distributions basées Unix pour la création de fichier.
Il faut naviguer /Users/[NAME]/Documents/NODE3 sous Finder, puis faire un clic droit sur la fenêtre principale, puis cliquer Nouveau Dossier («New Folder»). Donne le répertoire un nom et appuyer Entrer («Enter»).
Ouvrir terminal
Sous Mac OS Ventura 13.1. On ouvre un processus terminal au nouveau répertoire qui vient d'être créé.
Sous Mac OS Ventura 13.1. On peut rapidement ouvrir un processus terminal au nouveau fichier «boiler» en faisant un clic droit sur le répertoire («directory») > services («services») > nouveau terminal au répertoire («new terminal at folder»).
Ou ouvrez l'application Terminal, puis:
cd Documents/NODE3/boiler
Ouvrir un éditeur texte
VS Code, ou Sublime text sont de bons éditeurs texte, mais cela n'a pas d'importance.
Ouvrez un éditeur texte, puis assurez-vous que la partie explorer ou répertoire est localisé à l'endroit où vous voulez mettre tous vos répertoires et fichiers de projet.
Dans mon cas particulier sous Mac OS Ventura 13.1. et Visual Studio Code Version 1.83.1 je navigue à Fichier («File») > Ouvrir Répertoire («Open Folder»).
Puis je sélectionne sous la fenêtre contextuelle Finder le répertoire ou mon projet est localisé:
/Users/[NAME]/Documents/NODE3/boiler
Du contexte et de la compréhension
Pour comprendre les étapes suivantes, il faut comprendre l'objectif général de ce que nous cherchons à accomplir avec un projet Node JS.
Node JS est un environnement d'exécution dit asynchrone et architecturé et orienté événements en JavaScript.
En gros, nous cherchons à créer une instance de cet environnement d'exécution localement sur notre ordinateur. L'initialisation et la mise en mode écoute de notre environnement est ce qui constitue un type de serveur dit configurer web.
Vu que notre environnement sera local, on ne va pas nécessiter de logiciel supplémentaire comme Apache, PM2 ou NGINX. Ces logiciels sont généralement installés dans un environnement serveur réel. Une des principales fonctions de NGINX est d'ouvrir un port HTTP accessible sur internet et de configurer sur le serveur ce qui est appelé proxy inverse («reverse-proxy»).
De plus, habituellement, des logiciels de bases de données doivent être installés et configurer sur le serveur. Ensuite, des configurations de sécurité telle que le pare-feu et l'installation de certificat pour HTTPS sont nécessaires.
Un serveur configuré web veut simplement dire que le serveur est capable de traiter des requêtes du protocole HTTP de façon optimiser.
Un logiciel de remise en état automatique doit aussi être installé sur le serveur. Généralement pour Node JS, is s'agit du logiciel nommé PM2. En cas de redémarrage ou crash du serveur, PM2 initiera de manière automatisée le relancent d'une instance Node JS.
Le protocole HTTP est composé de séries de standards définis par IETF.
Tous les détails sur la configuration d'un serveur en environnement «prod» sort du périmètre de cet article.
L'objectif traditionnel est de déployer cette instance programmée sur un serveur distant.
L'environnement d'exécution local est uniquement utilisé pour rouler des tests locaux. Puis au fur et à mesure qu'on est satisfait du fonctionnement local, on fait des déploiements à un serveur distant.
Cela rend une version de l'instance ouverte sur le World Wide Web, l'internet ou le public en général.
L'installation de Node JS et de NPM
Pour initier un serveur web en mode écoute localement, il faut installer les logiciels nécessaires.
Allez à ce lien: page d'installation de Node JS.
Si vous cherchez une installation pour un certain système d'exploitation, allez à ce lien: «Node JS downloads».
La procédure d'installation est assez simple.
Clic sur «Download 20.9.0 lts».
Cela va télécharger un fichier .pkg si vous êtes si Mac OS.
Dans mon cas de figure, cela a téléchargé ce fichier: node-v20.9.0.pkg
L'installation de Node JS et de NPM partie 2
Double clic le fichier qui vient d'être installé: node-v20.9.0.pkg disponible sur le Bureau («Desktop»).
Suivez les étapes et peser Continu (Continue) jusqu'à l'installation soit finie.
Vérification de l'installation
Maintenant que l'installation des logiciels sont finis, on peut verifier si l'installation a prix effet.
Écrivez les commandes suivants sur le terminal et comme retour vous verrez les numéros des versions des installations de Node JS et NPM.
node -v
npm -v
L'installation de Node JS intègre de façon automatique l'installation de NPM.
Dans mon cas on voit que la version de Node JS installer est v16.14.2 et NPM est v8.5.0
Initier un projet Node JS
Pour initier un projet, sur un processus terminal a la localité du répertoire du projet (/Users/[NAME]/Documents/NODE3/boiler) écrivez:
npm init
Maintenant, le programme va vous demander une série de questions pour configurer le fichier package.json qui sera généré à la fin de ce processus:
Dépendances de développements et dépendances
D'abords définissons dépendance de manière générale. Une dépendance est simplement du code informatique de partie tiers qui peut être téléchargé à partir de logiciel tel que NPM.
Une dépendance de développement est opérable et utilisable uniquement dans un environnement de développement. Un environnement de développement est un environnement local et purement utilisé pour opérer des tests et intégration de nouveau code.
Par contre, une dépendance simple est opérable et utilisable en tout moment et en tous environnements.
Dépendances de développement
Installations de paquets NPM
Cette étape est optionnelle, mais je la recommande pour lancer un serveur web localement et sans trop de code.
De plus, avec ses paquets NPM, cela permet de suivre les bonnes pratiques et sont très populaires en industrie.
Cette étape est optionnelle dans la mesure que vous ne disposez pas du code informatique pour lancer un serveur web HTTP qui puisse traiter des requêtes HTTP.
Mais dans la mesure où vous voulez juste lancer un serveur web qui puissent traiter des requêtes HTTP de façon simple et rapide, veuillez utiliser les paquets suivants:
- express: Framework Web rapide, sans opinion et minimaliste pour Node.js. Express sera installé comme étant une dépendance.
- nodemon: Nodemon est un outil qui permet de développer des applications en redémarrant automatiquement l'application lorsque des modifications de fichiers dans le répertoire sont détectées. Nodemon sera installé comme étant une dépendance de développement.
- dotenv: Dotenv est un module qui charge les variables d'environnement d'un fichier .env dans process.env.
- ejs: EJS est un langage simple qui vous permet de générer du balisage HTML en intégrant du JavaScript.
npm install --save-dev nodemon
npm install --save express
npm install --save dotenv
npm install --save ejs
Ajout script «npm run start»
Afin de pouvoir lancer l'application à temps voulu. Il faut ajouter une commande à la liste de commandes recensées sur package.json.
Ajoutez le script suivant dans le fichier package.json:
"start": "nodemon index.js"
Avec cette configuration, si on exécute la commande:
npm run start
Cela va exécuter:
nodemon index.js
Et cela va lancer l'application avec le paquet nodemon. Nodemon est un paquet qui met l'application sous mode surveille («watch»).
Cela veut dire que nodemon relance l'application à chaque modification et sauvegarde du code source afin que les modifications prennent effet de façon automatisée. Nodemon nous permet donc de développer notre application de manière plus rapide et efficiente.
Création du fichier .env
Maintenant, il faut créer deux fichiers nommé .env à la racine du répertoire.
Copier-coller le contenu ci-bas dans le fichier local .env
NODE_ENV=development
PORT=3005
Enfaite, les variables définies dans ce fichier deviennent disponibles à tous vos fichiers sources via la variable global:
process.env
La raison pour laquelle nous définissons certaines variables de cette manière est par ce que ces variables vont différer en fonction de l'environnement. Généralement, dans le développement web, il existe deux types d'environnements:
- Local dit de développement.
- Distant sur serveur dit de production.
Les variables d'environnements sont isolés du code source, c'est-à-dire définis dans le fichier .env.
Ce fichier reste dans l'environnement dans lequel il est utilisé et n'est ni déployé vers le serveur, ni vice-versa, télécharger sur votre ordinateur.
.env doit être créé, rédiger et modifier de façon rattachée et propre a son propre environnement.
Création du fichier index.js et code informatique
Maintenant, il faut créer un fichiers nommés index.js à la racine du répertoire.
Ensuite, allez au répertoire git suivant: «node express boilerplate 2023».
Copier-coller le contenu du fichier distant index.js dans le fichier local index.js.
Création de fichiers ejs
Crée un répertoire «views» à la racine du répertoire de projet. Dedans, créez deux fichiers ejs nommés: «index.ejs» et «url_not_present.ejs» avec du contenu HTML simple dedans.
Allez au répertoire git suivant pour retrouver le code nécessaire: «node express boilerplate 2023».
Explication du script index.js pour lancer l'instance serveur web
const express = require('express')
Ici, vous importez la bibliothèque Express.js, qui est un framework pour Node.js permettant de construire des applications web de manière simple et rapide.
const app = express()
Cette ligne crée une nouvelle instance de l'application Express, souvent appelée "app". Cette instance sera utilisée pour définir et gérer les routes, les middlewares et d'autres configurations de votre serveur.
require('dotenv').config()
Cette ligne charge le module dotenv, qui est un outil permettant de charger des variables d'environnement depuis un fichier .env dans votre projet. Le .env est généralement utilisé pour stocker des informations sensibles ou des configurations spécifiques à un environnement (par exemple, les clés d'API, les mots de passes nécessaires a la connexion à la base de données, etc.) de manière sécurisée. La méthode .config() lit ce fichier et ajoute ces variables d'environnement pour qu'elles soient accessibles via process.env.
const PORT = process.env['PORT']
Ici, vous assignez la valeur de la variable d'environnement PORT à la constante PORT. Si vous avez défini cette variable dans votre fichier .env, elle sera disponible grâce au module dotenv que vous avez chargé précédemment. Cette constante détermine le port sur lequel votre serveur Express écoutera.
app.use(express.static('public'))
La méthode app.use() est utilisée pour ajouter des middlewares à votre application Express. Un middleware est fondamentalement une fonction qui peut traiter les requêtes et manipuler les réponses a un certain moment du cycle de vie du processus HTTP.
Ici, express.static('public') est un middleware fourni par Express pour servir des fichiers statiques. Cela signifie que tous les fichiers dans le dossier public (comme les fichiers CSS, JavaScript, images, etc.) seront accessibles directement par les clients. Par exemple, si vous avez un fichier style.css dans le dossier public, il sera accessible via l'URL http://domaine/style.css.
app.set('view engine', 'ejs');
La méthode app.set() est utilisée pour définir diverses propriétés et configurations pour votre application Express.
La partie 'view engine', 'ejs', signifie que l'on a configuré le moteur de «templating» («view engine») à EJS («Embedded JavaScript»). Un moteur de «templating» vous permet d'intégrer de façon imbriquer du JavaScript avec du HTML pour créer des pages web dite dynamiques. En utilisant EJS, vous pouvez créer des structures ou squelettes de pages («templates») qui peuvent être compartimentées et programmables. Les programmes imbriqués permettent généralement d'intégrer des données variables sur une page web ou de charger certains bouts de pages ejs.
app.use((req, res, next) => {
return next()
});
Ceci est un middleware générique qui sera exécuté pour toutes les requêtes entrantes. Dans sa forme actuelle, il ne fait rien d'autre que de passer la requête au prochain middleware ou routeur dans la pile grâce à la fonction next().
Ce type de middleware est souvent utilisé pour ajouter des configurations, des données ou des méthodes globales à toutes les requêtes, bien qu'ici, il semble être un «placeholder».
app.get('/', (req, res, next) => {
// Lancer une erreur pour tester le middleware de gestion des erreurs.
// let error = new Error("new error")
// return next(error)
return res.render('index')
})
Cette route gère les requêtes GET à la racine de votre application (par exemple, http://domaine/). Lorsque cette URL est visitée, elle renvoie une page web ejs appelée 'index' trouvé dans:
/views/index.ejs
Le code commenté à l'intérieur est un exemple de la manière dont vous pourriez déclencher une erreur pour tester un middleware de gestion d'erreur.
// Essayez d'accéder à cette URL localhost:3005/no_existant et cela déclenchera ce middleware
app.use((req, res, next) => {
if (req.method === "GET") {
return res.status(200).render('url_not_present')
}
return next();
});
Ceci est un autre middleware, mais il est particulier, car il ne spécifie pas un de route. Cela signifie qu'une requête de méthode HTTP GET sera traitée si celle-ci n'a pas encore été gérée par les middlewares ou les routeurs précédents.
Ce middleware est un middleware de type attrape-tout qui est exécuté en fin de cycle de vie de la requête sur le serveur, à défaut d'avoir été traitée.
Le middleware envoie une réponse avec le code de statut 200 (OK) et rend une page ejs appelée «url_not_present». Cette page est utilisée comme une page défaut personnalisée pour les requêtes GET qui n'ont pas de routes de traitement configurées sur notre serveur.
Si la requête n'est pas une requête de méthode HTTP GET (par exemple, POST, PUT, DELETE, etc.), le middleware transmet simplement la requête au prochain middleware ou routeur dans la pile en appelant la méthode next().
Pour le traitement d'erreur, analysons ce code:
// Lancer une erreur pour tester le middleware de gestion des erreurs.
let error = new Error("new error")
return next(error)
Ce code est issu de la route '/' et permet la génération artificielle d'une erreur puis cette erreur est jeté («thrown») au prochain middleware disposant de la capacité d'attraper («catch») une erreur jetée précédemment à ce middleware.
// Erreur générée sur le serveur, renvoie 200 et répond avec un objet json décrivant l'erreur du serveur
app.use((error, req, res, next) => {
Ceci est un middleware de gestion d'erreurs dans Express.js. Vous pouvez le reconnaître par le fait qu'il prend quatre arguments, contrairement aux middlewares standard qui en prennent généralement trois (req, res, next). Le premier argument, error, contiendra l'erreur qui a été passée à la fonction next() dans un autre middleware ou route précédent. En l'occurrence, ce middleware va attraper l'erreur issue de:
return next(error)
Le middleware gestion d'erreurs va «console.log» l'erreur sous un formatage particulier et retourné au client un objet JSON sous un «status» HTTP de 200 avec trois propriétés («properties»):
- «name»: Nom de l'erreur.
- «real_status»: Le status réel qui devrait être retourné. 500, car c'est une erreur après tous.
- «message»: Le message de l'erreur.
// Erreur déclenchée sur le serveur, renvoyez 200 et répondez avec un objet json décrivant l'erreur du serveur
app.use((error, req, res, next) =>
// console.error(err.stack)
console.error('\n\n')
console.error('\x1b[31;5m')
console.error('Last middleware to process an error if any:')
console.error('\x1b[0m')
console.error('\x1b[37;41;1m')
console.error(error)
console.error('\x1b[0m')
return res.status(200).json({
name: error.constructor.name,
real_status: 500,
message: error.message
})
})
Enfin:
const server = app.listen(PORT, () => {
console.log('\n')
console.log(`Congrats, your Node.JS Express.JS application is running on localhost:${PORT}.\napp.listen() callback function`)
console.log('\n')
})
Cette ligne de code démarre le serveur Express sur le port spécifié par la constante PORT. La méthode app.listen() lance le serveur HTTP configuré qui écoute pour des requêtes entrantes sur ce port.
Le «callback» de la méthode «listen» et le lancement du mode écoute («listen») du serveur configuré est lancé grâce à la commande «npm run start» sur un processus terminal a la racine du projet.
L'objet retourné et assigné à «server» est une instance du serveur HTTP de Node.js, qui peut être utilisée pour des opérations ultérieures, comme fermer le serveur.
La fonction «callback» permet de «console.log» un message, notifiant le développer que le serveur à lancer.
Pour la suite du code, et de son explication, je vous invite à lire cet article en anglais intitulé: «How To Quit Node».
Pour des services de développement web, et plus particulièrement Node JS et Express JS vous invite de nous (Earnanswers) notifié de votre intérêt en soumettant votre email dans l'entrée ci-bas.
On vous contactera dans le but de recueillir vos objectifs, et tout ce qui est nécessaires à l'accomplissement de votre projet. Merci.