Nodejs/Expressjs : 12 Actions Simples Pour Développer Une Application Web

il y a un mois

Aujourd'hui, je travaille débout. c'est pas facile !

Je viens de virer le confort pour booster la productivité du travail. Juste un petit verre d'eau !

Et si je t'expliquais comment développer une application web Nodejs basé sur le framework Express js en 12 Étapes simples. Le reste dépendra de ton imagination !

Ok, Je te comprends :

  • 🔹Peut être que c'est une blague de développeur web de vouloir tout simplifier;
  • 🔹Peut être que c'est possible;
  • 🔹Tu penses que ça ne serra pas une application web complète avec des fonctionnalités lourdes;

Dans tout le cas tu as raison, Lorsque tu regardes une application web déjà construite avec Nodejs sur le web comme :

Tu vois le résultat final, et tu te dis:

  • 🔹c'est énorme;
  • 🔹c'est trop gros;
  • 🔹ça demande du temps;
  • 🔹c'est réservé au génies du JavaScript;

Entre toi et moi, par où ils ont commencé pour en arriver là ?

Je vais te simplifier tout ça en 12 actions rapides.

1. Installation et préparation

Tu dois d'abord :

  • 👉 créer un répertoire;
  • 👉 y accéder dans via ton terminal;
  • 👉 Et installer Express js à l'aide de npm ou yarn.

Je vais utiliser yarn comme gestionnaire de dépendance, si tu ne sais pas ce que c'est, tu peux lire les bases de nodejs.

yarn init
yarn add express
  • 👉 Crée un fichier et tu le nomme app.js
  • 👉 Ajoute le code suivant pour créer un nouveau serveur Expressjs et lui ajoute une route (/toktok) avec la méthode app.get :
const express = require('express');
const app = express();

app.get('/toktok', (request, response) => {
	response.send('Karibu');
});

app.listen(7777, 'localhost');

Pour exécuter ton script, tu te sers de la commande suivante dans terminal à la source de ton projet :

node app.js

Ton application acceptera les connexions sur le port local 7777 (Tu tapes localhost:7777 dans ton navigateur).

Si l'argument du nom d'hôte de app.listen est omis, le serveur acceptera les connexions sur l'adresse IP de la machine ainsi que sur localhost.

Si la valeur du port est 0, le système d'exploitation attribuera un port disponible.

Une fois ton script en cours d'exécution, tu peux le tester dans un terminal pour confirmer que tu as la réponse attendue, "Karibu", du serveur:

curl http://localhost:7777/toktok

Karibu

Tu peux également ouvrir un navigateur Web, accéder à l'URL http: //localhost:7777/toktok pour afficher la sortie

2. Routage basique

Dans ton fichier app.js.

Ces lignes de code créer d'abord une application express:

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

Ensuite, tu as la possibilité de définir des routes comme celui-ci:

app.get('/someUri', function (req, res, next) {})

Cette structure fonctionne pour toutes les méthodes HTTP et attend un chemin comme premier argument et un gestionnaire pour ce chemin, qui reçoit les objets de demande et de réponse.

Donc, pour les méthodes HTTP de base, ce sont les routes

// GET www.domain.com/myPath
app.get('/myPath', function (req, res, next) {})
// POST www.domain.com/myPath
app.post('/myPath', function (req, res, next) {})
// PUT www.domain.com/myPath
app.put('/myPath', function (req, res, next) {})
// DELETE www.domain.com/myPath
app.delete('/myPath', function (req, res, next) {})

Tu vas rassurement rencontrer un cas ou tu souhaites définir le même comportement pour une qui prend en charge toutes les méthodes HTTP.

Voici la syntaxe:

app.all('/myPath', function (req, res, next) {})

ou

app.use('/myPath', function (req, res, next) {})

ou

app.use('*', function (req, res, next) {})

Le caractère générique(*) sera acheminé pour tous les chemins.

Tu peux également ajouter des fonctions à n'importe quelle méthode HTTP.

Ils s'exécuteront avant le dernier rappel et prendront les paramètres (req, res, next) comme arguments.

// GET www.domain.com/myPath
app.get('/myPath', myFunction, function (req, res, next) {})

Vos rappels finaux peuvent être stockés dans un fichier externe pour éviter de mettre trop de code dans un seul fichier:

// other.js
exports.doSomething = function(req, res, next) {/* faire des trucs */};

Et puis dans le fichier contenant vos itinéraires:

