Partager via

Tutoriel : Node.js pour les débutants

Si vous débutez avec Node.js, ce guide vous aidera à bien démarrer avec quelques notions de base.

Conditions préalables

Essayer NodeJS avec Visual Studio Code

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

  1. Ouvrez votre ligne de commande et créez un répertoire : mkdir HelloNodepuis entrez le répertoire : cd HelloNode

  2. Ouvrez le répertoire dans VS Code à l’aide de la commande : code .

  3. Créer un fichier nommé «app.js»

  4. Ajoutez une chaîne simple « Hello World » à une variable nommée msg, puis envoyez le contenu de la chaîne à votre console en entrant ceci 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 directement à l’intérieur de VS Code en sélectionnant Afficher>Terminal (ou sélectionnez Ctrl+', en utilisant le caractère backtick). Si vous devez modifier le terminal par défaut, sélectionnez le menu déroulant et sélectionnez Sélectionner l’interpréteur de commandes par défaut.

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

Remarque

Notez que lorsque vous tapez console dans votre fichier «app.js», VS Code affiche les options prises en charge relatives à l’objet console que vous pouvez choisir grâce à IntelliSense. Essayez d’expérimenter avec IntelliSense à l’aide d’autres objets JavaScript.

Créer votre première application web NodeJS à l’aide d’Express

Express est un framework de Node.js minimal, flexible et rationalisé qui facilite le développement d’une application web capable de gérer plusieurs types de requêtes, tels que GET, PUT, POST et DELETE. Express est fourni avec un générateur d’applications qui crée automatiquement une architecture de fichier pour votre application.

Pour créer un projet avec Express.js:

  1. Ouvrez votre ligne de commande (invite de commandes, Powershell ou tout ce que vous préférez).

  2. Créez un dossier de projet : mkdir ExpressProjects puis entrez ce répertoire : cd ExpressProjects

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

    Remarque

    Nous utilisons la npx commande ici pour exécuter le package Express.js Node sans l’installer (ou en l’installant temporairement en fonction de la façon dont vous souhaitez y penser). Si vous essayez d’utiliser la express commande ou de vérifier la version d’Express installée à l’aide de : express --version, vous recevrez une réponse que Express est introuvable. Si vous souhaitez installer Globalement Express à utiliser à nouveau, utilisez : npm install -g express-generator. Vous pouvez afficher la liste des packages qui ont été installés par npm à l’aide npm listde . Ils seront répertoriés par profondeur (nombre de répertoires imbriqués profonds). Les packages que vous avez installés seront à la profondeur 0. Les dépendances de ce package seront à la profondeur 1, les dépendances supplémentaires à la profondeur 2, et ainsi de suite. Pour en savoir plus, consultez Différence entre npx et npm ? sur StackOverflow.

  4. Examinez les fichiers et dossiers inclus par Express en ouvrant le projet dans VS Code, avec : code .

    Les fichiers générés par Express créent une application web qui utilise une architecture qui peut apparaître un peu écrasante au début. Vous verrez dans votre fenêtre Explorateur vs Code (Ctrl+Maj+E pour afficher) 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éclenche 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 publiquement, notamment les fichiers JavaScript, les feuilles de style CSS, les fichiers de police, les images et toutes les autres ressources dont les utilisateurs ont besoin lorsqu’ils se connectent à votre site web.
    • routes. Contient tous les gestionnaires de routage pour l’application. Deux fichiers, index.js et users.js, sont générés automatiquement dans ce dossier pour servir d’exemple de la façon de séparer la configuration de routage de votre application.
    • views. Contient les fichiers utilisés par votre moteur de modèle. Express est configuré pour rechercher ici une vue correspondante lorsque la méthode de rendu 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 d’affichage (modèle). Vous pouvez voir les options d’indicateur --view, et d’autres, à l’aide de express --help.
    • app.js. Point de départ de votre application. Il charge tout et commence à traiter les demandes utilisateur. C’est essentiellement la colle qui maintient toutes les parties.
    • package.json. Contient la description du projet, le gestionnaire de scripts et le manifeste de l’application. Son objectif principal est de suivre les dépendances de votre application et leurs versions respectives.

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

    npm install

  6. À ce stade, vous disposez de l’infrastructure configurée pour une application web à plusieurs pages qui a accès à une grande variété d’API et de méthodes d’utilitaire HTTP et d’intergiciels, 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

    Conseil / Astuce

    La DEBUG=myapp:* partie de la commande ci-dessus signifie que 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 pouvez trouver le nom de votre application dans le package.json fichier sous la propriété « name ». L’utilisation de npx cross-env définit la DEBUG variable d’environnement dans n’importe quel terminal, mais vous pouvez également la définir de manière spécifique à votre terminal. La npm start commande indique à npm d’exécuter les scripts dans votre package.json fichier.

  7. Vous pouvez maintenant afficher l’application en cours d’exécution en ouvrant un navigateur web et en accédant à : localhost :3000

    Capture d’écran de l’application Express s’exécutant dans un navigateur

  8. Maintenant que votre application HelloWorld Express s’exécute localement dans votre navigateur, essayez d’apporter une modification en ouvrant le dossier « views » dans votre répertoire de projet et en sélectionnant le fichier « index.pug ». Une fois ouvert, changez h1= title en h1= "Hello World!" puis 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, dans votre terminal, entrez : Ctrl+C

Essayer d’utiliser un module Node.js

Node.js dispose d’outils pour vous aider à développer des applications web côté serveur, certaines intégrées et beaucoup plus disponibles via npm. Ces modules peuvent vous aider à effectuer de nombreuses tâches :

Outil Utilisé pour
bonjour, précis Manipulation d’images, y compris la modification, le redimensionnement, la compression, et ainsi de suite, directement dans votre code JavaScript
PDFKit Génération PDF
validator.js Validation de chaîne
imagemin, UglifyJS2 Minimisation
spritesmith Génération de feuille Sprite
Winston Exploitation forestière
commander.js Création d’applications en ligne de commande

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

  1. Dans votre ligne de commande, ouvrez l’interface CLI Node.js. Vous verrez l’invite > vous indiquant que vous êtes en train d'utiliser Node.js après avoir entré : node

  2. Pour identifier le système d’exploitation que vous utilisez actuellement (qui doit retourner une réponse vous informant que vous êtes sur Windows), entrez : os.platform()

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

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

  5. Quittez l’interface CLI Node.js en entrant .exit ou en appuyant deux fois sur Ctrl+C.

    Conseil / 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";