Partager via

Tutoriel : Node.js pour débutants

  • Article

Si vous n'avez jamais utilisé Node.js, ce guide vous aidera à vous familiariser avec quelques notions de base.

Prerequisites

Essayer NodeJS avec Visual Studio Code

Si vous n’avez pas encore installé Visual Studio Code, revenez à la section des prérequis ci-dessus et suivez les étapes d’installation liées à Windows ou WSL.

  1. Ouvrez l’interface de ligne de commande de votre choix et créez un répertoire : mkdir HelloNode. Ensuite, accédez au répertoire : cd HelloNode

  2. Créez un fichier JavaScript nommé « app.js » comportant une variable « msg » : echo var msg > app.js

  3. Ouvrez le répertoire et votre fichier app.js dans VS Code en utilisant la commande: code .

  4. Ajoutez une variable de chaîne simple (« Hello World »), puis envoyez le contenu de la chaîne à votre console en l'entrant dans votre fichier « app.js » :

    var msg = 'Hello World';
console.log(msg);

  5. Pour exécuter votre fichier « app.js » avec Node.js : ouvrez votre terminal dans VS Code en sélectionnant Afficher>Terminal (ou sélectionnez Ctrl + `, en utilisant le caractère d'impulsion). Si vous devez changer le terminal par défaut, sélectionnez le menu déroulant et choisissez Sélectionner l'interpréteur de commandes par défaut.

  6. Dans le terminal, entrez : node app.js. Vous devriez voir la sortie : « Hello World ».

Note

Notez que lorsque vous entrez console dans votre fichier « app.js », VS Code affiche les options prises en charge pour l'objet console afin de vous permettre d'effectuer votre choix à l'aide d'IntelliSense. Essayez IntelliSense à l'aide d'autres objets JavaScript.

Créer votre première application web NodeJS avec Express

Express est un framework Node.js minimal, flexible et rationalisé qui facilite le développement d'une application web capable de traiter plusieurs types de demandes, comme GET, PUT, POST et DELETE. Express est fourni avec un générateur d'application qui crée automatiquement une architecture de fichiers pour votre application.

Pour créer un projet avec Express.js :

  1. Ouvrez l'interface de ligne de commande de votre choix (invite de commandes, PowerShell ou autre).

  2. Créez un dossier pour le nouveau projet : mkdir ExpressProjects. Puis accédez à ce répertoire : cd ExpressProjects

  3. Utilisez Express pour créer un modèle de projet HelloWorld : npx express-generator HelloWorld --view=pug

    Note

    Nous utilisons ici la commande npx pour exécuter le package Node Express.js sans l'installer réellement (ou en l'installant temporairement selon le point de vue). Si vous essayez d'utiliser la commande express ou de vérifier la version d'Express installée à l'aide de express --version, vous recevrez une réponse indiquant qu'Express est introuvable. Si vous souhaitez procéder à une installation globale d'Express afin de pouvoir l'utiliser à volonté, utilisez : npm install -g express-generator. Pour consulter la liste des packages qui ont été installés par npm, utilisez : npm list. Ceux-ci seront répertoriés par profondeur (nombre de répertoires imbriqués). Les packages que vous avez installés seront à la profondeur 0. Les dépendances de ces packages seront à la profondeur 1, d'autres à la profondeur 2, et ainsi de suite. Pour plus d’informations, consultez Différence entre npx et npm sur StackOverflow.

  4. Examinez les fichiers et dossiers inclus dans le projet Express en ouvrant celui-ci dans VS Code : code .

    Les fichiers générés par Express créent une application web dont l'architecture qui peut sembler impressionnante au premier abord. La fenêtre Explorer de VS Code (accessible via Ctrl + Maj + E) montre que les fichiers et dossiers suivants ont été générés :

    • bin. Contient le fichier exécutable qui démarre votre application. Il démarre un serveur (sur le port 3000 si aucune alternative n'est fournie) et configure la gestion des erreurs de base.
    • public. Contient tous les fichiers accessibles au public, y compris les fichiers JavaScript, les feuilles de style CSS, les fichiers de polices, les images et toute autre ressource dont les utilisateurs ont besoin lorsqu'ils se connectent à votre site web.
    • routes. Contient tous les gestionnaires de routage de l'application. Deux fichiers, index.js et users.js, sont automatiquement générés dans ce dossier pour servir d'exemples de séparation de la configuration de routage de votre application.
    • views. Contient les fichiers utilisés par votre moteur de modèle. Express est configuré pour rechercher une vue correspondante lorsque la méthode Render est appelée. Le moteur de modèle par défaut est Jade, mais Jade a été déconseillé en faveur de Pug. Nous avons donc utilisé l'indicateur --view pour modifier le moteur view (modèle). Pour afficher les options d'indicateur --view, entre autres, utilisez express --help.
    • app.js. Point de départ de votre application. Il charge tout et commence à servir les demandes des utilisateurs. Il s'agit en quelque sorte de la colle qui permet de maintenir les différentes pièces ensemble.
    • package.json. Contient la description du projet, le gestionnaire de scripts et le manifeste de l'application. Son rôle consiste principalement à de suivre les dépendances de votre application et leurs versions respectives.

  5. Vous devez maintenant installer les dépendances qu'Express utilise pour créer et exécuter votre application Express HelloWorld (packages utilisés pour des tâches telles que l'exécution du serveur, comme défini dans le fichier package.json). Dans VS Code, ouvrez votre terminal en sélectionnant Afficher>Terminal (ou sélectionnez Ctrl + `, en utilisant le caractère d'impulsion), et assurez-vous que vous êtes toujours dans le répertoire du projet « HelloWorld ». Installez les dépendances du package Express :

    npm install

  6. À ce stade, le framework est configuré pour une application web de plusieurs pages qui a accès à une grande variété d'API, d'intergiciels et de méthodes utilitaires HTTP, ce qui facilite la création d'une API robuste. Démarrez l'application Express sur un serveur virtuel en entrant :

    npx cross-env DEBUG=HelloWorld:* npm start

    Astuce

    Dans la partie DEBUG=myapp:* de la commande ci-dessus, vous indiquez à Node.js que vous souhaitez activer la journalisation à des fins de débogage. N'oubliez pas de remplacer « MyApp » par le nom de votre application. Vous trouverez le nom de votre application dans le fichier package.json, sous la propriété « Name ». npx cross-env permet de définir la variable d'environnement DEBUG sur n'importe quel terminal, mais vous pouvez également la définir en utilisant une méthode propre à votre terminal. La commande npm start indique à npm d'exécuter les scripts dans votre fichier package.json.

  7. Vous pouvez maintenant afficher l'application exécutée en ouvrant un navigateur web et en accédant à : localhost: 3000

    Capture d'écran de l'application Express exécutée dans un navigateur

  8. Maintenant que votre application Express HelloWorld s'exécute localement dans votre navigateur, essayez d'y apporter une modification en ouvrant le dossier « views » dans le répertoire de votre projet et en sélectionnant le fichier « index.pug ». Une fois le fichier ouvert, remplacez h1= title par h1= "Hello World!" et sélectionnez Enregistrer (Ctrl + S). Affichez votre modification en actualisant l'URL localhost: 3000 sur votre navigateur web.

  9. Pour arrêter l’exécution de votre application Express, sur votre terminal, entrez : Ctrl+C

Essayer d’utiliser un module Node.js

Node.js dispose d'outils qui vous permettent de développer des applications web côté serveur, dont certaines sont intégrées et beaucoup d'autres sont disponibles via npm. Ces modules peuvent vous aider à accomplir de nombreuses tâches :

Outil Utilisé pour
gm, sharp Manipulation d'images (modification, redimensionnement, compression, etc.) directement dans votre code JavaScript
PDFKit Génération de fichiers PDF
validator.js Validation de chaîne
imagemin, UglifyJS2 Minimisation
spritesmith Génération de feuilles Sprite
winston Journalisation
commander.js Création d'applications en ligne de commande

Utilisons le module OS intégré pour obtenir des informations sur le système d'exploitation de votre ordinateur :

  1. Sur votre ligne de commande, ouvrez l'interface CLI de Node.js. Vous verrez l'invite > indiquant que vous utilisez Node.js après avoir entré : node

  2. Pour identifier le système d'exploitation que vous utilisez actuellement (qui doit renvoyer une réponse indiquant que vous êtes sous Windows), entrez : os.platform()

  3. Pour vérifier l'architecture de votre processeur, entrez : os.arch()

  4. Pour voir les processeurs disponibles sur votre système, entrez : os.cpus()

  5. Quittez l'interface CLI de Node.js en entrant .exit ou en sélectionnant deux fois Ctrl + C.

    Astuce

    Vous pouvez utiliser le module de système d’exploitation Node.js pour vérifier la plateforme et retourner une variable spécifique à la plateforme : Win32/.bat pour le développement Windows, darwin/.sh pour Mac/unix, Linux, SunOS, etc. (par exemple, var isWin = process.platform === "win32";).