const other = require('./other.js');
app.get('/someUri', myFunction, other.doSomething);

Cela rendra ton code beaucoup plus propre.

3. Décomposer l'application en module

Si tu as une très grosse application à construire le mieux, c'est de decomposer en module.

Le genie logiciel te préconise de diviser pour mieux régner.

Pour faire des usines de routeurs à utilisation modulaire d'applications Web express:

Module :

// greet.js
const express = require('express');

module.exports = function(options = {}) { // Router factory
	const router = express.Router();
	router.get('/greet', (req, res, next) => {
		res.end(options.greeting);
	});
	return router;
};

Application:

// app.js
const express = require('express');
const greetMiddleware = require('./greet.js');

express()
.use('/api/v1/', greetMiddleware({ greeting:'Hello world' }))
.listen(8080);

Cela rendra ton application modulaire, personnalisable et ton code réutilisable.

Lors de l'accès à http://<nom d'hôte>:8080/api/v1/, la sortie sera Hello world.

Exemple plus compliqué

Exemple avec des services qui montrent les avantages d'une fabrique de middleware.

Module:

// greet.js
const express = require('express');

module.exports = function(options = {}) { // Router factory
	const router = express.Router();
	// Get controller
	const {service} = options;
	router.get('/greet', (req, res, next) => {
		res.end(
			service.createGreeting(req.query.name || 'Stranger')
		);
	});
	return router;
};

Application:

// app.js
const express = require('express');
const greetMiddleware = require('./greet.js');

class GreetingService {
	constructor(greeting = 'Hello') {
		this.greeting = greeting;
	}

	createGreeting(name) {
		return `${this.greeting}, ${name}!`;
	}
}

express()
.use('/api/v1/service1', greetMiddleware({
	service: new GreetingService('Hello'),
}))
.use('/api/v1/service2', greetMiddleware({
	service: new GreetingService('Hi'),
}))
.listen(8080);

Lors de l'accès à http://<nom d'hôte>:8080/api/v1/service1/saluer?Name=World, la sortie sera Hello, World.

Et en accédant à http://<nom d'hôte>:8080/api/v1/service2/saluer?name=World, la sortie sera Hi, World.

4. Integration d'un template

Utilisation d'un moteur de template ou modele

Le code suivant configurera Jade comme moteur de modèle. (Remarque: Jade a été renommé carlin en décembre 2015.)

const express = require('express'); // Importe le module express
const app = express(); // Crée une instance du module express
const PORT = 3000; // choisi le port que tu veux

app.set('view engine','jade'); // Définit le jade comme moteur de vue / moteur de modèle
app.set('views','src/views');// Définit le répertoire où toutes les vues (fichiers .jade) sont stockées.
// Crée une route racine
app.get('/',function(req, res){
	res.render('index'); // rend le fichier index.jade en html et retourne comme réponse. La fonction Therender prend éventuellement les données à transmettre à la vue.
});
// Démarre le serveur Express avec un rappel
app.listen(PORT, function(err) {
	if (!err) {
		console.log('Server is running at port', PORT);
	} else {
		console.log(JSON.stringify(err));
	}
});

De même, d'autres moteurs de modèles peuvent également être utilisés, tels que les guidons (hbs) ou les ejs.

N'oublie pas d'installer via npm ou yarn aussi.

Pour les guidons, nous utilisons le package hbs, pour Jade, nous avons un package jade et pour EJS, nous avons un paquet ejs.

Exemple de modèle EJS

Avec EJS (comme les autres modèles express), tu peux exécuter du code serveur et accéder à tes variables serveur à partir de votre code HTML.

Dans EJS, cela se fait en utilisant "<%" comme balise de début et "%>" comme balise de fin, les variables passées en tant que paramètres de rendu sont accessibles en utilisant <% = var_name%>

Par exemple, si tu as un tableau de fournitures dans ton code serveur, tu peux faire une boucle dessus en utilisant

<h1><%= title %></h1>
<ul>
	<% for(var i=0; i<supplies.length; i++) { %>
	<li>
		<a href='supplies/<%= supplies[i] %>'>
			<%= supplies[i] %>
		</a>
	</li>
	<% } %>
</ul>

Comme tu peux le voir dans l'exemple chaque fois que tu bascules entre le code côté serveur et HTML, Tu dois fermer la balise EJS actuelle et en ouvrir une nouvelle plus tard.

Ici nous voulions créer un li à l'intérieur de la commande for, nous devions donc fermer notre tag EJS à la fin du for et créer un nouveau tag juste pour les accolades

