Node, NPM & associated technologies

These tools operate from the command line!!

Node

  • Node is a shell script that operates JavaScript in the same way your browser does
    • That includes creating an environment
    • You can program various things in it, including servers, which we'll come to later in the course
    • It is also used doing repetitive tasks in software production, including:
      • package management
      • building software (aka optimising)
      • testing
  • Created by Ryan Dahl because non-blocking io is a good idea!
  • Troubled history (many have left; much controversy). Ryan himself lamented its evolution
  • Docs (save until server-side)

Installing Node

  • You can install with homebrew
  • Docs for other methods
  • EVEN versions of node get LTS (Long Term Support) - do not build on odd versions
  • Other than LTS version the latest bleeding-edge version is available for you to try out
  • Keeping the right version of node, as older versions may not support the same features
  • You can use nvm (Node Version Manager), however it is slow.
    • there is a faster competitor fnm
      • install a version of node fnm install <version> then use fnm use <version> to switch between them
  • For now it's fine to install with homebrew...

npm

  • npm is the node package manager
    • It comes with node, so no need to separately install
    • packages are 3rd party software
    • they are stored in a 'registry' where you can publish your completed software to.
      • You can create your own local registry for private packages
  • The plan behind most package managers is:
    • To allow easy installation/update
    • To keep software up-to-date (security)
    • To resolve dependencies for 3P software
    • To keep projects lightweight
  • (npm had a competitor bower.io. Let it die)

Yarn

  • Yarn is a competitor to npm
  • Yarn belonged to facebook and was opensourced in 2016
  • It is compatible with the npm registries (i.e. it downloads the same 3rd party packages)
  • Features:
    • Unlike npm, yarn keeps a record of what you download, so if you've installed a package in another project yarn will copy it across, thus increasing your build times
    • syntax is more terse (yarn, rather than npm i; yarn <op> rather than npm run <op>, etc.)
  • You can install with npm [ironically] or homebrew
  • Docs
  • Don't mix the two.

pnpm

  • pnpm is a competitor to npm also
  • it is alleged to be faster and has many of the features of yarn
  • docs

.npmrc

  • Anything [.npmrc, .nvmrc, etc.] that ends in rc is a config file
  • You would use this file to tell npm what settings to use
    • for example if you have a private registry that you want npm to look in before searching the public one then you'd put the link to that address in there.
  • rc stands for Run Commands (amongst other things)

package.json

  • It's where npm keeps track of which software you installed
  • It also keeps config and project info, such as node version, licences, etc.
  • This means that when you put code in a repo you don't have to keep the 3rd party software with it
    • When you clone the project do npm install and all the 3rd party software is downloaded for you
  • When you npm install a package, it saves it for you in the d[evD]ependencies

Two Cousins of package.json

  • As node grew older, we realised that the range of versions we were allowing for software was too big, so we locked it down to narrower versions
    • The first version of this lock file was 'shrinkwrap.json' (created by typing npm shrinkwrap) - OLD. DON'T USE!
    • The new version is package.lock.json (auto-generated) (yarn.lock is the yarn equivalent. You should not have both!)
    • Do not alter these files manually!

Getting started with NPM

  1. With your command line pointer inside your main project directory, type npm init
  2. Answer the questions (or do npm init -y to skip)
  3. Now you can install software npm install <package>
  4. Software versioning uses the Semantic Versioning (SemVer) approach

SemVer (Semantic Versioning)

  • e.g. 3.4.1
    • <major>.<minor>.<patch>
      • Major: Significant changes - will likely break your program (without update work from you)
        • method names change; methodology, etc.
      • Minor: May break your program (probably not)
      • Patch: Really should have no impact (like renaming variables, or refactoring)
    • Full range guide

Dependencies

  • guide
  • dependencies
    • used by the actual software
  • devDependencies
    • used in optimising/testing/producing your javascript program
  • peerDependencies
    • optional
    • used to enhance the 3P software you use

Full list of npm commands

https://docs.npmjs.com

EACCESS error: How to solve (fnm should avoid this)

Using 3rd Party Packages

  • Finding:
  • Install in your project
    • npm i <packageName>
      • -D if devdependancy
    • At the top of your code file
      • import <variableName> from '<packageName>';
        • ​import React from 'react';
    • Then in code
      • <packageName>.someFn(....);
  • ​​If you're using esmodules put "type": "module", in package.json

Global Installation

  • If you use packages frequently in various projects you can install them globally, so they are available everywhere
  • npm will check local, then global directories to find the scripts
  • The global directory for npm is on your $PATH
    • so, often shell script tools, like trash-cli, can be installed in this way so that they can be used from the command line
  • npm i -g <some package> (-g is an alias of --global)
  • As an alternative, prefer npx (see next slide)

npx

  • npx is now part of npm as standard, so you don't need to download
  • npx is a package runner. It lets you execute shell scripts
    • create-react-app is an example
    • You can put your own scripts on github and execute them directly, try:
npx cowsay "Hello\!!"

cowsay

Environment Variables

  • Running node is a 'process' (pid)
  • The process is available in the injected variable process
  • The process has an environment (process.env) where settings and values can be set
  • This is a bash process, so you can set thing like: NODE_ENV=production <some shell command>

NPM Scripts

  • npm has the ability to run some shell scripts
  • npm install you've met (and made for you)
  • npm start will run node server.js (by default)
  • npm start and npm test are auto
    • for custom (inc. build) npm run <task name>
  • You can define your own in package.json
    • Whatever value you put must be a shell command!
{
  "scripts": {
    "dev": "nuxt && functions:build && functions:serve",
    "build": "nuxt build",
    "start": "MY_VAR=2 nuxt start",
    "start:production": "nuxt build && nuxt start",
    "generate": "nuxt generate && npm run functions:build",
    "functions:serve": "netlify-lambda serve lambda",
    "functions:build": "netlify-lambda build lambda"
  }
}

Expected workflow for user of your product:

  • git clone <your product url>
  • npm i
  • npm start (normally production mode)
    • there should be a npm test and npm build too