Lesson Weekend

Let's start installing the packages we'll work with. We can install any npm package with the $ npm install command. (Don't worry about webpack yet; we'll cover that in the next lesson.)

Note: For this course it's important we use specific versions of npm packages to ensure all our packages work together. So, each time we install a package, use the version number for that package listed in the lesson. Managing dependencies like this is simply part of web development! Not all packages play nicely with every version of other packages. Nor do companies immediately upgrade to latest releases; especially if a slightly older version has already proven reliable, and they don't need any new features more recent versions offer. Specifying exact version numbers like this is called version pinning.

Installing an npm Package

First, we'll install webpack as a development dependency:

$ npm install [email protected] --save-exact

This will install webpack in our project and add the dependency to our package.json file. Specifically, it will save the exact version we list in the command. (4.19.1, in this case).

We also need to install a package to have access to the CLI (command line interface) for webpack. This package will allow us to use webpack from the command line:

$ npm install [email protected] --save-dev

Let's take a look at package.json again to see how these commands have changed the contents of the file:

package.json
{
  "name": "ping-pong",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "4.19.1",
    "webpack-cli": "^2.0.9"
  }
}

We now have a new field: devDependencies. All of the dependencies we install with the --save-dev flag will be included in devDependencies. Technically, we could have just typed npm install webpack, but if we did the dependency would be added to our local project but would not be listed in the package.json.

package.json Manifest

It's very important that we include all necessary dependencies in our package.json file. When we download a project with a package.json file, we can just type npm install in the root directory and all required packages specified in the manifest file will be installed locally.

This is a common pitfall that trips up many beginners. If we were to run $ npm install webpack and $ npm install webpack-cli when we set up our project, everything related to webpack would work correctly on that computer (or, in more technical terms, that environment).

However, if we pushed the project to Github, then cloned it to another computer and ran $ npm install, webpack and webpack-cli wouldn't be included in the manifest and it wouldn't be installed locally, breaking your project. (Hint: This happens to a lot of students on code reviews! Make sure it doesn't happen to you!)

As a result, you should always make sure that any dependencies you install are correctly added to package.json. You can always manually delete a dependency from package.json if you realize you don't need it. (You can also manually add a dependency to package.json by typing or copying and pasting it directly into the file and then running $ npm install.)

If you want to remove dependencies, you should first remove the reference to the dependency you aren't using from package.json and then run the command $ npm prune. The command $ npm prune will ensure only dependencies listed in the manifest are actually installed (while others are removed).

Development and Production Dependencies

We can also have dependencies that are used for both development and production. For instance, if there were a package we needed in both development and production environments (such as jQuery, or Moment.js, which we'll use later) we would install it with a command that looks like this:

$ npm install PACKAGE-NAME-HERE --save

Notice we use the --save flag instead of --save-dev. This ensures the package will installed for both development and production. We'll walk through how to add front-end dependencies (like Jquery) in a future lesson. But for now, continue using the CDN for jQuery.

In the next few lessons we'll focus on installing development dependencies. webpack can also be used as a general dependency, but because we're using it to build a development application, we'll keep it as a dev dependency for now.

Ultimately, the --save and --save-dev flags just do one little thing: they add a reference to the specified package to the package.json file.

To make sure your projects run correctly (including code reviews), it's a good idea to clone the finished project and see if it correctly builds and runs. If it doesn't, a dependency probably didn't get added to the package.json file.