3.2 React Tooling

Node and NPM

We use node.js and the NPM package manager to automate some of the development workflow. Here is a quick refresher on the key commands that you should know.

Update to Node version 14

Take advantage of the latest stable language features; update to node v14.11.x

Installing node

Single version installer

The simplest method to install node is to download and run the platform specific installer package from nodejs.org (opens new window). This is what we did last term.

Remember, the version of NPM that is packaged with node is not always up to date. It is best to update it manually after installation. Use NPM to install the latest version of NPM as a globally available package. On macOS and Linux you will need to prefix the command with sudo... IF you want to use it and install all your global packages in the default location.

sudo npm i -g npm

Instead, I much prefer to create my own location for the global modules, in the user home folder. ~.

First we create a folder in our home directory to hold all the global packages. Then we run the command to tell npm to use the new folder. And finally, we need to add this new location to our $PATH environment variable. Look for the $PATH variable in your .zshrc file.

mkdir ~/.npm-packages
npm config set prefix '~/.npm-packages'

The new $PATH line in your .zshrc file will look something like this:

export PATH="~/.npm-packages/bin:$PATH"

Node Version Managers

Sometimes it is useful to be able to switch the active version of node as you move from one project to another, or simply for testing compatibility. The NVM tool does just that. Full installation and usage instructions (opens new window) can be found on GitHub.

There is a newer and more reliable tool (opens new window) simply called n which can also be found on GitHub.

While version managers, like nvm or n can be helpful, they can sometimes be tricky to get setup correctly. So, be prepared to spend a little time and read the documentation very carefully.

Node in Docker Containers

The ideal solution is to isolate all environment dependencies (like the node version) in a containerized runtime environment per project. This is a more advanced setup that we will look at toward the end of the course if time permits.

Using npm on the command line

Before we can install any external libraries (like React), we need to initialize the project folder for use with a node package manager. Using the -y or --yes flag will create the package.json file with all of the default settings.

npm init -y

Development dependencies

Some NPM packages/libraries, like Webpack, are needed only during development to help manage the workflow or package up the final application. Install a package and it add to the devDependencies list in package.json

npm i -D [pkg]
# or
npm install --save-dev [pkg]

Production dependencies

Other libraries get bundled into our final production code package. Install a package and add it to the production dependencies list in package.json

npm i [pkg]
# or
npm install [pkg]

We used to have to explicitly instruct NPM to add the dependency using the -P or --save flags, but this has been the default behaviour since npm version 5 and is no longer required.

Global packages

Sometimes we need to install helper tools at the global level (as apposed to the project folder). These tools are typically used to help scaffold out a new project. One example is the npm tool itself. Another is the create-react-app tool. Globally installed NPM packages can be called from any folder in the terminal.

For security reasons on macOS or Linux, you will need administrator privileges to install a package globally, so you will need to prefix the command with sudo. **REMEMBER that you only need sudo if you did not create your own npm global location in your home directory.

sudo npm i -g [pkg]
# or
sudo npm install --global [pkg]

Of course, if you follow the instructions in the video above about changing the global install location for npm, then you can avoid using sudo entirely with npm.

Using npx instead

Rather than installing global packages like create-react-app, we can use another command called npx that gets installed with the npm package. It downloads the requested package into memory, executes it and then frees the memory again.

This has three advantages:

1. It reduces the file storage for infrequently used commands.
2. It ensures that you are always using the latest version of the given global package.
3. If the package is already installed in your local node_modules folder then it will use that one.
4. There is no need to use sudo.

Example:

npx create-react-app [new-project-name]

TIP

Read this Medium article, Introducing npx: an npm package runner (opens new window), to learn more about what you can do with NPX

Review the Package.json file

The package.json file is a structured JSON file that describes all of the meta data about your project. The full list of options and best practices (opens new window) are explained on the NPM documentation website.

As an example, here is the package.json file for the project that built this website.

{
  "name": "mad9135",
  "description": "HTML5 App Development",
  "author": {
    "name": "Robert McKenney",
    "email": "mckennr@algonquincollege.com",
    "url": "https://robertmckenney.info"
  },
  "contributors": [
    {
      "name": "Steve Griffith",
      "email": "griffis@algonquincollege.com"
    }
  ],
  "version": "3.0.90",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "repository": {
    "type": "git",
    "url": "https://github.com/rlmckenney/mad9135.git"
  },
  "bugs": {
    "url": "https://github.com/rlmckenney/mad9135/issues"
  },
  "homepage": "https://mad9135.github.io/F2021",
  "devDependencies": {
    "vuepress": "^1.5.4",
    "date-fns": "^2.16.1"
  },
  "dependencies": {
    "workbox-cli": "^5.1.3"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}