Tutoriel : Créer une application Node.js et Express dans Visual StudioTutorial: Create a Node.js and Express app in Visual Studio

Dans ce tutoriel de développement Visual Studio en Node.js et Express, vous allez créer une application web Node.js simple, ajouter du code, explorer certaines fonctionnalités de l’IDE, puis exécuter l’application en question.In this tutorial for Visual Studio development using Node.js and Express, you create a simple Node.js web application, add some code, explore some features of the IDE, and run the app. Si vous n’avez pas encore installé Visual Studio, installez-le gratuitement ici.If you haven't already installed Visual Studio, install it for free here.

Dans ce didacticiel, vous apprendrez à :In this tutorial, you learn how to:

  • Créer un projet Node.jsCreate a Node.js project
  • Ajouter du codeAdd some code
  • Utilisez IntelliSenseUse IntelliSense
  • Exécuter l'applicationRun the app
  • Atteindre un point d’arrêtHit a breakpoint

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, installez-le gratuitement ici.If you haven't already installed Visual Studio, install it for free here.

    Si vous devez installer la charge de travail mais que vous avez déjà Visual Studio, cliquez sur le lien Ouvrir Visual Studio Installer dans le volet gauche de la boîte de dialogue Nouveau projet.If you need to install the workload but already have Visual Studio, click the Open Visual Studio Installer link in the left pane of the New Project dialog box. Visual Studio Installer est lancé.The Visual Studio Installer launches. Choisissez la charge de travail Développement Node.js, puis choisissez Modifier.Choose the Node.js development workload, then choose Modify.

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

    Si vous ne l’avez pas déjà fait, installez la version LTS à partir du site web Node.js.If you don't have it installed, install the LTS version from the Node.js website. 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 aucun runtime installé, vous pouvez configurer votre projet pour référencer le runtime installé dans la page de propriétés (après avoir créé un projet, cliquez avec le bouton droit sur le nœud de projet, puis choisissez Propriétés).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 and choose Properties).

    Ce tutoriel a été testé avec Node.js 8.10.0.This tutorial was tested with Node.js 8.10.0.

Créer 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. Ouvrez Visual Studio 2017.Open Visual Studio 2017.

  2. Dans la barre de menus supérieure, choisissez Fichier > Nouveau > Projet....From the top menu bar, choose File > New > Project....

  3. Dans la boîte de dialogue Nouveau projet, dans le volet gauche, développez JavaScript, puis choisissez Node.js.In the New Project dialog box, in the left pane, expand JavaScript, and then choose Node.js. Dans le volet central, sélectionnez Application Azure Node.js Express 4 de base, puis choisissez OK.In the middle pane, select Basic Azure Node.js Express 4 Application, and then choose OK.

    Si vous ne voyez pas le modèle de projet Application Azure Node.js Express 4 de base, vous devez d’abord installer la charge de travail Développement Node.js.If you don't see the Basic Azure Node.js Express 4 Application project template, you must install the Node.js development workload first.

    Visual Studio crée la solution et ouvre votre projet.Visual Studio creates the new solution and opens your project. Le fichier projet app.js s’ouvre dans l’éditeur (volet gauche).The app.js project file opens in the editor (left pane).

    • 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. Dans le système de fichiers, ce projet est représenté par un fichier .njsproj au sein de votre dossier de projet.In the file system, this project is represented by a .njsproj file in your project folder. Vous pouvez définir les propriétés et les variables d’environnement associées au projet en cliquant avec le bouton droit sur le projet et en choisissant Propriétés.You can set properties and environment variables associated with the project by right-clicking the project and choosing Properties. Vous pouvez effectuer des allers-retours avec d’autres outils de développement, car le fichier projet n’apporte pas de changements personnalisés à la source de projet Node.js.You can do round-tripping with other development tools, because the project file does not make custom changes to the Node.js project source.

    • 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.

    • Les fichiers projet tels que app.js s’affichent sous le nœud de projet.Project files such as app.js show up under the project node. app.js est le fichier de démarrage du projet.app.js is the project startup file.

  4. Ouvrez le nœud npm et vérifiez que tous les packages npm nécessaires sont présents.Open the npm node and make sure that all the required npm packages are present.

    S’il en manque (icône de point d’exclamation), vous pouvez cliquer avec le bouton droit sur le nœud npm et choisir Installer les packages npm manquants.If any are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages.

Ajouter du codeAdd some code

  1. Dans l’Explorateur de solutions (volet droit), ouvrez le dossier de vues, puis ouvrez index.pug.In Solution Explorer (right pane), open the views folder, then open index.pug.

  2. Remplacez le contenu par le balisage suivant.Replace the content with the following markup.

    extends layout
    
    block content
      h1= title
      p Welcome to #{title}
      script.
        var f1 = function() { document.getElementById('myImage').src='#{data.item1}' }
      script.
        var f2 = function() { document.getElementById('myImage').src='#{data.item2}' }
      script.
        var f3 = function() { document.getElementById('myImage').src='#{data.item3}' }
    
      button(onclick='f1()') One!
      button(onclick='f2()') Two!
      button(onclick='f3()') Three!
      p
      a: img(id='myImage' height='200' width='200' src='')
    
  3. Dans le dossier d’itinéraires, ouvrez index.js.In the routes folder, open index.js.

  4. Ajoutez le code suivant avant l’appel à router.get :Add the following code before the call to router.get:

    var getData = function () {
        var data = {
            'item1': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg',
            'item2': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg',
            'item3': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg'
        }
        return data;
    }
    
  5. Remplacez l’appel de fonction router.get par le code suivant :Replace the router.get function call with the following code:

    router.get('/', function (req, res) {
        res.render('index', { title: 'Express', "data" });
    });
    

    Il y a une erreur dans la ligne de code contenant res.render.There is an error in the line of code containing res.render. Nous devons la corriger avant que l’application ne puisse s’exécuter.We need to fix it before the app can run. Nous corrigeons l’erreur dans la section suivante.We fix the error in the next section.

