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. 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.
sudo npm i -g npm
# 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 can be found on GitHub.
There is a newer and more reliable tool 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.
sudo npm i -g [pkg]
# or
sudo npm install --global [pkg]
# 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 a temporary location, executes it and then deletes it again.
This has three advantages:
- It reduces the file storage for infrequently used commands.
- It ensures that you are always using the latest version of the given tool.
- 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, 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 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": "2.0.0",
"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/F2020",
"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"
}
}