YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

Tutoriel Express : créez votre premier serveur HTTP avec NodeJS !

Thibeault

Développeur
Développeur
Inscription
27 Août 2016
Messages
852
Réactions
737
Points
2 824
    Réponse de Thibeault Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #1
Vous devez être inscrit pour voir les fichiers joints

Bonjour à tous , nous allons aujourd'hui apprendre à créer notre premier serveur HTTP à l'aide de NodeJS couplé à Express.
SOMMAIRE :

Qu'est-ce qu'un serveur HTTP ?
Qu'est-ce que NodeJS ?
Qu'est-ce que Express ?
Réalisation du serveur
Réalisation d'une page de contact

Pour les plus novices, je vous ai sans doute déjà perdu mais rassurez-vous je vais faire en sorte que vous compreniez l'ensemble des notions énoncées dans ce tutoriel mais il faudra bien évidemment avoir
des bases solides en JavaScript.

Vous devez être inscrit pour voir les fichiers joints

Dans un premier temps, revenons au fonctionnement du world wide web plus particulièrement en1990 lorsque l'HTTP fût créé. :rêve:
Vous devez être inscrit pour voir les fichiers joints

(crédits: infowebmaster.fr)

Un serveur HTTP est tout simplement un serveur qui va pouvoir
communiquer avec un internaute (client) par le biais du protocole HTTP, grossièrement le client envoie une requête au serveur quant au serveur il envoie une réponse en retour.

Ainsi lorsque vous accédez à https://realitygaming.fr vous envoyez une requête au serveur HTTPS, qui est une variante de l'HTTP mais celle-ci crypte la communication entre vous et le serveur, et en retour vous recevez l'accueil du forum
Vous devez être inscrit pour voir les fichiers joints

(en réalité vous en faites beaucoup plus qu'une comme vous pouvez le voir ci-dessous)

Vous devez être inscrit pour voir les fichiers joints

Le principe d'un serveur HTTP est normalement acquis passons à NodeJS, vous avez sûrement entendu ceci ou alors c'est la première fois mais cela reste encore flou, d'une manière aussi grossière que la précédente définition NodeJS est une plateforme logicielle libre qui vous permet d'exécuter du JavaScript du côté serveur .

Vous devez être inscrit pour voir les images


(le fonctionnement asynchrone de NodeJS qui lui vaut une rapidité accrue face à PHP, crédits: emaze.com)

En effet le javascript jusqu'à là (avant 2010) était utilisé uniquement
du côté client & interprété par vos navigateurs pour ajouter du dynamisme à nos pages comme vous pouvez le savoir grâce aux scripts disponibles sur RealityGaming qui vous permette d'ajouter des fonctionnalités ou des modifications au forum.
INSTALLATION (sous Windows)
  1. Rendez-vous sur le site de .
  2. Téléchargez le fichier.
  3. Procédez à l'installation.
  4. Une fois terminée ouvrez votre CMD .
  5. Entrez la commande : node. Si vous obtenez une console (symoblisé par ce symbole : >) , vous avez réussi.
COMMANDES
  • node : cette commande vous permet d'utiliser Node via la console (CLI), elle permet d'exécuter des morceaux de code afin de vérifier la syntaxe de celle-ci par exemple, vous pouvez y taper console.log('La console fonctionne bien !').
Vous devez être inscrit pour voir les fichiers joints

Vous devez être inscrit pour voir les fichiers joints

Dernière définition à aborder avant de rentrer dans le vif du sujet, parlons peu parlons
Express ( :trollface: ). Très simplement, Express vous permet de créer des architectures web minimalistes très facilement avec NodeJS.

Express est lui même un projet créé par l'organisation NodeJS, ainsi avec ce framework il devient bien plus facile de créer des sites web car celui-ci incorpore un tas de fonctionnalités basiques mais très importantes pour démarrer la création d'un site web .
INSTALLATION
  1. Créez un dossier "website" où vous le souhaitez.
  2. Ouvrez votre CMD et entrez la commande : cd chemin-vers-votre-dossier-website.
  3. Entrez la commande : npm init --yes.
  4. Puis celle-ci : npm install express --save .
COMMANDES
  • cd : cette commande vous permet de vous rendre dans un dossier si elle est suivie de l'emplacement de celui-ci.
  • npm : NPM est le gestionnaire de dépendances de NodeJS, c'est par ce biais que vous pouvez installer tout un tas de packages.
  • npm init --yes : avant de pouvoir utiliser NPM il faut déclarer notre projet, dans notre cas ce n'est pas pertinent donc nous autorisons NPM à remplir les champs demandés (pour les voir il suffit de retirer l'option --yes) pour nous.
  • npm install express --save : par le biais de NPM nous installons le framework Express en précisant que nous voulons l'installer dans le dossier de notre site en utilisant l'option --save, chaque dépendance est installée dans un dossier node_modules.
