update vite notes

fjcalzado · fjcalzado · commit a1f1818e1724 · 2025-07-11T21:44:45.000+02:00
diff --git a/03-bundling/06-vite/01-basic/README.md b/03-bundling/06-vite/01-basic/README.md
@@ -131,6 +131,13 @@ Our goal with these series of exercises is to show, step by step, how to configu
 
   or alternatively, to customize server port:
 
+  ```diff
+    "build": "vite build",
+  + "preview": "vite preview --port 1234"
+  ```
+
+  or 
+
   ```bash
   npm run preview -- --port 1234
   ```
@@ -201,7 +208,8 @@ Our goal with these series of exercises is to show, step by step, how to configu
   - Go to `Network` tab and refresh (F5) the app to populate the requests panel (if necessary).
   - Check how your browser is dowloading:
     - Module `index.js`, this is your app only module that containes the code.
-    - Module `client` which is a `vite` runtime to add an overlay on top of your app to give you error feedback. This module imports another one called `env.mjs` for environment variables.
+    - Module `client` which is a `vite` runtime injected by vite dev server to establish websockets communication in order to manage and orchestrate HMT. It also adds an overlay on top of your app to give you error feedback. This module imports another one called `env.mjs` for environment variables.
+    - `env.mjs` is a special module to inject environment variables dynamically in development. However, in production, these variable values are resolved during build time, so, their values are directly injected/replaced in the resulting code after compilation (no dynamic injection is used then).  
   - Reload the app again several times (F5). Now check that modules requests are returning `304 Not modified` so `vite` dev server is telling your browser to grab those modules from its cache. No data is transfered over the network apart from the request response. Cache is working for source code!
   - Now make a new modification in `index.js` to trigger a code update and reload:
     _src/index.js_
diff --git a/03-bundling/06-vite/02-custom-css/README.md b/03-bundling/06-vite/02-custom-css/README.md
@@ -55,22 +55,14 @@ Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they
     </body>
   ```
 
-- Now it's time to check it out! Run the development server:
 
-  ```bash
-  npm start
-  ```
-
-  👍🏼 `vite` supports css out of the box! No need for plugins or configuration.
-
-  🔍 Pay attention to the requests made by your browser, a new `mystyles.css` module is now being requested.
-  You can also check `Elements` tab to see how your new styles are injected in the `<head>` tag.
-
-- Finally, let's check the production bundle as well. Run the build script like this:
+- Let's start checking the result for production. Run the build script like this:
 
   ```bash
   npm run build
   ```
+  
+  👍🏼 `vite` supports css out of the box! No need for plugins or configuration.
 
   🔍 Open file `dist/index.html` and notice how there is a new `<link>` tag created for us to reference the CSS file:
 
@@ -79,3 +71,36 @@ Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they
   ```
 
   🔍 Also notice our CSS file has been renamed to `index-<hash>.css` and its content has been minified.
+
+- Let's run now a preview of the built bundles for production:
+
+  ```bash
+  npm run preview
+  ```
+
+  🔍 Now check the network requests to see how the browser is downloading the new `css` bundle as `index-<hash>.css`. ⚠ Pay attention to the icon of the assets downloaded.
+
+- Now it's time to check it out in development flow:
+
+  ```bash
+  npm start
+  ```
+
+  🔍 Pay attention to the requests made by your browser, a new `mystyles.css` module is now being requested. If you do a change in the css file like:
+
+  ```diff
+  .red-background {
+  + background-color: red;
+  }
+  ```
+
+  Check how now the module has been hot replaced with a new version with the timestamp:
+  `mystyles.css?t=<timestamp>` ... like any other ES module ... wait ... ⚠ look at the icon of the resource downloaded 💥... it is not CSS, it is just another module!
+
+  🔍 Click the resource and check its content:
+  - It contains a runtime made out by utilities imported from `@vite/client` like `updateStyle` and `removeStyle`.
+  - This runtime enables hot-injection of new CSS in the application without having to refresh the whole page. 
+  - It uses HMR APIs to replace styles in the browser, removing the old ones and adding the new ones.
+
+
+  🔍 You can also check `Elements` tab to see how your new styles are injected in the `<head>` tag.
