Frontend Development (Javascript/Vue/CSS)

The ntopng frontend is compiled with Vite. All source lives in http_src/ and assets/; the compiled output goes to httpdocs/dist/ and must be committed alongside code changes.

1. Prerequisites

Node.js ≥ 18.15.0 is required.

2. Install dependencies

Run once after cloning (or after package.json changes):

bash

npm install

3. Daily development, watch mode

Rebuilds ntopng.js automatically on every file save under http_src/:

bash

npm run watch

Watch mode rebuilds only the Vue app bundle (ntopng.js + ntopng.css). Run npm run build once first to produce third-party.js, CSS themes, images, and login.js — watch mode then preserves those files between rebuilds.

4. Build commands

Command	When to use
`npm run build`	Full production build (JS + CSS + assets, minified)
`npm run build:dev`	Full development build (unminified, with sourcemaps)
`npm run build:ntopngjs`	Rebuild `ntopng.js` only (fast, preserves rest of dist)

All commands output to httpdocs/dist/. Commit the dist output before opening a pull request.

5. What gets built

npm run build / npm run build:dev runs build.mjs which executes five sequential Vite passes, each producing a self-contained IIFE:

Output file	Source
`third-party.js` + `third-party.css`	`assets/third-party.js` (jQuery, Bootstrap, DataTables, …)
`ntopng.js` + `ntopng.css`	`http_src/ntopng.js` (Vue app + SCSS)
`dark-mode.css` / `white-mode.css` / `custom-theme.css`	Theme SCSS files
`images/flags.png`, `images/blank.gif`, etc.	`assets/images/images.js`
`login.js`	`assets/scripts/login.js` (particle animation)

All bundles are plain IIFEs loaded as type="application/javascript" (classic blocking scripts). third-party.js must load first — it sets window.$, window.moment, and other globals that ntopng.js depends on.

6. Linting

bash

npm run css:lint   # SCSS linting (stylelint)
npm run js:lint    # JS linting (eslint)