Ainsi après avoir entrez nos commandes vous devriez obtenir un fichier package.json qui contiendra les informations relatives à notre projet NodeJS (notre serveur HTTP) comme ses dépendances, son nom, sa description etc.

Vous devez être inscrit pour voir les fichiers joints


Vous devez être inscrit pour voir les fichiers joints

Entrons dans le vif du sujet : la création de notre serveur HTTP.

Dans un premier temps nous allons créer un fichier app.js.
Modifiez votre fichier package.json pour modifier le nom de notre fichier principal.

Vous devez être inscrit pour voir les images

Ouvrez de nouveau votre fichier app.js pour faire appel à notre dépendance Express, chaque dépendance (nommée aussi module) est appelée par la méthode require.
Code:
var express = require('express');
var app = express();
Nous allons créer notre serveur HTTP afin qu'il affiche "Hello World !" lorsque nous nous rendrons sur celui-ci, c'est à dire qu'à chaque requête ayant la méthode GET sur notre serveur HTTP devra recevoir une réponse contenant le texte "Hello World !".
Code:
/*
 Nous utilisons la méthode get qui permet d'utiliser une fonction qui s'exécutera lorsque
 nous voudrons nous rendre sur le chemin /. Cette fonction prend 2 paramètres : req & res.
 Ces deux paramètres sont des objets contenant pour le premier la requête, et le deuxième
 la réponse à envoyer.
*/
app.get('/', (req, res) => {
  /*enfin nous utilisons une méthode disponible via l'objet res pour retourner une réponse
  sous forme de plain/text.
  */
  res.send('Hello World !');
});
Enfin, nous devons démarrer notre serveur HTTP en lui demandant d'être disponible, d'écouter sur un port spécifique.
Code:
app.listen(8989, function(){
  //se code s'exécutera à chaque fois que le serveur HTTP se lancera.
  console.log("Le serveur HTTP a bien démarré sur le port 8989");
});

Pour exécuter notre script et donc notre serveur, il faut exécuter la commande node app.js, pour l'arrêter faites CTRL + C.

Vous devez être inscrit pour voir les images

En cas d'erreur, changez le port il se peut qu'il soit déjà utilisé.

Rendez-vous ensuite sur l'URL suivante : pour observer le résultat. :cool:

Vous devez être inscrit pour voir les fichiers joints


Vous devez être inscrit pour voir les fichiers joints

Nous avons vu un exemple basique, essayons maintenant de réaliser quelque chose de basique : une page de contact permettant d'envoyer un mail lors de sa soumission.
Dans un premier temps nous allons rendre notre page un peu plus jolie avec Twitter Bootstrap, pour se faire crééons un dossier "static" qui va contenir notre CSS, notre JS etc.

Vous devez être inscrit pour voir les fichiers joints

