Démarrage rapide : utiliser Visual Studio pour créer votre première application Node.jsQuickstart: Use Visual Studio to create your first Node.js app

Dans cette présentation de 5-10 minutes de l’environnement de développement intégré (IDE) de Visual Studio, vous allez créer une application Node.js simple.In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you'll create a simple Node.js web application.

PrérequisPrerequisites

  • Au préalable, vous devez avoir installé Visual Studio et la charge de travail de développement Node.js.You must have Visual Studio installed and the Node.js development workload.

    Si vous n’avez pas encore installé Visual Studio 2019, accédez à la page téléchargements Visual Studiopour l'   installer gratuitement.If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free.

    Si vous n’avez pas encore installé Visual Studio 2017, accédez à la page téléchargements Visual Studiopour l'   installer gratuitement.If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.

    Si vous devez installer la charge de travail mais que vous disposez déjà de Visual Studio, accédez à Outils > obtenir des outils et des fonctionnalités..., qui ouvre le Visual Studio installer.If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features..., which opens the Visual Studio Installer. Choisissez la charge de travail Développement Node.js, puis choisissez Modifier.Choose the Node.js development workload, then choose Modify.

    Charge de travail Node.js dans Visual Studio Installer

  • Le runtime Node.js doit être installé.You must have the Node.js runtime installed.

    Si vous ne l’avez pas installé, nous vous recommandons d’installer la version LTS à partir du site Web Node.js pour une meilleure compatibilité avec les frameworks et les bibliothèques externes.If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries. Node.js est conçu pour les architectures 32 bits et 64 bits.Node.js is built for 32-bit and 64-bit architectures. Les outils de Node.js dans Visual Studio, inclus dans la charge de travail Node.js, prennent en charge les deux versions.The Node.js tools in Visual Studio, included in the Node.js workload, support both versions. Une seule est requise et le programme d’installation de Node.js ne prend en charge qu’une seule installation à la fois.Only one is required and the Node.js installer only supports one being installed at a time.

    En règle générale, Visual Studio détecte automatiquement le runtime Node.js installé.In general, Visual Studio automatically detects the installed Node.js runtime. S’il ne détecte pas un Runtime installé, vous pouvez configurer votre projet pour référencer le Runtime installé dans la page Propriétés (après avoir créé un projet, cliquer avec le bouton droit sur le nœud du projet, choisir Propriétéset définir le ** chemin d’accèsNode.exe**).If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path). Vous pouvez utiliser une installation globale de Node.js ou vous pouvez spécifier le chemin d’accès à un interpréteur local dans chacun de vos projets Node.js.You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

Création d’un projetCreate a project

Vous allez d’abord créer un projet d’application web Node.js.First, you'll create an Node.js web application project.

  1. Si le runtime Node.js n’est pas déjà installé, installez la version LTS à partir du site web Node.js.If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.

    Pour plus d’informations, voir les Conditions préalables.For more information, see the prerequisites.

  2. Ouvrez Visual Studio.Open Visual Studio.

  3. Créez un projet.Create a new project.

    Appuyez sur Échap pour fermer la fenêtre de démarrage.Press Esc to close the start window. Tapez Ctrl+Q pour ouvrir la zone de recherche, tapez Node.js, puis choisissez Créer un projet d’application web Node.js vide (JavaScript).Type Ctrl + Q to open the search box, type Node.js, then choose Create new Blank Node.js Web application project (JavaScript). Dans la boîte de dialogue qui apparaît, choisissez Créer.In the dialog box that appears, choose Create.

    Dans la barre de menus supérieure, choisissez fichier > nouveau > projet.From the top menu bar, choose File > New > Project. Dans la boîte de dialogue Nouveau projet, développez JavaScript, puis choisissez Node.js.In the left pane of the New Project dialog box, expand JavaScript, then choose Node.js. Dans le volet central, choisissez Application web Node.js vide, puis OK.In the middle pane, choose Blank Node.js Web application, then choose OK.

    Si vous ne voyez pas le modèle de projet Application web Node.js vide, vous devez ajouter la charge de travail Développement Node.js.If you don't see the Blank Node.js Web application project template, you must add the Node.js development workload. Pour obtenir des instructions détaillées, consultez les Prérequis.For detailed instructions, see the Prerequisites.

    Visual Studio crée la nouvelle solution et ouvre le projet.Visual Studio creates and the new solution and opens the project. server.js s’ouvre dans l’éditeur, dans le volet gauche.server.js opens in the editor in the left pane.

