Codectionary / Developer documentation / JavaScript

Create, run and debug JavaScript projects in WebStorm, and understand when a Node runtime is needed.

What WebStorm does and what it costs

WebStorm is JetBrains’ IDE for JavaScript and related web development. Download it from the official JetBrains site and use the installer for your operating system. Its licensing depends on your use: eligible noncommercial work can use JetBrains’ free noncommercial licence; commercial use requires an appropriate paid licence or other applicable entitlement. Read the current licence terms before relying on a free option.

WebStorm is the editor and debugger, not the JavaScript language or the Node runtime. Install Node separately if you want to run app.js in a terminal, use npm, or run build and development tools. Plain browser JavaScript in an HTML page does not inherently require Node.

Create and run a project

Create an empty JavaScript project or open an existing folder in WebStorm. In the Project view, create app.js, type the example below and save it. Open the embedded terminal in that project folder and run node --version, then node app.js.

If WebStorm does not discover Node automatically, select the installed Node runtime in its Node.js settings or in the Node.js run configuration. Run > Edit Configurations lets you create a Node.js configuration, choose its runtime and point it at app.js. The exact settings labels can change across IDE releases; follow the linked current JetBrains guide if the interface differs.

WebStorm terminal in the project folder

node --version
node app.js

Debug the right environment

Set a breakpoint in the gutter next to a statement, select the Node.js run configuration and choose Debug. WebStorm pauses before executing that line, so you can inspect values, step and continue. For a browser page, open the HTML page in a browser and use the browser developer tools or WebStorm’s documented JavaScript browser debugging workflow.

A Node run configuration cannot display DOM changes because Node has no browser document. If the program says document is not defined, run the script from an HTML page instead. WebStorm includes relevant JavaScript and Node debugger support; check that bundled plugins are enabled before adding anything extra.

Common setup problems

If the IDE reports that Node is missing, verify node --version in a newly opened terminal, then configure the same runtime in WebStorm. If you have multiple Node versions, make sure the project’s runtime matches its package.json engines requirement.

If a run configuration points to the wrong file, check its JavaScript file path and project working directory. Save app.js and run it again to see your latest changes. Use npm install only when the project has dependencies; a first hello.js program does not need any.

Syntax

node app.js

Examples

A first JavaScript file

Save this as hello.js, then run node hello.js in a terminal. Expected output: Hello, Codectionary!

console.log("Hello, Codectionary!");
  1. The quotes create a string containing the message. console.log writes that string to the terminal when Node.js runs this file.
  2. Save the file as hello.js, open a terminal in its folder and run node hello.js. The output is the message without quote marks.
  3. Try changing the message and running the file again. If the old message appears, check that you saved the file and are running the file you edited.

Best practices

  • Check the licence terms for your intended use.
  • Configure the project’s actual Node runtime before debugging a Node script.
  • Use browser debugging for DOM code.
  • Keep the initial project simple; add packages only when needed.

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

ECMAScript specification

Specifications & further reading