Express ne sait pas que ce dossier doit servir des fichiers statiques il va donc ne rien servir puisque aucune méthode GET pour ses fichiers & dossiers n'a été écrite, nous devons donc déclarer notre dossier .
Code:
/*
  on déclare notre dossier "static" qui va indiquer à Express qu'il faut
  servir les fichiers contenus dans ce dossier comme des fichiers statiques.
*/
app.use(express.static('static'));
Vous pouvez accéder votre dossier static après avoir sauvegardé mais vous constaterez que vous obtiendrez une erreur du type : CANNOT GET /static, c'est tout à fait normal et ceci pour deux raisons :
  1. Vous n'avez pas relancé votre serveur HTTP, et oui, à chaque modification vous devez relancer votre serveur. Mais heureusement pour vous un package nommé nodemon a été crée il détecte lorsque vous avez modifié vos fichiers et relance le serveur en une fraction de secondes. Pour l'installer utilisez la commande npm install nodemon -g , l'option -g permet d'installer ce module globalement sur votre ordinateur ainsi plus besoin de l'installer à chaque projet, cette commande requière les droits administrateur. Pour utiliser ce module il vous suffit de lancer le serveur via la commande nodemon app.js au lieu de node app.js. ;)
  2. Express va servir vos fichiers à partir de ce dossier, ainsi vous devez accéder à vos fichiers / dossiers directement via l'architecture présente dans le dossier static, c'est à dire qu'au lieu de vouloir accéder à static/css vous pouvez directement y accéder via css.
Vous devez être inscrit pour voir les images

Vous devez être inscrit pour voir les fichiers joints
Crééons ensuite deux fichiers : index.html & contact.html.

INDEX.HTML
HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Bienvenue sur l'accueil !</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
  <body>
    <h1>Bienvenue sur l'accueil !</h1>
    <p>Je t'invite à <a href="contact">me contacter</a>. </p>
  </body>
</html>
CONTACT.HTML
HTML:
<!DOCTYPE html>

<html>
  <head>
    <title>Nous contacter</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
  <body>
    <h1>Bienvenue sur la page de contact</h1>
    <form action method="POST">
      <div class="form-group">
        <label for="message">Votre message</label>
        <textarea class="form-control" name="message" id="message" rows="3"></textarea>
        <button type="submit" class="btn btn-primary">Envoyer</button>
      </div>
    </form>
  </body>
