# Node.js

• Node.js is an open-source server environment built on Chrome's V8 JavaScript engine.
• Node.js is free and runs on various platforms (Windows, Linux, Unix, Mac OS X).

# Installation guides

# Install node.js

Go to https://nodejs.org/en/download (opens new window). Download and install the latest LTS version of Node. Node.js is updated frequently, so a newer LTS version may be available by the time you read this.

Follow the default settings when you install Node. To check your version, open a new Git Bash window and enter: node --version or node -v.

$ node -v
v22.12.0
 
        Copied!
    

# Semantic Versioning

Node.js (and other packages) uses Semantic Versioning (SemVer), a versioning system that follows the format x.y.z to indicate the type of changes in each release. This system helps developers understand the impact of updates and manage dependencies effectively.

# Breakdown of Semantic Versioning:

• Major Version (x): Indicates breaking changes that are not backward compatible. For example, upgrading from Node.js 21.x.x to 22.x.x may require changes to your code.
• Minor Version (y): Adds new features in a backward-compatible way. For example, upgrading from Node.js 22.10.x to 22.12.x introduces new functionality without breaking existing code.
• Patch Version (z): Includes backward-compatible bug fixes or security updates. For example, upgrading from Node.js 22.12.0 to 22.12.1 resolves issues without affecting functionality.

# Example:

If your project uses Node.js 22.12.0:

• A patch update to 22.12.1 is safe and fixes bugs.
• A minor update to 22.13.0 adds features but doesn’t break your code.
• A major update to 23.0.0 may introduce breaking changes, requiring you to test and update your code.

For more details, visit the Node.js release schedule (opens new window) to see which versions are actively maintained.

# Install live-server

• Live-server is a development server with live reload capability for HTML, CSS and JavaScript files
• Live-server only works for static sites (not for PHP, ...)

Install live-server globally:

• open a terminal window and enter npm i -g live-server
• open a new Git Bash window and enter: live-server --version or live-server -v

$ live-server -v
live-server 1.2.2
 
        Copied!
    

Browse to the folder where your static site is stored and enter live-server, e.g.

Your site opens in the default browser on http://127.0.0.1:8080 (opens new window) (or http://localhost:8080 (opens new window))

# What is npm?

npm (Node Package Manager) is the default package manager for Node.js. npm consists of 2 parts:

• a command-line interface for downloading (and publishing, which is beyond the scope of this course) packages
• an online repository (opens new window) with 1.3 million JavaScript packages

On this page, we will explain the most important concepts of npm by examining the contents of the file package.json

# package.json

Most projects contain a package.json file. This file contains the meta-data, scripts and dependencies of the project. This file is written in JSON format:

• JSON (opens new window) (or JavaScript Object Notation) is a lightweight text format to interchange data
• JSON is easy to understand and is based on the following syntax rules
  • Data is represented in "name":"value" pairs
  • Data is separated by commas
  • Curly braces { } contain objects
  • Square brackets [ ] contain arrays

# meta-data

• name, version, description, repository, keywords, author, license, bugs, ...
• Example package.json

{
  "name": "css_shades_generator",
  "version": "1.0.0",
  "description": "CSS Custom Properties Shades Generator",
  "main": "",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pverhaert/css_shades_generator.git"
  },
  "keywords": [
    "Thomas More Kempen",
    "IT Factory",
    "Full Stack Essentials",
    "CSS Custom Properties",
    "Bootstrap"
  ],
  "author": "Peter Verhaert",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/pverhaert/css_shades_generator/issues"
  },
  "homepage": "https://github.com/pverhaert/css_shades_generator#readme",
  "type": "module",
  "scripts": {
    ...
  },
  "devDependencies": {
    ...
  }
}
 
        Copied!
    

# scripts

• In package.json, you can also define scripts to run command-line tools (which are installed globally or in the project's local context)
• Example: package.json of css_bootstrap_demo_project (opens new window)

{
  ...
  "scripts": {
    "watch": "cd src && live-server --port=6060"
  },
  ...
}
 
        Copied!
    

These scripts can be launched

• using the commands npm run <script-name> in a terminal window
• by double-clicking the corresponding scripts in PhpStorm's npm tool window (right-click within the editor window of package.json and choose Show npm Scripts)
• by clicking on the arrow ▶ before the scripts

# dependencies

• In package.json, you can also specify ("devDependencies") which packages are needed locally for your project
• Example: package.json of css_shades_generator (opens new window)

{
  ...
  "scripts": {
    ...
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "sweetalert2": "^11.15.9",
    "tailwindcss": "^3.4.17",
    "vite": "^6.0.7"
  }
}
 
        Copied!
    

When you open a project with a package.json file (for the first time), you should install the needed packages:

• by executing the command npm install (or npm i) in the terminal
• by clicking on Run 'npm install' in the PhpStorm pop-up

The packages are installed (locally) in the folder node_modules.

# Specifying Versions in package.json

When specifying Node.js or package versions in your package.json file, you can use different strategies to control how updates are applied:

• Exact Version: Specifying an exact version (e.g., "x.y.z") ensures that only that specific version will be installed. This provides maximum stability but prevents automatic updates, even for bug fixes or security patches.
• Tilde (~): Using a tilde before the version (e.g., "~x.y.z") allows updates to the latest patch version within the specified minor version. For example, "~22.12.0" will allow updates to 22.12.1, 22.12.2, etc., but not to 22.13.0.
• Caret (^): Using a caret before the version (e.g., "^x.y.z") allows updates to the latest minor or patch version within the specified major version. For example, "^22.12.0" will allow updates to 22.13.0, 22.14.0, etc., but not to 23.0.0.

# Example:

If your project uses a module with eg. version 5.8.0:

• A patch update to 5.8.1 is safe and fixes bugs.
• A minor update to 5.9.0 adds features but doesn’t break your code.
• A major update to 6.0.0 may introduce breaking changes, requiring you to test and update your code.

# package-lock.json

• Describes (amongst other things) the exact versions of all installed packages and their dependencies, creating a snapshot of your project's dependency tree at a specific point in time.
• If your project includes a package-lock.json file, running npm install will prioritize this file. npm will install the exact versions of packages listed in package-lock.json, ignoring the version ranges specified in your package.json. This ensures that all team members and deployment environments install precisely the same versions of packages, leading to consistent and reproducible builds.
• If this file doesn't exist, running npm install will install packages based on the version ranges specified in your package.json file.

# devDependencies vs dependencies

• Most of the dependencies are listed under "devDependencies", as they are only needed during local **development **
• Packages that are needed for your application in production should be listed under "dependencies"

# Common npm commands