Skip to content

Web Application

User Interface

The human's view of a computer

Formally: The place where a person expresses intention to an artifact, and the artifact presents feedback to the person.

Model-View-Controller (MVC)

Early Web Apps

  • Model on server sends webpage to browser to render the View
  • Controller in browser sends user events to Model on server
    • click on hyperlink, submit form, etc.
  • Model processes changes, then sends new webpage to browser ...

image.png

Single Page Application

  • Browser handles full MVC cycle with data persisted on a server
  • Model can request server data/processing too (e.g. Web APIs)

image.png

npm

Common npm usage

  • Initialize Node project

    npm init # Starts a basic Node.js project
# or
npm create  # alias for init (used with Vite), Bootstraps a project via a template

  • Install a package from the npm registry

    npm install <package>
# or
npm i <package>

    Options:

    --save-dev  # install as dev dependency
-g          # install globally

  • Run a script

    npm run <script-name>

  • List installed packages

    npm list
# or
npm list -g  # list global packages

  • List outdated packages

    npm outdated
# (returns nothing if up-to-date)

  • Update a package

    npm update <package>
# or
npm up <package>

Node Project Files

package.json

  • Lists all packages installed in the project.
  • Every npm install adds to this file, including dependencies.

  • Contains metadata to re-create the installed packages:

    node init  # if package.json exists, installs all packages

package-lock.json

  • Records exact versions of packages to more precisely reproduce /node_modules.

node_modules/

  • Can become very large with thousands of small files.
  • 🔥 Important: Must be ignored in .gitignore
  • Avoid syncing it to services like Dropbox or Google Drive.

  • Safe to delete and regenerate:

    npm install  # re-installs all packages based on package.json and package-lock.json

npx

npx Usage

  • Used to execute a command from an npm package (either locally installed or fetched remotely).
  • Equivalent context to using npm exec.

Example

npx some-package

  • If some-package is in your path (i.e., already installed with npm),

    → it runs the local version.

  • If some-package is not in your path (i.e., not installed),

    → it downloads the latest version and runs it.

Vite

Setup Vite project by choosing name and templates interactively:

npm create vite@latest

Can also provide project name and template in command args. For example,

npm create vite@latest hello-vite -- --template vanilla-ts
  • npm create initializes a project directory using a "create" package.
  • vite in this context refers to the create-vite package.
  • @latest means "use the latest version" of the create-vite package.

Vite Project Setup Demo

Create project with Vanilla TypeScript template

npm create vite@latest

Run Vite dev server

npm run dev

Examine Vite project structure

  • index.html, especially <script type="module"> ...
  • src/ directory

Show how to create a “clean” project:

  • Simplify index.html
  • Remove demo files from src/ folder:
    • counter.ts
    • style.css
    • typescript.svg
    • vite-env.d.ts
  • Clear contents of main.ts