Qu'est-ce qu'Express.js et pourquoi devriez-vous l'utiliser ?

Express.js (ou "Express") est un framework Web NodeJS utilisé sur le back-end (ou côté serveur) des sites Web et des applications Web. Express est flexible et minimaliste, ce qui signifie qu'il ne possède pas une vaste collection de bibliothèques et de packages inutiles, ni ne dicte comment vous devez créer votre application.

Le framework Express crée des API qui facilitent la communication via des requêtes et des réponses HTTP. L'une des choses remarquables à propos d'Express est qu'il donne aux développeurs un contrôle total sur les demandes et les réponses associées à chacune des méthodes de son application.

Dans ce didacticiel, vous apprendrez comment et pourquoi vous devez utiliser Express dans vos propres projets.

Installation d'Express dans votre projet

Avant de pouvoir utiliser le framework Express, vous devez l'installer dans votre répertoire de projet. Il s'agit d'un processus simple qui nécessite NodeJS et npm.

La première chose à faire est de créer un package.json fichier (dans le répertoire/dossier de votre projet) à l'aide de la commande suivante :

npm init

L'exécution de la commande ci-dessus lancera un processus qui vous demandera les entrées suivantes :

• Nom du paquet
• Version
• La description
• Point d'accès
• Commande de test
• Mots clés
• Auteur
• Licence

Le nom du package, la version, le point d'entrée et les champs de licence ont tous des valeurs par défaut que vous pouvez facilement remplacer en fournissant vos valeurs. Cependant, si vous souhaitez conserver les valeurs par défaut, vous pouvez simplement utiliser la commande suivante à la place :

npm init -y

L'exécution de la commande ci-dessus générera ce qui suit package.json fichier dans votre répertoire de projet :

{
"nom": "monapplication",
"version": "1.0.0",
"la description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Erreur: aucun test spécifié\" && exit 1"
},
"mots clés": [],
"auteur": "",
"licence": "ISC",
}

Vous pouvez maintenant installer Express à l'aide de la commande suivante :

npm install express --save

L'installation d'Express générera un package-lock.json dossier ainsi qu'un node_modules dossier.

Comprendre le fichier package.json

La raison pour laquelle vous devez créer un package.json fichier avant d'installer Express est que le package.json fichier agit comme un référentiel, stockant des métadonnées importantes sur votre Projets NodeJS.Dépendances est le nom de l'un de ces champs de métadonnées, et Express est un dépendance.

L'installation d'Express dans votre répertoire de projet mettra automatiquement à jour votre package.json déposer.

Le fichier package.json mis à jour

{
"nom": "monapplication",
"version": "1.0.0",
"la description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Erreur: aucun test spécifié\" && exit 1"
},
"mots clés": [],
"auteur": "",
"licence": "ISC",
"dépendances": {
"express": "^4.17.1"
}
}

Vous avez maintenant un champ « dépendances » qui a une dépendance - Express. Et le dépendances les magasins d'objets logiciels dont dépend votre projet pour fonctionner correctement, qui dans ce cas est le framework Express.

Créer un serveur avec Express

Avoir une API qui gère le stockage et le mouvement des données est une exigence pour toute application full-stack, et Express rend le processus de création de serveur rapide et facile.

Revenez sur le package.json ci-dessus et vous verrez un champ "principal". Ce champ stocke le point d'entrée de votre application, qui est « index.js » dans l'exemple ci-dessus. Lorsque vous souhaitez exécuter votre application (ou dans ce cas, le serveur que vous êtes sur le point de construire), vous devrez exécuter le index.js fichier à l'aide de la commande suivante :

index de nœud.js

