Introduction to npm, npx, NodeJS and React

This page introduces npm, webpack, jest and NodeJS to a Lino developer who wants to help improving the React front end. Lino’s React front end is made using these tools.

The tools

• React is a “library for web and native user interfaces”.

• Node.js is a cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

• npm is a software package manager originally developed for JavaScript packages to be run with Node.js, but also used for other programming languages. It is an interface to the npm repository. It allows JavaScript developers to share packages quickly and easily. It is also a build tool. npx is the Node package runner.

• webpack is a static module bundler for modern JavaScript applications.

• electron is “an all-in-one tool for packaging and distributing Electron applications. It combines many single-purpose packages to create a full build pipeline that works out of the box, complete with code signing, installers, and artifact publishing.”

• Babel is a JavaScript compiler.

• TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

• Jest is a JavaScript testing framework.

External resources

Introductions to npm:

• The Basics: Getting started with npm

• What Is NPM (Node Package Manager)?

• https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/

• npm vs npx — What’s the Difference?

Introductions to Webpack:

• Getting Started and Core Concepts.

Introductions to React and JSX:

• Learn React > Quick Start

• Writing Markup with JSX

• JavaScript in JSX with Curly Braces

• The export declaration.

• Export and Import

• https://www.freecodecamp.org/news/react-beginner-handbook/

• https://jestjs.io/docs/getting-started

• https://jestjs.io/docs/webpack

• https://webpack.js.org/guides/code-splitting/

Creating your own packages

npm packages must contain at least a file named package.json, which must exist in their top-level directory. This file can be generated by npm init and later edited manually. But there is a tool that creates a whole package with a working react app, including a package.json:

$ npx create-react-app myapp

It is an npm package, but it isn’t

The React front end for Lino repository is an npm package because it has a package.json file, but we don’t publish it on the npm repository. That’s not needed because everything needed to run a Lino site with the React front end is made available as Django static files inside the Python package (published on PyPI as lino-react). The whole source code is published on GitLab. You need npm and node only for developing Lino’s React front end, not for using it.

React framework

TODO: Does Lino use a React framework? Seems that not.

https://react.dev/learn/start-a-new-react-project

Lino React files reference

package.json

Any project that uses Node.js needs to have a package.json file.

The package.json of an npm project lists the packages it depends on, contains information about its unique source control and specific metadata like the project’s name, description, and author.

The npm package description for lino_react.

The package.json for lino_react mainly defines a few “scripts” (i.e. commands):

"scripts": {
  "debug": "webpack --mode none ",
  "dev": "webpack --mode development",
  "build": "webpack --mode production",
  "build_css": "node_modules/node-sass-chokidar/bin/node-sass-chokidar ./lino_react/react/components/layout -o ./lino_react/react/components/layout",
},

The commands debug, dev and build create the main.js file. They are very similar, their only difference is the –mode option, which tells webpack to use its built-in optimizations accordingly.

webpack is a tool that bundles all the “assets” into a set of deployable files (.js, .css etc). We use it to compile the index.js file into the main.js file.

Our build_css script compiles scss files to css files. We need to run it only after changing one of our scss files which are located in lino_react/react/components/layout.

build_css runs node-sass-chokidar, which is a “thin wrapper around node-sass executable to use chokidar instead of Gaze when watching files.” Node-sass is “a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.”

webpack.config.js

Our configuration file for webpack. TODO: what does it do?

lino_react/react/index.js

The entry point for webpack. Contains a single line of code:

import App from "./components/App";

react/main.js

A generated file is in lino_react/react/static

It contains a lot of generated and compressed JS code.

It is quite big and therefore causes webpack to issue a warning:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main.js (1.24 MiB)

jest-puppeteer.config.js

forge.config.js

package-lock.json

TODO

node_modules/

TODO

Troubleshoot issues with Node.js and npm

How to see which version you have:

$ npm -v
10.8.2
$ node -v
v20.17.0

Some issues might be caused by version conflicts caused by earlier installation attempts on your machine. Here is how to restart from scratch:

$ go react
$ rm -rf node_modules
$ rm package-lock.json
$ npm install

Not sure when this is useful:

$ npm cache clean --force

Seems that it’s important to do the following setting:

npm config set legacy-peer-deps true

(I had issues with dependencies, found this discussion on SO and after setting it my issues were gone)