Lesson Weekend

Our first step in creating our project's development environment is to set up npm and create a package.json file. We will need to do this with every project. Over the coming lessons, we will manually add all the packages we need to our package.json file. However, once we have our package.json file all set up, we can reuse it for other projects, tinkering with it and customizing it as necessary.

Because we are creating our package.json file from scratch, we'll let npm (Node Package Manager) do some of the work for us. You should already have Node installed. If not, do so now, as we will need it to use npm.

npm is a package manager for adding open-source JavaScript libraries and packages to our applications via the command line. (And yes, that's not a typo - neither npm and webpack are capitalized.) A package manager is exactly what it sounds like: a tool to help manage (install, upgrade, and configure) all the outside tools and libraries (also known as packages) a project requires.

npm originally started as a package manager for Node.js (used for server-side or "back-end" JavaScript), but now it's also commonly used for front-end (client-side JavaScript that uses the browser) projects as well. Our projects are entirely front-end because all of our code will be loaded in the browser. We will not cover server-side JavaScript (Node) in this course.

There's another very popular package manager called yarn. You'll likely see many references to both yarn and npm when you are looking through online resources. In some ways, yarn improves on npm, but npm is the older, more established standard.

Setting Up package.json

Navigate to the root directory of shape-tracker and type npm init -y in the command line. This automatically creates a file called package.json in our project's root directory.

We can also run $ npm init without the -y flag; this creates a command line prompt to do basic package.json configuration. However, it's just as easy to edit configurations in the package.json file directly. All $ npm init -y is doing is automatically initializing this file for us - without us doing any custom configuration first.

A quick note: we won't always use $ npm init to set up our package.json file. We can reuse these files from project to project - which means we can just copy/paste a package.json file from another project instead of initializing a new package.json file and manually adding packages. This will become clearer as we get more familiar with the process.

Let's open the created package.json and take a look:

shape-tracker/package.json
{
  "name": "shape-tracker",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

So far, the file is very basic and only includes information like the name and version of our project. There are no outside packages yet and we can update any of these values if we wish. However, we won't make any changes to this file just yet.

Why Do We Need This File?

Before we move on, let's briefly cover the why of package.json. As we install packages to our project with npm, the name and version number of each package we install will be added to package.json. This list of packages provides a set of instructions for anyone that wants to replicate our project (including our future selves). We simply need to clone the project and then run the command npm install - and all of the packages listed in package.json will be installed automatically for us. (Don't run npm install yet, though - we still haven't added any packages!) There's no need for us to install each package manually. This is a huge deal, especially when a project has dozens or even hundreds of packages. As we mentioned at the beginning of this lesson, we can reuse a package.json file for other projects - which is exactly what we'll do once we have the hang of creating an environment from scratch.

The package.json file also provides some other very helpful functionality - the ability to add our own scripts. This allows us to run custom npm commands in the terminal. This can make our lives much easier as developers. We'll cover that further in future lessons.

Now that we have a sense of why this file is important, we're ready to start using npm to install our first dependencies. First, though, we'll learn about the basics of versioning in the next lesson. Versioning is a really important part of setting up a stable JavaScript environment.

Lesson 5 of 43
Last updated more than 3 months ago.