Build Node.js Apps with Visual Studio Code

Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js is the runtime and npm is the Package Manager for .js Node modules.

Visual Studio Code supports out-of-the-box JavaScript and TypeScript languages, as well as debugging .js Node. However, to run a Node .js application, you will need to install the Node .js runtime on your machine.

To get started with this tutorial, install Node.js for your platform. The Node Package Manager is included in the Node.js distribution. You will need to open a new terminal (command prompt) for the node and npm command-line tools to be in your PATH.

To verify that you have Node.js installed correctly on your computer, open a new terminal and type node -version and you should see the current version .js Node installed.

Linux: There are Node.js specific packages available for the various flavors of Linux. See Node Installation.js through the package manager to find the Node.js package and installation instructions tailored to your version of Linux.

Windows

Subsystem for Linux: If you’re on Windows, WSL is a great way to do Node .js development. You can run Linux distributions on Windows and install Node.js in the Linux environment. When combined with the WSL extension, you get full VS Code editing and debugging support while running in the WSL context. For more information, go to Developing in WSL or try the Working in WSL tutorial.

Let’s

start by creating the simpler.js Node application, “Hello World”.

Create an empty folder named “hello”, navigate and open the VS code:

mkdir hello cd hello code.

Tip: You can open files or folders directly from the command line. The dot ‘.’ refers to the current folder, therefore VS Code will start and open the Hello folder.

On the File Explorer

toolbar, click the New File button

:

and name the file app.js:

When using the .js file extension, VS Code interprets this file as JavaScript and will evaluate the content with the JavaScript language service. See the VS Code JavaScript Language topic for more information about JavaScript support.

Create a simple string variable in the application.js and send the contents of the string to the console:

var msg = ‘Hello World’; console.log(msg);

Note that when you typed console. IntelliSense on the console object was automatically presented to you.

Note also that VS Code knows that msg is a string based on the initialization of ‘Hello World’. If you type msg., you will see IntelliSense showing all string functions available in msg.

After experimenting with IntelliSense, revert the additional changes from the previous source code example and save the file (⌘S (Windows, Linux Ctrl+S)).

Run Hello World

It’s easy to run the application.js with Node.js. From a terminal, simply type:

node app.js

You should see the output “Hello World” in the terminal and then the node .js returns

.

VS Code Integrated Terminal

has a built-in terminal that you can use to execute shell commands. You can run Node.js directly from there and avoid exiting VS Code while running command-line tools.

View > Terminal (⌃’ (Windows, Linux Ctrl+’) with the backspace mark character) will open

the built-in terminal and you can run the node application.js there:

<img src="https://code.visualstudio.com/assets/docs/nodejs/nodejs/integrated-terminal.png" alt=

“built-in terminal” />

For this walkthrough, you can use an external terminal or the built-in VS Code terminal to run the command-line tools.

Hello World Debugging

As mentioned in the introduction, VS Code includes a debugger for .js Node applications. Let’s try to debug our simple Hello World application.

To set a breakpoint in the application.js, place the editor cursor on the first line and press F9 or click the left channel of the editor next to the line numbers. A red circle will appear in the gutter.

<img src="https://code.visualstudio.com/assets/docs/nodejs/nodejs/app-js-breakpoint-set.png" alt="

app.js breakpoint set

” /> To start debugging, select the Run & Debug view on the activity bar:

You can now click the green arrow on the Debug toolbar or press F5 to

start and debug

“Hello World”. Your breakpoint will be reached and you will be able to see and step by step through the simple application. Notice that VS Code displays a different colored status bar to indicate that it is in debug mode and the DEBUG CONSOLE is displayed.

Now that you’ve seen VS Code in action with “Hello World,” the following section shows using VS Code with a full-stack Node .js web app

.

Note: We’re done with the “Hello World” sample, so exit that folder before creating an Express app. You can delete the “Hello” folder if you want, as it is not needed for the rest of the tutorial.

An

