JavaScriptSetup & Environment

Setup & Environment

One of JavaScript's superpowers is that you can start writing it with zero installation. Every web browser on your computer is already a complete JavaScript runtime — open the DevTools console and you can type code that runs immediately.

That said, for any work beyond one-liners you will want a proper setup. This page walks through the minimum tools and how to grow them as your projects do.

The bare minimum: a browser

  1. Open any modern browser (Chrome, Edge, Firefox, Safari).

  2. Press F12, or right-click anywhere on the page and pick Inspect.

  3. Switch to the Console tab.

  4. Type 1 + 1 and press Enter.

2

That's it — you have run JavaScript. The console is a real REPL: it remembers variables across lines, prints values, and shows errors with stack traces.

A simple HTML page with a script

To run code that lives in a file (not just typed into the console), create one HTML file and one JavaScript file in any folder:

index.html

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first JS page</title>
  </head>
  <body>
    <h1 id="greeting">…</h1>
    <script src="main.js"></script>
  </body>
</html>

main.js

JS
const heading = document.getElementById("greeting");
heading.textContent = "Hello from main.js!";

Open index.html in your browser by double-clicking it. The page loads, the browser fetches main.js, runs it, and updates the heading.

Why the script tag is at the bottom
Placing `<script>` just before `</body>` is a habit that pre-dates modern script-loading attributes. It guarantees the DOM exists before the script runs. The modern alternative is to put scripts in the `<head>` and add `defer` (`<script src="main.js" defer></script>`), which keeps loading in parallel but executes after the DOM is ready.
A real code editor: VS Code

Notepad works for one file, but you want a proper editor as soon as you have two. Visual Studio Code (free, from Microsoft) is the de facto standard:

  • Download it from code.visualstudio.com.

  • Useful extensions for JavaScript: ESLint, Prettier, JavaScript (ES6) code snippets, Path Intellisense.

  • Keyboard shortcut to know: Ctrl+` (back-tick) opens an integrated terminal inside the editor.

Install Node.js

As soon as you want to run JavaScript outside the browser — to use a bundler, install libraries, write a server, or run scripts on your computer — install Node.js.

  1. Visit nodejs.org and download the LTS (long-term support) version.

  2. Run the installer with the defaults.

  3. Open a terminal and check it worked.

Verify the install

Bash
node --version
npm --version
v20.11.0
10.2.4

You now have node (the runtime) and npm (the package manager). npm is what you use to install third-party libraries.

Use a version manager
Once you work on more than one project, install **nvm** (Mac/Linux) or **nvm-windows**. Different projects need different Node versions — a version manager lets you switch with one command.
Your first Node.js script

hello.js

JS
const name = "Node";
console.log(`Hello from ${name}!`);

Run it

Bash
node hello.js
Hello from Node!
Project folder structure

A real JavaScript project on disk looks like this once you start using npm:

Text
my-project/
├── index.html
├── package.json          # project manifest (created by 'npm init')
├── package-lock.json     # exact dependency versions (created by npm)
├── node_modules/         # installed dependencies (created by npm)
├── src/
│   ├── main.js
│   └── utils.js
└── README.md

Run npm init -y in an empty folder and you get a starting package.json. From there npm install lodash will download Lodash into node_modules and record the dependency in package.json.

Online playgrounds — no setup at all

If installing things feels heavy at first, run JavaScript online:

  • CodePen — HTML + CSS + JS in three panes with live preview. Great for UI experiments.

  • JSFiddle — similar idea, smaller scope.

  • Replit — full coding environment in the browser, including Node.

  • StackBlitz — runs full Node and Vite projects in the browser.

  • CodeSandbox — a hosted VS Code with a one-click React/Vue/Svelte setup.

Browser DevTools — your most-used tool

Spend ten minutes learning the panels. You will use them every day:

  • Elements — inspect and edit the live HTML/CSS.

  • Console — JavaScript REPL, logs and errors.

  • Sources — set breakpoints, step through your code, watch variables.

  • Network — every request the page makes, with timings and payloads.

  • Application — local/session storage, cookies, service workers, manifest.

  • Performance — record and analyse runtime performance.

What you have now

  • A modern browser with working DevTools.

  • VS Code (or your editor of choice).

  • Node.js and npm.

  • An online playground as a quick scratchpad.

That's the full setup. You can write any JavaScript in this tutorial with these tools, and they will keep working as you grow into bundlers, frameworks and full applications.