node, npm and yarn

Javascript runs inside the browser. But there is a 'version' of javascript that runs inside a terminal called 'Node' (or Node.js).

Node runs Javascript just like the browser but without anything to do with the DOM (since there is no web browser!) and with some extra functions to do things that aren't possible in a browser e.g. reading files straight from your computer.

node and npm

When you install node on your computer you can run the node myFile.js command to run your javascript program inside a terminal.

node comes with another command line program: npm.

npm stands for 'Node Package Manager'. It allows you to install 'node modules' (or 'packages') which are 'libraries' of other people's code that you can use inside your program.

All of these node modules are stored on npmjs.com. We've already used some libraries that you can find on npm, for example: lodash and react.

You can use the npm command line to install packages from npmjs.com onto your computer.

yarn

yarn is also a command line program which work very similarly to npm and does all the same things. This is a preference, but I use yarn so you will too.

Creating a new project

To create a new project run yarn init. This will prompt you to type a name for your package etc., keep pressing enter.

yarn creates a file called package.json whose contents looks like this:

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Installing packages from npmjs.com

Now let's install an npm package into our project

We can run:

yarn add <package_name>

For example:

yarn add lodash

yarn modifies your package.json file so it now looks like:

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

It also adds lodash to a special file called yarn.lock.

It also installed lodash into ./node_modules/lodash inside your project folder.

Using installed packages

To use an installed package you can import it with Javascript's import.

For example

import x from 'package_name'

For lodash this is:

import _ from 'lodash'

Packages for dev only

Sometimes you'll only use a package whilst you're developing your software and when it runs in 'production' it won't use that package at all.

An example of a package like this is prettier. Prettier formats code for you, which is helpful, but when your code is running in production, you don't need prettier for it to work - prettier just helps you format your code!

To install a package so that it's available whilst you're developing but not in 'production' use:

yarn add prettier --dev

package.json now looks like:

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "prettier": "^2.2.1"
  }
}

Installing packages with yarn install

If you want to download all the packages a project needs you can do this with the command: yarn install.

This will be the case after you check a project out from git.

Packages you can run on the command line

Some packages from npmjs.com are themselves command line programs!

Prettier is a great example. Prettier comes with a command: prettier myFile.js which formats your code.

If a package has a command line program then yarn puts it inside ./node_modules/.bin.

Following on from the previous example, after install prettier we can run:

./node_modules/.bin/prettier

package.json scripts

package.json also allows you to add a "scripts": section.

For example:

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "prettier": "^2.2.1"
  },
  "scripts": {
    "list:files": "ls"
  }
}

"list:files" is the name of the script. ls is the command to run.

We can then run: yarn run list:files (or yarn list:files) which will in turn run the ls command.

Inside scripts you can use any command line programs inside ./node_modules/.bin easily:

"scripts": {
  "format:code": "prettier index.js"
}

Here we use the prettier command line program we installed earlier via yarn.