Express Express application is a very popular application framework for creating and running Node applications.js applications. You can scaffold (create) a new Express application using the Express Generator tool. Express Generator ships as an npm module and is installed using the npm npm command-line tool.

Tip: To verify that you have npm installed correctly on your computer, type npm -help from a terminal and you should see the usage documentation.

Install Express Generator

by running the following

from a terminal: npm install -g express-generator

The -g switch installs the Express Generator globally on your machine so you can run it from anywhere

.

Now we can create a scaffold for

a new Express app called myExpressApp by running: express myExpressApp -view pug

This creates a new folder called myExpressApp with the contents of the app. The -view pug parameters tell the generator to use the pug template engine.

To install all application dependencies (again shipped as npm modules), go to the new folder and run

npm install: cd myExpressApp npm install

At this point, we need to test that our application is running. The generated Express application has a package.json file that includes a startup script to run the ./bin/www node. This will start the running Node.js application.

From a terminal in the Express application folder, run: npm start

The Node web server will start.js and you can search for http://localhost:3000 to view the running application

.

Large code edit

Close the browser and, from a terminal in the myExpressApp folder, stop the Node server.js by pressing CTRL+C

.

Now launch VS Code:

code.

Note: If you have been using the built-in VS Code terminal to install the Express generator and create application scaffolds, you can open the myExpressApp folder from the running VS Code instance with the File > Open Folder command

.

The Node.js and Express documentation does a great job explaining how to build rich applications using the platform and framework. Visual Studio Code will make you more productive in developing these types of applications by providing great code navigation and editing experiences.

Open the .js file application and hover over the Node.js __dirname global object. Notice how VS Code understands that __dirname is a string. Even more interesting, you can get full IntelliSense against the .js Node framework. For example, you can require http and get full IntelliSense in the http class as you write Visual Studio Code.

VS Code

uses TypeScript declaration (typing) files (for example, node.d.ts) to provide metadata to VS Code about the JavaScript-based frameworks you are consuming in your application. Type declaration files are written to TypeScript so that they can express parameter and function data types, enabling VS Code to provide a rich IntelliSense experience. Thanks to a feature called Automatic Type Acquisition, you don’t have to worry about downloading these type declaration files, VS Code will automatically install them for you.

You can also write code that references modules in other files. For example, in app.js we require the ./routes/index module, which exports an Express.Router class. If you open IntelliSense in the index, you can see the shape of the Router class.

Debugging

the Express Application

You will need to create a launch.json debugger configuration file for the Express application. Click Run and Debug on the activity bar (⇧⌘D (Windows, Linux Ctrl+Shift+D)) and then select the Create a launch.json link to create a default launch.json file. Select the Node environment.js making sure that the type property in the configurations is set to “node”. When the file is first created, VS Code will look in package.json for a startup script and use that value as a program (which in this case is “${workspaceFolder}\bin\www) for the startup program configuration.

{ “version”: “0.2.0”, “configurations”: [ { “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “program”: “${workspaceFolder}\bin\www” } ] }

Save the new file and make sure Start Program is selected in the settings drop-down menu at the top of the Run & Debug view. Open the application.js and set a breakpoint near the top of the file where the Express application object is created by clicking the gutter to the left of the line number. Press F5 to start debugging the application. VS Code will start the server in a new terminal and will reach the breakpoint we set. From there, you can inspect variables, create clocks, and loop through your code.

Deploy

the application

For information about how to deploy your web app, see the Deploy apps to Azure tutorials, where we show you how to run your website in Azure.

Next steps

There’s much more to explore with Visual Studio Code, try the following topics:

• Settings: Learn how to customize VS Code for the way you like to work.
• Debugging: This is where VS Code really shines.
• Video: Introduction to debugging .js Node: Learn how to associate with a running process .js node.
• Node .js debugging: Learn more about VS Code .js Nodes integrated debugging.
• Debugging recipes: Examples for scenarios such as client-side and container-side debugging.
• Tasks – Run tasks with Gulp, Grunt and Jake. Show errors and warnings.