un autre exemple

si nous voulons mettre la version par défaut en entrée comme une variable côté serveur, nous utilisons <% =

par exemple:

Message:

<br>
<input type="text" value="<%= message %>" name="message" required>

Ici, la variable de message transmise de ton côté serveur sera la valeur par défaut de ton entrée.

il est important de savoir que si tu n'avais pas transmis de variable de message de ton côté serveur, EJS lèvera une exception.

Tu peux passer des paramètres en utilisant res.render ('index', {message: message}); (pour le fichier ejs appelé index.ejs).

Dans les balises EJS, Tu peux également utiliser if, while ou toute autre commande javascript que tu souhaites.

5. JSON API avec ExpressJS

var express = require('express');
var cors = require('cors'); // Utiliser le module cors pour activer le partage de ressources d'origine croisée
var app = express();
app.use(cors()); // pour toutes les routes
var port = process.env.PORT || 8080;
app.get('/', function(req, res) {
	var info = {
		'string_value': 'StackOverflow',
		'number_value': 8476
	}
	res.json(info);
	// or
	/* res.send(JSON.stringify({
	string_value: 'StackOverflow',
	number_value: 8476
	})) */
	//you can add a status code to the json response
	/* res.status(200).json(info) */
})
app.listen(port, function() {
	console.log('Node.js est sur le port : ' + port)
})

On http://localhost:8080/output

object { string_value: "StackOverflow", number_value: 8476 }

6. Serving static files

Lors de la création d'un serveur Web avec Express, il est souvent nécessaire de servir une combinaison de contenu dynamique et de fichiers statiques.

Par exemple, Tu peux avoir index.html et script.js qui sont des fichiers statiques conservés dans le système de fichiers.

Il est courant d'utiliser un dossier nommé «public» pour avoir des fichiers statiques.

Dans ce cas, la structure des dossiers peut ressembler à:

project root

├──server.js

├──package.json

└──public

├──index.html

└──script.js

Voici comment configurer Express pour servir des fichiers statiques:

const express = require('express');
const app = express();
app.use(express.static('public'));

Remarque: une fois le dossier configuré, index.html, script.js et tous les fichiers du dossier "public" seront disponibles dans le chemin racine (tu n'auras pas besoin de spécifier /public/ dans l'url).

En effet, express recherche les fichiers relatifs au dossier statique configuré.

Tu peux spécifier ou changer le préfixe du chemin virtuel comme indiqué ci-dessous:

app.use('/static', express.static('public'));

Ce code rendra les ressources disponibles sous le préfixe /static/.

Plusieurs dossiers avec express js

Il est possible de définir plusieurs dossiers en même temps :

app.use(express.static('public'));
app.use(express.static('images'));
app.use(express.static('files'));

Lorsque tu sers les ressources, Express js examinera le dossier dans l'ordre de définition.

Dans le cas de fichiers portant le même nom, celui du premier dossier correspondant sera servi.

Remarque: une fois le dossier configuré, index.html, script.js et tous les fichiers du dossier public seront disponibles dans le chemin racine.

7. Ajout d'un Middleware

Les fonctions middleware sont des fonctions qui ont accès à l’objet de demande (req), à l’objet de réponse (res) et à la fonction middleware suivante dans le cycle de demande-réponse de l’application.

Les fonctions middleware peuvent exécuter n'importe quel code, apporter des modifications aux objets res et req, terminer le cycle de réponse et appeler le middleware suivant.

Un exemple très courant de middleware est le module cors. Pour ajouter le support CORS, tu peux l'installer simplement simplement, et l'utiliser :

app.use(cors()); 

Avant tout routeur ou fonction de routage.

8. Obtenir des informations de la requête

Pour obtenir des informations de l'url demandant (note que req est l'objet request dans la fonction de gestionnaire des routes).

Considère cette définition d'itinéraire /paramètres/:id_utilisateur et cet exemple particulier /paramètres/32135?Field=name

// obtenir la route complète
req.originalUrl // => /settings/32135?field=name
//obtenir le user_id param
req.params.user_id // => 32135
// obtenir la valeur de requête du champ
req.query.field // => 'name'

//tu peux également obtenir des en-têtes de la demande, comme ceci
req.get('Content-Type')
// "text/plain"

Pour simplifier l'obtention d'autres informations, tu peux utiliser des middlewares.

Par exemple, pour obtenir les informations sur le corps de la demande.

