CPNT 262 Day 13 - Introduction npm and dependencies

Housekeeping

• Daily submission counts

Trophy of the day

• Example app using an npm package

1. Spoiler Demos

• Simple Calculator

2. npm Package Manager

Materials

• Takeaways: Introduction to npm
• Prep:
  • Anatomy of a package.json File on Digital Ocean
  • The package.json guide
  • Video: NPM Crash Course by Traversy Media
  • NodeJS: An introduction to the npm package manager

Activity: File size - before and after

1. Download or clone the hello-npm project to your workspace.
2. Navigate to the root of the project on the command line.
3. Use your operating system to determine the file size of this new project and how many files there are:
   • File size: 188 kB on disk
   • Number of items: 5 files
4. Install dependencies with npm install
5. Check the file size and number again:
   • File size: ???
   • Number of files: ???
6. Questions to ask:
   • What has changed?
   • What is taking up the extra disk space?
   • Would we want to include node_modules in our repositories? Hint: the answer is no.

3. Ignoring node_modules

Materials

• Where does npm install the packages?

We want to exclude the node_modules directory (with a .gitignore file) for a few reasons:

1. Including the directory will bloat the file size of your repos, which we'll see later.
2. Even if the file size of node-modules is small, it will "pollute" your commit history with changes you didn't make because the directory is auto-generated and auto-updated.
3. There's no reason not to! npm can rebuild the node_modules directory at anytime with the npm install command. You only need to commit package.json.

Key Takeaways

• Use your global .gitignore for files that your operating system might add to your projects.
• Use your project .gitignore for project-specific files that your team members all need to exclude.

4. Initializing npm projects and installing packages

Materials

• Gists:
  • Evaluating the status of an npm project
  • Initializing a new npm project

Activity: Starter packages

1. Install one or all of these packages:
   • JS Utilities: lodash
   • Dates: luxom
     • Installation
   • URLs: slugify
   • Command line arguments: yargs
     • Video: Passing Command Line Arguments Node.js
2. For any given package, create an example app by following the usage instructions.
3. Have one of your classmates clone and run your demo app without including node_modules.

Lab Time

• Assignment 4
• Example npm package demo
• Sharing your package demo

Prep

NPM Basics

• Video: NPM Crash Course by Traversy Media
• An introduction to the npm package manager
• Where does npm install the packages?
• Semantic Versioning using npm

package.json

• Anatomy of a package.json File on Digital Ocean
• The package.json guide