Skip to main content
โšก Calmops

JavaScript Installation and Environment Setup

JavaScript Installation and Environment Setup

JavaScript runs in two main environments: browsers (client-side) and Node.js (server-side). This guide covers setting up both.

Browser JavaScript

What You Need

Modern browsers come with JavaScript engines built-in:

  • Chrome/Edge: V8 engine
  • Firefox: SpiderMonkey engine
  • Safari: JavaScriptCore engine

Getting Started

  1. Open your browser’s developer tools:

    • Windows/Linux: F12 or Ctrl+Shift+I
    • Mac: Cmd+Option+I
  2. Navigate to the Console tab

  3. Type JavaScript directly:

console.log("Hello, JavaScript!");

Creating Your First HTML File

Create a file named index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript</title>
</head>
<body>
    <h1>JavaScript in Browser</h1>
    <script>
        console.log("Hello from inline script!");
    </script>
</body>
</html>

Open this file in your browser and check the console.

External JavaScript Files

Create script.js:

console.log("Hello from external file!");

Update index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript</title>
</head>
<body>
    <h1>JavaScript in Browser</h1>
    <script src="script.js"></script>
</body>
</html>

Node.js Setup

Installation

Windows/Mac/Linux:

  1. Visit nodejs.org
  2. Download the LTS (Long Term Support) version
  3. Run the installer and follow the prompts
  4. Verify installation:
node --version
npm --version

Your First Node.js Program

Create hello.js:

console.log("Hello from Node.js!");

Run it:

node hello.js

Node.js REPL

The REPL (Read-Eval-Print Loop) lets you test code interactively:

node

Then type:

> console.log("Hello!");
Hello!
> 2 + 2
4
> .exit

Package Management with npm

What is npm?

npm (Node Package Manager) is the default package manager for Node.js. It comes with Node.js automatically.

Creating a Project

mkdir my-project
cd my-project
npm init -y

This creates package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Installing Packages

Install a package locally:

npm install lodash

This creates a node_modules folder and updates package.json.

Install globally (available system-wide):

npm install -g nodemon

Using Installed Packages

Create index.js:

const _ = require('lodash');

const numbers = [1, 2, 3, 4, 5];
console.log(_.reverse(numbers));

Run it:

node index.js

IDE Setup

  1. Download from code.visualstudio.com
  2. Install the JavaScript (ES6) code snippets extension
  3. Install the Prettier extension for code formatting

Essential Extensions

  • ESLint: Linting and error detection
  • Thunder Client: API testing
  • Live Server: Local development server

Environment Variables

Create a .env file:

API_KEY=your_key_here
DATABASE_URL=mongodb://localhost

Install dotenv:

npm install dotenv

Use in your code:

require('dotenv').config();
console.log(process.env.API_KEY);

Checking Your Setup

Create verify.js:

console.log("Node.js version:", process.version);
console.log("npm version:", require('child_process').execSync('npm --version').toString());
console.log("Current directory:", process.cwd());
console.log("Platform:", process.platform);

Run it:

node verify.js

Common Issues

“node: command not found”

  • Node.js isn’t installed or not in PATH
  • Restart your terminal after installation

“npm: command not found”

  • npm should come with Node.js
  • Reinstall Node.js

Permission errors on Mac/Linux

  • Use sudo carefully or use a Node version manager like nvm

Official Documentation

Tools & Editors

Learning Resources

Next Steps

  1. Learn Variables: JavaScript Variables: var, let, const Explained
  2. Understand Data Types: JavaScript Data Types Fundamentals
  3. Master Functions: Functions: Definition, Parameters, Return Values
  4. Handle Errors: Error Handling in JavaScript
  5. Set Up IDE: IDE Setup: VS Code for JavaScript
  6. Manage Packages: npm: Package Management Fundamentals

Summary

You now have JavaScript running in both browsers and Node.js. You can write code in the browser console, create HTML files with scripts, or use Node.js for server-side development. npm gives you access to thousands of packages to extend JavaScript’s capabilities.

Comments