Cependant, avant de passer à l'étape d'exécution, vous devrez créer le index.js (ou l'application serveur) dans votre répertoire de projet.

Création du fichier index.js

const express = require('express');
const app = express();
port const = 5000 ;
app.get('/', (req, res) => {
res.send('Votre serveur est opérationnel')
})
app.listen (port, () => {
console.log(`Le serveur s'exécute sur: http://localhost:${port}`);
})

Le fichier ci-dessus importe Express puis l'utilise pour créer une application Express. L'application Express donne alors accès au avoir et Ecoutez méthodes qui font partie du module Express. le app.écouter() méthode est la première que vous devez configurer. Son but est de répertorier les connexions sur un port spécifique de l'ordinateur hôte, qui est port 5000 dans l'exemple ci-dessus.

Le but de la app.get() méthode consiste à obtenir des données à partir d'une ressource spécifique. Cette méthode a deux arguments: un chemin et une fonction de rappel. L'argument path dans l'exemple ci-dessus a une barre oblique qui représente la position racine. Par conséquent, la navigation vers le http://localhost: 5000 L'URL (qui est la racine de votre application), pendant que votre application index.js ci-dessus est en cours d'exécution, produira la sortie suivante dans votre navigateur :

le app.get() La fonction de rappel de méthode génère la sortie ci-dessus. Cette fonction de rappel a deux arguments: requête et réponse. La réponse (qui est res dans l'exemple ci-dessus) est l'objet HTTP qu'une application Express envoie après une requête HTTP (ce que vous faites en tapant l'URL ci-dessus dans votre navigateur).

Servir un site Web statique avec votre serveur Express

Les serveurs jouent un rôle important dans le développement d'API qui aident à stocker et à transférer des données dynamiques, et c'est là que vous utiliserez probablement un serveur Express dans vos propres projets.

Cependant, un serveur Express peut également servir des fichiers statiques. Par exemple, si vous souhaitez créer un site Web statique (comme un site Web pour un entraîneur personnel, un coach de vie ou un styliste), vous pouvez utiliser votre serveur Express pour héberger le site Web.

Un exemple de site Web HTML statique

 domicile 







Bienvenue

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sequi distinctio !

Voir les services

Le code HTML ci-dessus crée une page d'accueil statique agréable d'un site Web de styliste personnel en créant un lien vers le fichier style.css suivant :

*{
marge: 0 ;
remplissage: 0 ;
dimensionnement de la boîte: boîte de bordure ;
}
corps {
font-family: 'Lato', sans-serif ;
hauteur de ligne: 1,5 ;
}
une {
couleur: #333 ;
texte-décoration: aucun ;
}
ul {
style de liste: aucun ;
}
p {
marge: .5rem 0 ;
}
h1{
marge gauche: 2rem ;
}
/* Utilitaire */
.récipient {
largeur maximale: 1100px ;
marge: automatique ;
rembourrage: 0 2rem ;
débordement caché;
}
.btn {
affichage: bloc en ligne ;
bordure: aucune ;
arrière-plan: #910505 ;
couleur: #fff ;
rembourrage: 0.5rem 1rem ;
rayon de bordure: 0,5 rem ;
}
.btn: survolez {
opacité: 0,9 ;
}
/* Barre de navigation */
#barre de navigation {
arrière-plan: #fff ;
position: collante ;
haut: 0 ;
indice z: 2 ;
}
#navbar .conteneur {
affichage: grille ;
grille-modèle-colonnes: 6fr 3fr 2fr ;
rembourrage: 1rem ;
align-items: center;
}
#barre de navigation h1 {
couleur: #b30707 ;
}
#navbar ul {
justifier-soi: fin;
affichage: flexible ;
marge droite: 3,5 rem ;
}
#navbar ul li a {
rembourrage: 0,5 rem ;
font-weight: gras ;
}
#navbar ul li a.current {
arrière-plan: #b30707 ;
couleur: #fff ;
}
#navbar ul li a: survolez {
arrière-plan: #f3f3f3 ;
couleur: #333 ;
}
#barre de navigation .social {
justifier-soi: centre ;
}
#navbar .social i {
couleur: #777 ;
marge droite: .5rem ;
}
/* domicile */
#domicile {
couleur: #fff ;
arrière-plan: #333 ;
rembourrage: 2rem ;
position: relative ;
}
#home: avant {
contenu: '';
arrière-plan: URL ( https://source.unsplash.com/random) centre/couverture sans répétition ;
position: absolue ;
haut: 0 ;
à gauche: 0 ;
largeur: 100 % ;
hauteur: 100 % ;
opacité: 0,4 ;
}
#home .vitrine-conteneur {
affichage: grille ;
grid-template-columns: répéter (2, 1fr) ;
justifier-contenu: centre ;
align-items: center;
hauteur: 100vh ;
}
#home .showcase-content {
indice z: 1 ;
}
#home .showcase-content p {
marge-bas: 1rem ;
}

Servir le site Web avec le serveur Express

const express = require('express');
const app = express();
port const = 5000 ;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Le serveur s'exécute sur: http://localhost:${port}`);
})

Les fichiers HTML et CSS ci-dessus se trouvent dans un dossier public dans le répertoire principal du projet. L'emplacement du fichier HTML le rend accessible au serveur Express et à ses fonctions.

L'une des nouvelles fonctions du serveur Express ci-dessus est la app.use() méthode. Il monte le express.static() middleware, qui sert des fichiers statiques. Cela permet d'utiliser le res.sendFile() fonction pour servir la statique index.html fichier ci-dessus.

Navigation vers le http://localhost: 5000 emplacement dans votre navigateur affichera quelque chose de similaire à la sortie suivante :

Explorer le développement backend

Le framework Express vous permet de faire des requêtes HTTP spécifiques et de recevoir des réponses appropriées à l'aide d'un ensemble de méthodes prédéfinies. C'est aussi l'un des frameworks backend les plus populaires aujourd'hui.

Apprendre à utiliser le framework Express est une excellente initiative. Mais si vous voulez vraiment devenir un développeur backend professionnel, vous devez apprendre beaucoup plus.

Apprenez à devenir un développeur backend en 2021

Si vous avez à cœur de faire carrière dans l'informatique, vous pouvez faire pire que d'acquérir les compétences dont vous avez besoin pour devenir développeur back-end.

Lire la suite

A propos de l'auteur