From 39af1a9d5dc840a7569c439194f478fef21e6068 Mon Sep 17 00:00:00 2001 From: bidi Date: Wed, 23 Apr 2025 15:54:23 +0300 Subject: [PATCH 1/8] added how to use vite based on the npm commands content Signed-off-by: bidi --- docs/book/v1/how-tos/bundle-static-modules.md | 30 +++++++++++++++++++ docs/book/v1/how-tos/npm-commands.md | 22 -------------- mkdocs.yml | 2 +- 3 files changed, 31 insertions(+), 23 deletions(-) create mode 100644 docs/book/v1/how-tos/bundle-static-modules.md delete mode 100644 docs/book/v1/how-tos/npm-commands.md 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..6475d6f --- /dev/null +++ b/docs/book/v1/how-tos/bundle-static-modules.md @@ -0,0 +1,30 @@ +# Bundle Static Modules + +Vite 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 `npm install` fails, this could be caused by user permissions of npm. +Recommendation is to install npm through `Node Version Manager`. + +The build command compiles the components then monitors the source files and triggers their recompilation when one of them is changed: + +```shell +npm run build +``` + +To review the project via Vite, you can use this command that starts the PHP server on port 8080: + +```shell +npm run preview +``` +The above command executes `php -S 0.0.0.0:8080 -t public`, with the added benefit that it refreshes the page whenever a recompilation is completed. 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 From b2c26e720ea106ed240a5263497d72797e25aa3b Mon Sep 17 00:00:00 2001 From: bidi Date: Wed, 23 Apr 2025 16:13:13 +0300 Subject: [PATCH 2/8] linting fixes Signed-off-by: bidi --- docs/book/v1/how-tos/bundle-static-modules.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/book/v1/how-tos/bundle-static-modules.md b/docs/book/v1/how-tos/bundle-static-modules.md index 6475d6f..ba536d1 100644 --- a/docs/book/v1/how-tos/bundle-static-modules.md +++ b/docs/book/v1/how-tos/bundle-static-modules.md @@ -27,4 +27,5 @@ To review the project via Vite, you can use this command that starts the PHP ser ```shell npm run preview ``` + The above command executes `php -S 0.0.0.0:8080 -t public`, with the added benefit that it refreshes the page whenever a recompilation is completed. From b51ec8b96c0af1f35da6d2c6df82f8634ff4a51b Mon Sep 17 00:00:00 2001 From: bidi Date: Mon, 28 Apr 2025 17:52:56 +0300 Subject: [PATCH 3/8] updated how to use vite page Signed-off-by: bidi --- docs/book/v1/how-tos/bundle-static-modules.md | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/docs/book/v1/how-tos/bundle-static-modules.md b/docs/book/v1/how-tos/bundle-static-modules.md index ba536d1..be84c15 100644 --- a/docs/book/v1/how-tos/bundle-static-modules.md +++ b/docs/book/v1/how-tos/bundle-static-modules.md @@ -1,6 +1,6 @@ # Bundle Static Modules -Vite is a frontend dev tool we use: +[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 @@ -12,9 +12,9 @@ First you need to install dependencies into the `node_modules` directory by runn ```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`. +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 build command compiles the components then monitors the source files and triggers their recompilation when one of them is changed: @@ -22,6 +22,18 @@ The build command compiles the components then monitors the source files and tri npm run build ``` +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 folders and the three initial files in the public folder will be left as is. + To review the project via Vite, you can use this command that starts the PHP server on port 8080: ```shell From 5b5eaa084d856f0f0c070b48fcf9961dac912b4b Mon Sep 17 00:00:00 2001 From: bidi Date: Mon, 28 Apr 2025 18:10:22 +0300 Subject: [PATCH 4/8] fixed linting Signed-off-by: bidi --- docs/book/v1/how-tos/bundle-static-modules.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/book/v1/how-tos/bundle-static-modules.md b/docs/book/v1/how-tos/bundle-static-modules.md index be84c15..053d0ae 100644 --- a/docs/book/v1/how-tos/bundle-static-modules.md +++ b/docs/book/v1/how-tos/bundle-static-modules.md @@ -12,6 +12,7 @@ First you need to install dependencies into the `node_modules` directory by runn ```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`. @@ -29,10 +30,10 @@ Initially, Vite is configured to delete and rebuild the contents of these folder - images - js -The folders are populated from their counterparts in `src/App/assets`. +The folders are populated from their counterparts in `src/App/assets`. > Make sure to not edit anything inside the four public folders manually. -> Other folders and the three initial files in the public folder will be left as is. +> Other folders and the three initial files in the public folder will be left as is. To review the project via Vite, you can use this command that starts the PHP server on port 8080: From 284616d0b85ad773edbcc833f9691c4f88a5381d Mon Sep 17 00:00:00 2001 From: bidi Date: Tue, 29 Apr 2025 12:18:28 +0300 Subject: [PATCH 5/8] updated bundle modules page Signed-off-by: bidi --- docs/book/v1/how-tos/bundle-static-modules.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/book/v1/how-tos/bundle-static-modules.md b/docs/book/v1/how-tos/bundle-static-modules.md index 053d0ae..f1f28fb 100644 --- a/docs/book/v1/how-tos/bundle-static-modules.md +++ b/docs/book/v1/how-tos/bundle-static-modules.md @@ -1,5 +1,7 @@ # 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. From 8c526cabb4b37a1f2468e2e1d1f7678da0e02c24 Mon Sep 17 00:00:00 2001 From: bidi Date: Tue, 29 Apr 2025 12:24:54 +0300 Subject: [PATCH 6/8] updated bundle modules page Signed-off-by: bidi --- docs/book/v1/how-tos/bundle-static-modules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/book/v1/how-tos/bundle-static-modules.md b/docs/book/v1/how-tos/bundle-static-modules.md index f1f28fb..92ccd44 100644 --- a/docs/book/v1/how-tos/bundle-static-modules.md +++ b/docs/book/v1/how-tos/bundle-static-modules.md @@ -25,7 +25,7 @@ The build command compiles the components then monitors the source files and tri npm run build ``` -Initially, Vite is configured to delete and rebuild the contents of these folders from the `public` folder': +Initially, Vite is configured to delete and rebuild the contents of these folders from the `public` folder: - css - fonts From 24a36adc39aa780ca8154b5a78b23ec651e0f61c Mon Sep 17 00:00:00 2001 From: bidi Date: Tue, 29 Apr 2025 12:42:32 +0300 Subject: [PATCH 7/8] updated bundle modules page Signed-off-by: bidi --- docs/book/v1/how-tos/bundle-static-modules.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/book/v1/how-tos/bundle-static-modules.md b/docs/book/v1/how-tos/bundle-static-modules.md index 92ccd44..8fc4183 100644 --- a/docs/book/v1/how-tos/bundle-static-modules.md +++ b/docs/book/v1/how-tos/bundle-static-modules.md @@ -35,12 +35,4 @@ Initially, Vite is configured to delete and rebuild the contents of these folder The folders are populated from their counterparts in `src/App/assets`. > Make sure to not edit anything inside the four public folders manually. -> Other folders and the three initial files in the public folder will be left as is. - -To review the project via Vite, you can use this command that starts the PHP server on port 8080: - -```shell -npm run preview -``` - -The above command executes `php -S 0.0.0.0:8080 -t public`, with the added benefit that it refreshes the page whenever a recompilation is completed. +> Other files and folders in the public folder will be left as is. From b93737dd280b2c883cf89889c3e8d491672e27c9 Mon Sep 17 00:00:00 2001 From: bidi Date: Tue, 29 Apr 2025 12:57:55 +0300 Subject: [PATCH 8/8] updated bundle modules page Signed-off-by: bidi --- docs/book/v1/how-tos/bundle-static-modules.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/book/v1/how-tos/bundle-static-modules.md b/docs/book/v1/how-tos/bundle-static-modules.md index 8fc4183..fc1ccda 100644 --- a/docs/book/v1/how-tos/bundle-static-modules.md +++ b/docs/book/v1/how-tos/bundle-static-modules.md @@ -19,10 +19,10 @@ If everything ran ok, you should see a new root folder named `node_modules` wher If `npm install` fails, this could be caused by user permissions for npm. Our recommendation is to install npm through `Node Version Manager`. -The build command compiles the components then monitors the source files and triggers their recompilation when one of them is changed: +The `watch` command compiles the components then monitors the source files and triggers their recompilation when one of them is changed: ```shell -npm run build +npm run watch ``` Initially, Vite is configured to delete and rebuild the contents of these folders from the `public` folder: @@ -36,3 +36,9 @@ 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 +```