Exercice – Exécuter et déboguer du code

Effectué

Maintenant que vous êtes connecté à votre serveur SSH, vous êtes prêt à commencer le codage. Vous devez générer une application Node de base, car vous avez été chargé de développer une application Express pour votre agence.

Dans cet exercice, vous allez créer un projet Node de base, puis exécuter et déboguer le code du projet, tout en étant connecté via SSH.

Créer et exécuter une application Node.js

Pour créer et exécuter votre application Node.js, vous allez devoir exécuter une série de commandes dans le terminal.

1. Ouvrez un nouveau terminal en sélectionnant Terminal>New Terminal dans la barre des tâches. À partir du terminal, exécutez les commandes suivantes pour mettre à jour les packages dans votre machine virtuelle Linux et installer Node.js:

   sudo apt-get update
   

   curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
   

   sudo apt-get install nodejs -y
   

2. Exécutez la commande suivante pour installer le générateur Express :

   sudo npm install -g express-generator
   

3. Exécutez la commande suivante pour créer une application Express appelée myExpressApp :

   express myExpressApp --view pug
   

4. Ouvrez les fichiers d’application en sélectionnant Ouvrir le dossier dans l’affichage Explorateur. Sélectionnez myExpressApp dans la liste déroulante pour ouvrir le dossier dans votre fenêtre Visual Studio Code.

   

5. Dans l’invite suivante, sélectionnez OK, qui ouvre le dossier contenant vos fichiers d’application. Si vous y êtes invité, approuvez l’espace de travail.

   

6. Ouvrez à nouveau le terminal et exécutez la commande suivante pour installer toutes les dépendances de l’application :

   npm install
   

7. Exécutez la commande suivante pour exécuter l’application :

   npm start
   

   L’application s’exécute sur l’URL http://localhost:3000 de vos machines virtuelles. L’étape suivante vous montre comment parcourir cette application sur votre ordinateur local.

Parcourir l’application

Maintenant que l’application est en cours d’exécution, vous pouvez utiliser le réacheminement de port pour parcourir l’application web sur votre ordinateur local.

1. Une fois l’application en cours d’exécution, exécutez la commande Ports : Focus on Ports View dans la palette de commandes.

   

2. Sélectionnez le bouton Transférer un port .

   

3. Spécifiez le port 3000, puis appuyez sur Entrée.

   

4. Le serveur transfère désormais le trafic sur le port 3000 à votre ordinateur local ; vous pouvez maintenant accéder à http://localhost:3000 l’application web en cours d’exécution.

5. Dans le terminal, arrêtez l’application en appuyant sur Ctrl + C.

Modifier et déboguer l’application

Vous pouvez utiliser les fonctionnalités intégrées de Visual Studio Code pour modifier et déboguer l’application s’exécutant sur l’ordinateur distant.

1. Sélectionnez l’Explorateur de fichiers dans le menu de gauche de Visual Studio Code et ouvrez le fichier app.js .

2. Définissez un point d'arrêt sur la ligne 10 du fichier en cliquant sur la gouttière à gauche du numéro de ligne. Un rond rouge apparaît.

   

3. Dans la vue Exécuter et Déboguer, sélectionnez Exécuter et Déboguer. Si vous y êtes invité, choisissez Node.js.

   

4. Quand l’application s’exécutera, vous atteindrez le point d’arrêt. Vous pouvez inspecter les variables, créer des surveillances et parcourir la pile d’appels dans la vue Débogage située dans la barre latérale. Vous pouvez contrôler votre session de débogage, comme avancer ligne par ligne, à l’aide de la barre d'outils d'action Debug en haut.

   

5. Vous pouvez également modifier le fichier comme s’il se trouvait sur votre ordinateur local. Commencez à taper app., ce qui déclenche IntelliSense.

   

Congratulations! Vous avez exécuté, modifié et débogué du code qui existait uniquement sur l’ordinateur distant.