Tu peux utiliser le middleware body-parser, qui transformera le corps brut de la demande en format utilisable.

var app = require('express')();
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // pour l'analyse de l'application / json
app.use(bodyParser.urlencoded({ extended: true })); // pour l'analyse de l'application/x-www-form-urlencoded

Supposons maintenant une demande comme celle-ci:

PUT /settings/32135 { "name": "Peter" }

Tu peux accéder au nom affiché comme celui-ci

req.body.name // "Peter"

De la même manière, tu peux accéder aux cookies à partir de la demande, tu avais également besoin d'un middleware comme cookie-parser.

req.cookies.name

9. Gestion des erreurs dans Express

Dans Express, tu peux définir un gestionnaire d'erreurs unifié pour gérer les erreurs survenues dans l'application.

Tu vas définir ensuite le gestionnaire à la fin de toutes les routes et le code logique.

Example:

var express = require('express');
var app = express();
//GET /names/john
app.get('/names/:name', function(req, res, next){
	if (req.params.name == 'john'){
		return res.send('Valid Name');
	} else{
		next(new Error('Not valid name')); //pass l'erreur au gestionnaire
	}
});
//gestionnaire d'erreurs
app.use(function(err, req, res, next){
	console.log(err.stack); // e.g., nom invalide
	return res.status(500).send('Internal Server Occurred');
});
app.listen(3000);

10. Comment exécuter du code avant toute demande et après toute résolution

app.use () et middleware peuvent être utilisés pour "avant" et une combinaison des événements de fermeture et de fin peut être utilisée pour "après".

app.use(function (req, res, next) {
	function afterResponse() {
		res.removeListener('finish', afterResponse);
		res.removeListener('close', afterResponse);
		// actions après réponse
	}
	res.on('finish', afterResponse);
	res.on('close', afterResponse);
	// action avant demande
	// appelant éventuellement `next ()`
	next();
});
app.use(app.router);

Un exemple de ceci est le middleware de l'enregistreur, qui s'ajoutera au journal après la réponse par défaut.

Assure-toi simplement que ce "middleware" est utilisé avant app.router car l'ordre est important.

Voici un exemple de configuration et de lecture des cookies à l'aide du module d'analyse de cookies:

var express = require('express');
var cookieParser = require('cookie-parser'); // module d'analyse des cookies
var app = express();
app.use(cookieParser());
app.get('/setcookie', function(req, res){
// / paramétrer les cookies
res.cookie('username', 'john doe', { maxAge: 900000, httpOnly: true });
	return res.send('Cookie has been set');
});
app.get('/getcookie', function(req, res) {
	var username = req.cookies['username'];
	if (username) {
		return res.send(username);
	}
	return res.send('No cookie found');
});
app.listen(3000);

12. Personnaliser un middleware dans Express

Dans Express, tu peux définir des middlewares qui peuvent être utilisés pour vérifier les demandes ou définir certains en-têtes dans réponse.

app.use(function(req, res, next){ }); //exemple de signature Le code suivant ajoute l'utilisateur à l'objet de demande et passe le contrôle à la route correspondante suivante.

Tu vas l'appliquer comme ceci :

var express = require('express');
var app = express();
// chaque demande le traversera
app.use(function(req, res, next){
	req.user = 'testuser';
	next(); // il passera le contrôle à la prochaine route correspondante
});
app.get('/', function(req, res){
	var user = req.user;
	console.log(user); // testuser
	return res.send(user);
});
app.listen(7777, 'localhost');

le resultat est visible par ici localhost:7777

Conclusion

Au finale, c'est ne pas si énorme que ça :

  • 👉 Installer et préparer son environnement de travail;
  • 👉 Coder son application web;
  • 👉 Ajouter des routes dans son application web;
  • 👉 Ajouter des petites fonctionnalité externes;
  • 👉 Capturer les erreurs.

Attention ! il y a encore beaucoup d'autres concepts que tu peux démolir petit à petit.

Parfois, c'est mieux d'avoir une référence pour mieux comprendre son code.

Si tu as besoin d'une référence dans le développement de ton application, tu peux lire la documentaion officielle d'express js.

Tu as aimé cet article ? Partage-le avec tes collègues ou ami(e)s :

Hey oh ! , Ne rate rien !

1527 développeurs ont reçus mes conseils privés révolutionnaires

Reçois le guide gratuit "les 5 Façons de gagner sa vie avec le code"




Ecris avec le par Esholam DIBWE