Lesson Weekend

Over the next several lessons we'll create a ping pong application. Ping pong is a classic beginner coding problem that combines a loop with branching. It's a simple problem; however, our primary goal isn't actually solving ping pong. Instead, we'll use the problem to set up npm and webpack. We won't worry about the ping pong code itself just yet. For now, we'll start by configuring our project.

npm Package Manager

First we need to configure npm (Node package manager) in our project.

npm is a package manager for adding open-source JavaScript libraries and packages to your applications via the command line. 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) projects as well.

Initializing npm

To use npm, create a folder called ping-pong and navigate to the root directory. Type npm init -y in the command line. This automatically creates a file called package.json in the project's root directory.

(You 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.)

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

ping-pong/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"
}

So far, the file is very basic and only includes information like the name and version of our project. No outside packages yet. We can change these values if we wish; for now we won't. We'll be updating our "scripts" soon, but don't worry about that yet.

In the next lesson we'll use npm to install our first dependencies!