Trying to understand npm for frontend development

Question

I'm self-teaching Javascript/Node development. I understand how npm installs packages for the Node app which runs on the server. What I can't wrap my head around is how npm helps me with the frontend, e.g. if I npm install leaflet I install it on the server side, in the Node app, right? How does that help me with the frontend then?

Answer 1

What I can't wrap my head around is how npm helps me with the frontend,

Many modules available through npm will work on the client-side.

Using a package manager like npm allows you to track which modules you are using (they are recorded in package.json, get security updates (npm audit) and upgrade them (npm install foo@latest).

A bundler such as Webpack, Parcel, Browserify, or Rollup will take your JS (which uses ES6 or CommonJS modules) and follow the dependencies (i.e. what you import or require) to the installed modules from NPM and bundle everything up into a file (or files) suitable for running in a browser.

Generally you will build a toolchain that doesn't just bundle JS modules but also runs linting, converts SASS to CSS, generates different versions of image files (for use with srcset) and so on.

e.g. if I npm install leaflet I install it on the server side, in the Node app, right? How does that help me with the frontend then?

Note that this happens during development (usually with hot reloading) and at at build time (often in a CI system) and not on demand (so it doesn't run server-side).