diff --git a/docs/book/v1/how-tos/bundle-static-modules.md b/docs/book/v1/how-tos/bundle-static-modules.md new file mode 100644 index 0000000..fc1ccda --- /dev/null +++ b/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 +``` diff --git a/docs/book/v1/how-tos/npm-commands.md b/docs/book/v1/how-tos/npm-commands.md deleted file mode 100644 index 9f65f14..0000000 --- a/docs/book/v1/how-tos/npm-commands.md +++ /dev/null @@ -1,22 +0,0 @@ -# NPM Commands - -To install dependencies into the `node_modules` directory run this command. - -```shell -npm install -``` - -If `npm install` fails, this could be caused by user permissions of npm. -Recommendation is to install npm through `Node Version Manager`. - -The watch command compiles the components then watches the files and recompiles when one of them changes: - -```shell -npm run watch -``` - -When you are done making changes to your code, this command compiles the assets locally, minifies them and makes them ready for production: - -```shell -npm run prod -``` diff --git a/mkdocs.yml b/mkdocs.yml index e7cf3d1..69ab7ea 100644 --- a/mkdocs.yml +++ b/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