3f3b21320e
* Moved dist builds to vite, halved dist size * Moved dist builds to vite, halved dist size
2.1 KiB
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):
npm install
3. Daily development, watch mode
Rebuilds ntopng.js automatically on every file save under http_src/:
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
npm run css:lint # SCSS linting (stylelint)
npm run js:lint # JS linting (eslint)