mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-02 17:00:10 +00:00
40 lines
1.8 KiB
Markdown
40 lines
1.8 KiB
Markdown
Introduction
|
|
============
|
|
|
|
ntopng uses `npm` (`Node Package Manager`) to lint, build and minimize CSS, JS and image files. To do it `npm` uses `Webpack` with `Babel` for the JS part and other plugins for the CSS and images minimization and linting.
|
|
All the processed files are added in `httpdocs/dist` directory; the files in that directory SHOULD NOT be modified because they are removed and re-added each time webpack is launched.
|
|
|
|
Install
|
|
-------
|
|
`npm` is a module of NodeJS, so other then `npm`, NodeJS is required to operate with `npm`.
|
|
|
|
`sudo apt-get install nodejs` (in Ubuntu)
|
|
`sudo apt-get install npm` (in Ubuntu)
|
|
|
|
After installing `npm`, all the `npm` modules used by ntopng front-end need to be downloaded.
|
|
|
|
`npm install --save-dev @babel/core`
|
|
`jq -c '.devDependencies' package.json | jq -r -M | grep ':' | sed 's/:/@/' | sed 's|[", ^]||g' | xargs -L1 npm install --save-dev` (Install all the modules read from the `package.json` file).
|
|
|
|
Now all the required packages are ready.
|
|
|
|
Build
|
|
-----
|
|
`npm` has various scripts configured. The main scripts are `build` and `build:dev`.
|
|
`npm run build:dev` should be used while developing (it uses `Webpack` Development mode);
|
|
`npm run build` should be used to push changes in GitHub (it uses `Webpack` Development mode; in GitHub, the files in `httpdocs/docs` should be generated by `npm run build`);
|
|
|
|
Developing
|
|
----------
|
|
Whenever a JS or SCSS file is modified the npm run build should be executed to see the changes in the Web GUI.
|
|
When adding a new JS or SCSS file, the import of that file should be added in one of the following, depending on the role of the file:
|
|
`http_src/utilities/utilities.js`
|
|
`http_src/validators/validators.js`
|
|
`http_src/components/components.js`
|
|
`http_src/services/services.js`
|
|
`http_src/views/views.js`
|
|
`http_src/routes/routes.js`
|
|
|
|
(Check `http_src/components/components.js` as an example).
|
|
|
|
|