Merge pull request #16 from melange-re/vite

Migrate from Webpack to Vite

Makefile

@@ -1,10 +1,5 @@
 project_name = melange-for-react-devs
 
-# Set default value for app if it's not present
-ifndef app
-	app := counter
-endif
-
 DUNE = opam exec -- dune
 
 .DEFAULT_GOAL := help
@@ -40,11 +35,11 @@ build_verbose: ## Build the project
 
 .PHONY: serve
 serve: ## Serve an application using a local HTTP server
-	npx webpack serve --open --mode development --entry ./_build/default/src/$(app)/output/src/$(app)/Index.js
+	npx vite serve --open
 
 .PHONY: bundle
 bundle: ## Bundle the JavaScript application
-	npx webpack --mode production --entry ./_build/default/src/$(app)/output/src/$(app)/Index.js
+	npx vite build
 
 .PHONY: clean
 clean: ## Clean build artifacts and other generated files

docs/better-sandwiches/index.md

@@ -169,22 +169,51 @@ function:
 Unlike `{j||j}` quoted string literals, `Printf.sprintf` will not do implicit
 string conversion.
 
-::: info
-
-Be aware that using functions from the `Printf` module can add a surprising
-amount to your app's production bundle size. For the app in this chapter, the
-size of `main.js` generated by Webpack went from 144.2 kB (using
-`Js.Array.joinWith`) to 189.4 kB (using `Printf.sprintf`), an increase of about
-45 kB (uncompressed).
+## Bundling
+
+An unfortunate downside of the `Printf` module is that using it can add a
+surprising amount to your app's production bundle size. Let's generate a bundle
+to see just how much of a difference it makes. However, since this is a
+[multi-page app](https://vitejs.dev/guide/build#multi-page-app), Vite won't
+automatically build bundles for `index.html` files that aren't in the project's
+root directory. You must add a little extra configuration to `vite.config.js`:
+
+```javascript{1,12-18}
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+
+export default defineConfig({
+  plugins: [nodeResolve()],
+  server: {
+    watch: {
+      ignored: ['**/_opam']
+    }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        order_confirmation: resolve(__dirname, 'src/order-confirmation/index.html'),
+      },
+    },
+  },
+});
+```
 
-You can see for yourself by running this in the project's root directory:
+Now run `make bundle` again and you should see some output like this:
 
-```bash
-app=better-sandwiches make bundle
-du -h dist/main.js
+```bash{5}
+vite v5.0.11 building for production...
+✓ 61 modules transformed.
+dist/src/order_confirmation/index.html         0.35 kB │ gzip:  0.24 kB
+dist/assets/order_confirmation-14ani3dg.css    0.27 kB │ gzip:  0.18 kB
+dist/assets/order_confirmation-2_8a7RSk.js   190.13 kB │ gzip: 57.85 kB
+✓ built in 1.20s
 ```
 
-:::
+You can see that the JS bundle for the Order Confirmation app is 190 kB. If you
+change `Item.toEmoji` back to use `Js.Array.joinWith`, the bundle size will be
+144 kB, about 46 kB smaller.
 
 ---
 
@@ -271,6 +300,8 @@ documentation](https://melange.re/v2.2.0/api/re/melange/Stdlib/Printf/index.html
 - `{j||j}` quoted string literals are similar to JavaScript's template literals,
   but they are not type safe and should be avoided in production code
 - `Print.sprintf` is a type-safe function for string interpolation
+- For Vite multi-page apps, you must add a little extra configuration to build
+  bundles for `index.html` files not in the project's root directory
 
 ## Solutions
 

docs/counter/index.md

@@ -8,10 +8,10 @@ We're going build the classic frontend starter app, the counter, using
 [melange-for-react-devs-template](https://github.com/melange-re/melange-for-react-devs-template)
 project
 1. Run `make watch` to start the Melange compiler in watch mode.
-1. In another terminal window, start the Webpack dev server by running `make
+1. In another terminal window, start the Vite dev server by running `make
 serve`. As a side effect, it will open a browser tab pointed to
-<a href="http://localhost:8080/" target="_blank" rel="noreferrer
-noopener">http://localhost:8080/</a>.
+<a href="http://localhost:5174/" target="_blank" rel="noreferrer
+noopener">http://localhost:5174/</a>.
 
 ## The `App` component
 

docs/installation/index.md

@@ -57,8 +57,8 @@ make serve
 While `make init` is running, consider grabbing some coffee or other beverage,
 as it might take a while to fetch all the dependencies and build them. The last
 command, `make serve`, should open a tab in your default browser which points to
-<a href="http://localhost:8080/" target="_blank" rel="noreferrer
-noopener">http://localhost:8080/</a> and shows you a typical "Hello World" page.
+<a href="http://localhost:5174/" target="_blank" rel="noreferrer
+noopener">http://localhost:5174/</a> and shows you a typical "Hello World" page.
 If you see this page, then the project was successfully installed!
 
 ## Visual Studio Code Extension