Chapter 07 — Front-End Fundamentals

Node and npm

Up to this point everything has run directly in the browser. Node changes that. It’s a JavaScript runtime that runs outside the browser, on your machine, which means you can use JavaScript to write build tools, automate tasks, manage project dependencies, and run a local development server.

You don’t need to deeply understand Node right now. What you need to understand is what it makes possible: the entire toolchain you’ll use for the rest of this series runs on it.

Install Node

The best way to manage Node on macOS or Linux is with nvm, Node Version Manager. It lets you install multiple versions of Node and switch between them per project. This matters more than it sounds: different projects have different Node requirements, and nvm means you don’t have to think about it.

Install nvm:

bash~/tutorials/
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

After it runs, close and reopen your terminal, or run the export command it prints at the end of installation. Then verify it’s working:

bash~/tutorials/
nvm --version

Install the current LTS version of Node:

bash~/tutorials/
nvm install --lts
nvm use --lts

LTS stands for Long Term Support. It’s the stable release recommended for most projects. Verify Node and npm installed correctly:

bash~/tutorials/
node --version
npm --version

You should get version numbers back for both.

On Ubuntu: If you’d rather install via your package manager, the NodeSource repository provides up-to-date Node packages for Debian-based systems. The nvm approach works the same way on Ubuntu and is generally preferable for development machines.

What npm is

npm is the Node Package Manager. It installs and manages JavaScript packages: libraries and tools that other developers have written and published. It came installed with Node.

When you install a package with npm, it goes into a folder called node_modules in your project. The package’s metadata gets recorded in two files: package.json and package-lock.json. You’ll look at both in a moment.

node_modules can get large. It’s in your .gitignore for a reason. Anyone who clones your project can run npm install to recreate it from package.json. You never commit the folder itself.

Initialize npm in your project

Navigate to your tutorials folder in the VS Code integrated terminal:

bash~/tutorials/
cd ~/tutorials

Initialize a package.json:

bash~/tutorials/
npm init -y

The -y flag accepts all defaults. Open package.json in VS Code. It looks like this:

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

The most important section right now is "scripts". This is where you define terminal commands that npm can run on your behalf. You’ll add to this in the next chapter when you wire up Gulp.

Install a package

Install a package to see how this works. browser-sync is a development server that reloads the browser automatically when files change. You’ll replace it with Gulp’s built-in server in the next chapter, but it’s a clean example of the install workflow.

bash~/tutorials/
npm install browser-sync --save-dev

The --save-dev flag tells npm this is a development dependency, meaning it’s needed for building the project but not for running it in production. The package.json records it:

json~/tutorials/
"devDependencies": {
  "browser-sync": "^3.0.2"
}

And package-lock.json records the exact version installed. package.json describes what your project needs. package-lock.json records exactly what was installed. Commit both files.

Your node_modules folder now exists. Check your .gitignore to confirm it’s listed. If it’s not, add it.

bash~/tutorials/
git status

You should see package.json and package-lock.json as new files. node_modules should not appear.

npm scripts

Add a script to package.json to start a development server with browser-sync:

json~/tutorials/
"scripts": {
  "start": "browser-sync start --server src --files 'src/**/*'"
}

Run it:

bash~/tutorials/
npm run start

Browser-sync opens a browser tab pointing at your src folder and watches for changes. Edit your HTML or CSS, save, and the browser reloads automatically. Press Ctrl+C to stop it.

This is the npm scripts pattern: define a command once in package.json, run it with npm run <name> from anywhere in the project. You don’t need to remember the full browser-sync command. You just need npm run start.

How packages are found

When you install a package, npm puts its executable in node_modules/.bin/. When you run a command via npm run, it looks there first. That’s why browser-sync works in an npm script even though you haven’t installed it globally.

You can also run package executables directly using npx:

bash~/tutorials/
npx browser-sync start --server src --files 'src/**/*'

npx is useful for one-off commands where you don’t want to install a package permanently.

Commit your work

bash~/tutorials/
git add .
git commit -m "Initialize npm and add browser-sync dev server"

What you now know

Node is installed, npm is initialized, and you know how to install packages and run them via npm scripts. In Chapter 8 you’ll install Gulp and use it to automate the tasks that are currently manual: compiling Sass, processing JavaScript, and refreshing the browser.

Reference