Web Developer Fast Track

Winter 2022

Node Project Management

CPNT-201 Assignment 4

  • Due: Tuesday March 1st @ 11:59PM
  • Objective: Install and set up a NuxtJS instance
  • Goal: Practice using npm packages that come with their own cli for scaffolding a project

Tailwind Follow Up

Breakout Session: Tailwind Practice (15min)

  • Verify working configuration and build scripts
  • Add responsive breakpoints to a tailwind project from last class (sm, md, lg)
  • Add pseudo states

Code Formatting and Linting

  • Code Linter: Used to analyze code for errors and bugs. Can be used to enforce style as well
  • Code Formatter:
  • You can use one or the other, or put them together. But if you use them together, you need to so some extra work to get them to work properly.

Activity: Set up ESLint and Prettier

  • instructions
  • try using with a copy of one of your javascript assignments

NPM Package CLI Setup

  • Learning Objective: common practices with npm packages
  • Activity: scaffold a basic nuxt 2 project using the nuxt-cli

NPX and NPM

A note on yarn

  • yarn
  • You'll see yarn in a lot of documentation. Yarn is another package manager that can be used with npm. node requires npm but you can also install yarn and use it. many developers prefer this. We will be using npm.

Initialize and set up projects

  • Tailwind
  • Nuxt 2
  • Follow steps outlined in the documentation
  • Select from options provided
    • if you're unsure of what the options mean, take a moment to google your options
  • add tailwind nuxt module

NPM Debugging

Know How to Respond to Errors

  • Common NodeJS Errors
  • Some common causes of problems
    • not installing packages
    • not running command from the right directory
    • improperly configured packages
    • package incompatabilities

Activity

  • In pairs, Review errors that you may have come across when setting up nuxt
    • if you did not encounter any errors during setup, try forcing the above noted causes
      1. try to run npm run dev after deleting the node_modules/ folder
      2. try running npm run dev from any folder other than the root of the folder
      3. delete either tailwind.config.js or nuxt.config.js and then try to run a relevant build script

NPM Security Vulnerabilities

Steps to fix vulnerabilities

  1. run audit
  2. check for mitigating factors
  3. update dependencies
  4. fix fulnerabilities

Lab Time

  • Assignment 4 pair setup and work
  • Main Room:
    • Optimizing courses page design
    • Picking next page to enhance
    • Follow up demonstrations of using linting tools

Prep