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

In this tutorial, you learn how to:

[!div class="checklist"]

• Create a Node.js project
• Add some code
• Use IntelliSense
• Run the app
• Hit a breakpoint

• You must have Visual Studio installed and the Node.js development workload.

  If you haven't already installed Visual Studio, install it for free here.

  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. The Visual Studio Installer launches. Choose the Node.js development workload, then choose Modify.

• You must have the Node.js runtime installed.

  If you don't have it installed, install the LTS version from the Node.js website. In general, Visual Studio automatically detects the installed Node.js runtime. 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).

  This tutorial was tested with Node.js 8.10.0.

First, you'll create an Node.js web application project.

1. Open Visual Studio 2017.

2. From the top menu bar, choose File > New > Project....

3. In the New Project dialog box, in the left pane, expand JavaScript, and then choose Node.js. In the middle pane, select Basic Azure Node.js Express 4 Application, and then choose OK.

   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 creates the new solution and opens your project. The app.js project file opens in the editor (left pane).

   • Highlighted in bold is your project, using the name you gave in the New Project dialog box. In the file system, this project is represented by a .njsproj file in your project folder. You can set properties and environment variables associated with the project by right-clicking the project and choosing Properties. You can do round-tripping with other development tools, because the project file does not make custom changes to the Node.js project source.

   • At the top level is a solution, which by default has the same name as your project. A solution, represented by a .sln file on disk, is a container for one or more related projects.

   • The npm node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.

   • Project files such as app.js show up under the project node. app.js is the project startup file.

4. Open the npm node and make sure that all the required npm packages are present.

   If any are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages.

1. In Solution Explorer (right pane), open the views folder, then open index.pug.

2. 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. In the routes folder, open index.js.

4. 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. Replace the router.get function call with the following code:

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

   There is an error in the line of code containing res.render. We need to fix it before the app can run. We fix the error in the next section.

1. In index.js, go to the line of code containing res.render.

2. After the data string, type : get and IntelliSense will show you the getData function. Select getData.

   

3. Remove the comma (,) before "data" and you see green syntax highlighting on the expression. Hover over the syntax highlighting.

   

   The last line of this message tells you that the JavaScript interpreter expected a comma (,).

4. Click the Error List tab.

   You see the warning and description along with the filename and line number.

   

5. Fix the code by adding the comma (,) before "data".

1. 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() });

   Breakpoints are the most basic and essential feature of reliable debugging. 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.

   

1. Select the debug target in the Debug toolbar.

   

2. Press F5 (Debug > Start Debugging) to run the application.

   The debugger pauses at the breakpoint you set. Now, you can inspect your app state.

3. Hover over getData to see its properties in a DataTip

   

4. Press F5 (Debug > Continue) to continue.

   The app opens in a browser.

   In the browser window, you will see "Express" as the title and "Welcome to Express" in the first paragraph.

5. Click the buttons to display different images.

   

6. Close the web browser.

1. In Solution Explorer, right-click the project and choose Publish.

   

2. Choose Microsoft Azure App Service.

   In the App Service dialog box, you can sign into your Azure account and connect to existing Azure subscriptions.

3. 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. For more detailed instructions, see Publish to Azure Website using Web Deploy.

4. The Output window shows progress on deploying to Azure.

   On successful deployment, your app opens in a browser running in Azure App Service. Click a button to display an image.

   

Congratulations on completing this tutorial!

In this tutorial, you learned how to create and run a Node.js app using Express and hit a breakpoint using the debugger.

[!div class="nextstepaction"] Node.js Tools for Visual Studio