</html>
Nous devons ensuite les déclarer (ce qu'on appelle du routing) grâce à
notre méthode get contenue dans l'objet de réponse ainsi qu'à une méthode sendFile qui va permettre "d'envoyer" nos fichiers HTML en tant que réponse.
Code:
app.get('/', (req, res) => {
  res.sendFile(__dirname + "/" + 'index.html');
});

app.get('/contact', (req, res) => {
  res.sendFile(__dirname + "/" + 'contact.html');
});

Vous devez être inscrit pour voir les fichiers joints

Vous devez être inscrit pour voir les fichiers joints

Nous allons utiliser nodemailer qui est un module très simple d'utilisation pour l'envoi d'emails , installez le très simplement toujours avec la même commande : npm install nodemailer --save, le module est à appelé comme les autres.
Code:
var nodemailer = require('nodemailer');
Pour envoyer un email après la soumission du formulaire il faut utiliser
la méthode POST pour le chemin /contact.
Code:
app.post('/contact', (req, res) => {
    //le code s'exécutera après une requête avec la méthode POST
});
Il faut également que nous installions le module
body-parser qui nous permet d'extraire nos données envoyées en POST, vous connaissez la routine : npm install body-parser --save et on le déclare en début de fichier.
Code:
var bodyParser = require('body-parser');
Nous allons utiliser
notre propre compte mail, en l'occurence nous utiliserons Gmail, d'après l'exemple disponible sur le site il faut tout d'abord déclarer notre transporter qui sera le service utilisé et techniquement l'objet que nous allons utiliser pour envoyer le mail.
Code:
  var transporter = nodemailer.createTransport('smtps://[email protected]:[email protected]');
Ensuite il faut définir un tas d'options telle que
l'email de l'expéditeur, l'email du receveur, le message et l'objet.
Code:
  var mailOptions = {
      from: '"Bernard" <[email protected]>', // de qui
      to:  '"Bernard" <[email protected]>', // vers qui
      subject: 'Demande de contact effectué depuis le site', // l'objet
      text: req.body.message, //l'email brute qui n'est autre que notre message
      html: req.body.message  //l'email avec des balises HTML qui au final dans notre cas reviens à l'email brute
  };
Enfin nous envoyons notre email grâce à la fonction sendMail qui prend en paramètres nos options, mais également un callback c'est à dire une fonction qui va être appelée
lorsque la requête d'envoie de mail sera terminée.
Code:
transporter.sendMail(mailOptions, function(error, info){
      if(error){
          return console.log(error);
      }
      console.log('Email envoyé: ' + info.response);
      res.redirect('/');
  });
Essayez d'envoyer un email, soumettez le formulaire et
regarder la console ainsi que votre boite mail.

Vous devez être inscrit pour voir les fichiers joints

Nous en avons terminé pour ce tutoriel, bien sûr il manque pas mal de choses comme des vérifications de contenu, spam anti-robot etc. mais l'idée principale était de vous faire découvrir NodeJS & Express ! :smile:

Vous devez être inscrit pour voir les fichiers joints
 

AwH

Super Modérateur
Ancien staff
Inscription
28 Septembre 2011
Messages
5 088
Réactions
2 378
Points
7 378
    Réponse de AwH Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #2
Soon un tuto sur mongo et angular pour la stack mean ou pas ?
 

Thibeault

Développeur
Développeur
Inscription
27 Août 2016
Messages
852
Réactions
737
Points
2 824
    Réponse de Thibeault Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #3

WhiiTe'

Ancien staff
Ancien staff
Inscription
22 Octobre 2011
Messages
14 065
Réactions
7 707
Points
18 005
    Réponse de WhiiTe' Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #4
Huuum pas mal, je me sens ridicile avec mon Ajax now :trollface:
 

Perfect World

Rédacteur
Premium
Inscription
30 Avril 2016
Messages
295
Réactions
620
Points
2 223
    Réponse de Perfect World Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #5
Félicitation, belle rédaction ! :neo:
 

ER_Clément

Membre
Inscription
30 Octobre 2016
Messages
5
Réactions
4
Points
26
    Réponse de ER_Clément Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #6
Superbe rédaction, merci ! :ok:
 
D

deleted666795

Invité
    Réponse de deleted666795 Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #7
Hélas le développement web ne passe pas avec moi.. Mais excellent sujet !
 
Inscription
14 Décembre 2014
Messages
228
Réactions
13
Points
2 536
    Réponse de ♕JWST-Prod♕ Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #8
MAIS C BASIC SA
mais super tuto bien détaillé pour les novices
tu peux faire plus simplement avec dautre logiciel c pas une critique rien tkt c une remarque je pense que tu te complique trop la vie
 

TheoryWrong

Membre
Inscription
12 Juin 2016
Messages
68
Réactions
19
Points
1 366
    Réponse de TheoryWrong Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #9
Tuto Sympa :ok:
 

Julien Moreau

Lobby-Man
Premium
Inscription
5 Février 2013
Messages
1 735
Réactions
651
Points
6 950
    Réponse de Julien Moreau Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #10
Salut,super Tito ! Merci :)
 

Hichxm

Membre
Inscription
15 Octobre 2013
Messages
1 114
Réactions
239
Points
4 221
    Réponse de Hichxm Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #11
Très bon tutoriel et super bien expliquer :ok:
 

🔱Umbrella🔱

Membre Premium
Premium
Inscription
9 Novembre 2012
Messages
3 286
Réactions
1 042
Points
9 598
    Réponse de 🔱Umbrella🔱 Forums généraux Informatique ⌨️ Programmation Programmation web : Express : créez votre premier serveur HTTP avec NodeJS !
  • #12
jolie merci
 
Auteur Discussions similaires Forum Réponses Date
Thibeault Programmation web 25

Mobile app for XenForo 2 by Appify
Haut