Utilisez IntelliSenseUse IntelliSense

  1. Dans index.js, accédez à la ligne de code contenant res.render.In index.js, go to the line of code containing res.render.

  2. Après la chaîne data, tapez : get, et IntelliSense vous affichera la fonction getData.After the data string, type : get and IntelliSense will show you the getData function. Sélectionnez getData.Select getData.

    Utilisez IntelliSense

  3. Supprimez la virgule (,) avant "data". La syntaxe de l’expression est colorée en vert.Remove the comma (,) before "data" and you see green syntax highlighting on the expression. Pointez sur la coloration syntaxique.Hover over the syntax highlighting.

    Afficher l’erreur de syntaxe

    La dernière ligne de ce message indique que l’interpréteur JavaScript attendait une virgule (,).The last line of this message tells you that the JavaScript interpreter expected a comma (,).

  4. Cliquez sur l’onglet Liste d’erreurs.Click the Error List tab.

    Vous voyez l’avertissement et une description, ainsi que le nom de fichier et le numéro de ligne.You see the warning and description along with the filename and line number.

    Afficher la liste des erreurs

  5. Corrigez le code en ajoutant la virgule (,) avant "data".Fix the code by adding the comma (,) before "data".

Définir un point d’arrêtSet a breakpoint

  1. Dans index.js, cliquez dans la marge gauche avant la ligne de code suivante pour définir un point d’arrêt :In index.js, click in the left gutter before the following line of code to set a breakpoint:

    res.render('index', { title: 'Express', "data": getData() });

    Les points d'arrêt constituent une fonctionnalité élémentaire et essentielle de toute procédure de débogage fiable.Breakpoints are the most basic and essential feature of reliable debugging. Quand vous définissez un point d'arrêt, Visual Studio interrompt l'exécution du code à l'emplacement du point d'arrêt pour vous permettre d'examiner les valeurs des variables, le comportement de la mémoire ou encore la bonne exécution ou non d'une branche de code.A breakpoint indicates where Visual Studio should suspend your running code so you can take a look at the values of variables, or the behavior of memory, or whether or not a branch of code is getting run.

    Définir un point d’arrêt

Exécuter l'applicationRun the application

  1. Sélectionnez la cible de débogage dans la barre d’outils Débogage.Select the debug target in the Debug toolbar.

    Sélectionner la cible de débogage

  2. Appuyez sur F5 (Déboguer > Démarrer le débogage) pour exécuter l’application.Press F5 (Debug > Start Debugging) to run the application.

    Le débogueur s’arrête au point d’arrêt que vous avez défini.The debugger pauses at the breakpoint you set. Vous pouvez maintenant inspecter l’état de votre application.Now, you can inspect your app state.

  3. Placez le curseur sur getData pour afficher ses propriétés dans un DataTip.Hover over getData to see its properties in a DataTip

    Inspecter des variables

  4. Appuyez sur F5 (Déboguer > Continuer) pour continuer.Press F5 (Debug > Continue) to continue.

    L’application s’ouvre dans un navigateur.The app opens in a browser.

    Dans la fenêtre du navigateur, « Express » est affiché comme titre et « Welcome to Express » est affiché dans le premier paragraphe.In the browser window, you will see "Express" as the title and "Welcome to Express" in the first paragraph.

  5. Cliquez sur les boutons pour afficher différentes images.Click the buttons to display different images.

    Exécution de l’application dans le navigateur

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

Publier sur Azure App Service (facultatif)(Optional) Publish to Azure App Service

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet et choisissez Publier.In Solution Explorer, right-click the project and choose Publish.

    Publier sur Azure App Service

  2. Choisissez Microsoft Azure App Service.Choose Microsoft Azure App Service.

    Dans la boîte de dialogue App Service, vous pouvez vous connecter à votre compte Azure et vous connecter à des abonnements Azure existants.In the App Service dialog box, you can sign into your Azure account and connect to existing Azure subscriptions.

  3. Suivez les étapes restantes pour sélectionner un abonnement, choisir ou créer un groupe de ressources, et choisir ou créer un plan de service d’application, puis suivez les étapes quand vous êtes invité à publier sur Azure.Follow the remaining steps to select a subscription, choose or create a resource group, choose or create an app service plane, and then follow the steps when prompted to publish to Azure. Pour obtenir des instructions détaillées, consultez Publier sur un site web Azure avec Web Deploy.For more detailed instructions, see Publish to Azure Website using Web Deploy.

  4. La fenêtre Sortie montre la progression du déploiement sur Azure.The Output window shows progress on deploying to Azure.

    Une fois le déploiement terminé, votre application s’ouvre dans un navigateur exécuté dans Azure App Service.On successful deployment, your app opens in a browser running in Azure App Service. Cliquez sur un bouton pour afficher une image.Click a button to display an image.

    Application en cours d’exécution dans Azure App Service

Félicitations ! Vous avez terminé ce didacticiel.Congratulations on completing this tutorial!

Étapes suivantesNext steps

Dans ce tutoriel, vous avez appris à créer et exécuter une application Node.js à l’aide d’Express. Vous avez également appris à atteindre un point d’arrêt à l’aide du débogueur.In this tutorial, you learned how to create and run a Node.js app using Express and hit a breakpoint using the debugger.