Explorer l’IDEExplore the IDE

  1. Observez l’Explorateur de solutions dans le volet droit.Take a look at Solution Explorer in the right pane.

    Explorateur de solutions

    • Votre projet mis en gras, avec le nom que vous avez donné dans la boîte de dialogue Nouveau projet.Highlighted in bold is your project, using the name you gave in the New Project dialog box. Sur le disque, ce projet est représenté par un fichier . njsproj dans le dossier de votre projet.On disk, this project is represented by a .njsproj file in your project folder.

    • Au niveau le plus élevé figure une solution, qui a par défaut le même nom que votre projet.At the top level is a solution, which by default has the same name as your project. Une solution, représentée par un fichier .sln sur le disque, est un conteneur pour un ou plusieurs projets connexes.A solution, represented by a .sln file on disk, is a container for one or more related projects.

    • Le nœud npm montre tous les packages npm installés.The npm node shows any installed npm packages. Vous pouvez cliquer avec le bouton droit sur le nœud npm pour rechercher et installer des packages npm à l’aide d’une boîte de dialogue.You can right-click the npm node to search for and install npm packages using a dialog box.

  2. Si vous souhaitez installer des packages NPM ou des commandes Node.js à partir d’une invite de commandes, cliquez avec le bouton droit sur le nœud du projet et choisissez ouvrir l’invite de commandes ici.If you want to install npm packages or Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

    Invite de commandes node.js

  3. Dans le fichier server.js dans l’éditeur (volet gauche), choisissez http.createServer, puis appuyez sur F12 ou choisissez Atteindre la définition dans le menu contextuel (clic droit).In the server.js file in the editor (left pane), choose http.createServer and then press F12 or choose Go To Definition from the context (right-click) menu. Cette commande vous permet d’accéder à la définition de la createServer fonction dans index. d. TS.This command takes you to the definition of the createServer function in index.d.ts.

    Menu contextuel Atteindre la définition

  4. Revenez à server.js, placez votre curseur à la fin de la chaîne sur la ligne de code suivante, res.end('Hello World\n');, puis modifiez-la pour qu’elle ressemble à ceci :Got back to server.js, then put your cursor at the end of the string in this line of code, res.end('Hello World\n');, and modify it so that it looks like this:

    res.end('Hello World\n' + res.connection.

    Quand vous tapez connection., IntelliSense fournit des options de saisie semi-automatique du code.Where you type connection., IntelliSense provides options to auto-complete the code entry.

    Saisie semi-automatique IntelliSense

  5. Choisissez localPort, puis tapez ); pour compléter l’instruction afin qu’elle ressemble à ceci :Choose localPort, and then type ); to complete the statement so that it looks like this:

    res.end('Hello World\n' + res.connection.localPort);

Exécution de l'applicationRun the application

  1. Appuyez sur CTRL + F5 (ou déboguez > exécuter sans débogage) pour exécuter l’application.Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. L’application s’ouvre dans un navigateur.The app opens in a browser.

  2. Dans la fenêtre du navigateur, le message « Hello World » s’affiche, accompagné du numéro de port local.In the browser window, you will see "Hello World" plus the local port number.

  3. Fermez le navigateur web.Close the web browser.

Félicitations, vous avez terminé ce guide de démarrage rapide. Vous en savez maintenant un peu plus sur l’IDE de Visual Studio et Node.js.Congratulations on completing this Quickstart in which you got started with the Visual Studio IDE and Node.js. Si vous souhaitez en savoir plus sur ses fonctionnalités, poursuivez avec l’un des tutoriels de la section Tutoriels dans la table des matières.If you'd like to delve deeper into its capabilities, continue with a tutorial in the Tutorials section of the table of contents.

Étapes suivantesNext steps