Vite page

docs/book/v1/how-tos/bundle-static-modules.md

@@ -0,0 +1,44 @@
+# Bundle Static Modules
+
+> Prerequisite software: Node.js v20 (minimum supported version)
+
+[Vite](https://vite.dev/) is a frontend dev tool we use:
+
+- To avoid network bottlenecks that can occur when your application has a lot of separate scripts and style sheets.
+- To concatenate and compress (uglify) `.css` and `.js` files
+- To preprocess `.scss` files into `.css`.
+- To copy the `fonts` and `images` used in your project, from the `assets` folder to the `public` folder.
+
+First you need to install dependencies into the `node_modules` directory by running this command:
+
+```shell
+npm install
+```
+
+If everything ran ok, you should see a new root folder named `node_modules` where all the npm packages are installed.
+If `npm install` fails, this could be caused by user permissions for npm.
+Our recommendation is to install npm through `Node Version Manager`.
+
+The `watch` command compiles the components then monitors the source files and triggers their recompilation when one of them is changed:
+
+```shell
+npm run watch
+```  
+
+Initially, Vite is configured to delete and rebuild the contents of these folders from the `public` folder:
+
+- css
+- fonts
+- images
+- js
+
+The folders are populated from their counterparts in `src/App/assets`.
+
+> Make sure to not edit anything inside the four public folders manually.
+> Other files and folders in the public folder will be left as is.
+
+An alternative to the `watch` command is `build` which simply compiles the components, overwriting as needed:
+
+```shell
+npm run build
+```

mkdocs.yml

@@ -20,7 +20,7 @@ nav:
           - "Running the Application": v1/installation/running-the-application.md
           - "FAQ": v1/installation/faq.md
       - How to:
-          - "Use NPM Commands": v1/how-tos/npm-commands.md
+          - "Bundle Static Modules": v1/how-tos/bundle-static-modules.md
           - "Routing": v1/how-tos/routing.md
           - "Create Pages": v1/how-tos/create-pages.md
           - "Set Up Twitter and OpenGraph Cards": v1/how-tos/twitter-opengraph-cards.md