SAIT WBDV

Web Developer Fast Track - Winter 2021

npm and package.json

Homework

  1. npm
  2. Tools

Morning reflection

Housekeeping

  1. Announced tomorrow:
    • Draft - Assignments 4 & 5
    • Draft - Final Project
    • Groups for Final Project

1. The http builtin module

Learning Objectives

  • Create a simple http server using Node.
  • Understand when code is executed:
    • on initial script execution;
    • when a request event occurs.
  • Start a server on port 8080.

Materials

Key Takeaways

  • You have to restart the server before it loads new changes.
  • The http module allows us to create servers without installing dependencies but it requires a lot of work to setup the features that a production server requires (404 handling, reading HTML files from the file system, etc).
  • Starting tomorrow, we’ll use npm to install the express framework, which simplifies the creation and management of web servers.

2. An introduction to npm

Learning Objectives

Materials

Key Takeaways

  • npm is great but it has a weakness: it’s hosted by a single registry that can go offline. When this happens, it’s impossible to install and update dependencies.

3. Creating npm projects

Learning Objectives

  • Recognize the presence/absence of an npm project.
  • Understand the [anatomy of a package.json file], specifically:
    • name: name of the project
    • main: Entry script filename (i.e. app.js, server.js, etc)
    • scripts: Command line shortcuts
    • dependencies: Project production dependencies
    • devDependencies: Project Development dependencies
  • Initialize a new npm project

Materials

Key Takeaways

  • npm projects are usually in the same root directory as a git repository.
  • Don’t initialize projects within projects.
  • Add node_modules to your .gitignore file to avoid storing needless files in your repository.
  • Commit package.json and package-lock.json to your repository.
  • Don’t manually edit package-lock.json. This is maintained by npm to lock dependencies to specific versions/ranges.
  • Update package.json by the command line (or other tool) unless you’re comfortable editing the file manually.

4. Installing new dependencies

Learning Objectives

  • Evaluate an npm package vs alternatives.
  • Install a package from the npm registry.
  • Import a package into a Node app.

Materials

Key Takeaways

Open lab-time

Activities

  1. Using the internet and the simple http server created earlier today, figure out how to send the requested URL as a response instead of “Hello World”.
  2. Output a fancy date to a web site.
    1. Create a simple http server;
    2. Initialize a new npm project;
    3. Install dayjs as a dependency;
    4. Load dayjs into the http script;
    5. Add a fancy date to the “Hello World” message sent by the server.
  3. Practice downloading dependencies:
    1. Complete the above activity and create an http server with dayjs as a dependency.
    2. Delete your node_modules directory.

    3. Try starting your server. You should get the following error:

       Error: Cannot find module 'module-name'

    4. Download your dependencies:

       $ npm install
    5. Try starting the server again and everything should be amazing.
  4. Confirm you are ignoring the node_modules directory in Git:
    1. Create a new npm project with an installed dependency of your choice.
    2. Initialize a new git repo.
    3. Create a remote repo for this project on GitHub.
    4. Push your local code to the remote.
    5. Confirm that the remote repo does not have a node_modules directory.
  5. Prep for tomorrow: create a new npm project and install express as a dependency.

Tony’s goals for Lab-Time

Dailies

  • Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.