diff --git a/_data/doc.yml b/_data/doc.yml index 5d9501a..9b0430e 100644 --- a/_data/doc.yml +++ b/_data/doc.yml @@ -3,8 +3,10 @@ - text: Tutorials url: /doc/tutorial/ subitems: - - text: Getting Started with Scala.js and Vite + - text: Getting Started with Scala.js and Vite using SBT url: /doc/tutorial/scalajs-vite.html + - text: Getting Started with Scala.js and Vite using Mill + url: /doc/tutorial/scalajs-vite-mill.html - text: Build UIs with Laminar url: /doc/tutorial/laminar.html - text: Integrate JavaScript libraries with ScalablyTyped diff --git a/doc/tutorial/index.md b/doc/tutorial/index.md index 0bb34d1..0565999 100644 --- a/doc/tutorial/index.md +++ b/doc/tutorial/index.md @@ -13,12 +13,15 @@ Each tutorial starts with a link to a repo that you can clone to get off the gro In any case, make sure that you have the prerequisites listed below covered. -1. [Scala.js and Vite](./scalajs-vite.html): +1. [Scala.js and Vite using SBT](./scalajs-vite.html): * Set up a hello world project ready for live reloading in the browser. * Generate minimized production assets. -2. [Laminar](./laminar.html): +1. [Scala.js and Vite using Mill](./scalajs-vite-mill.html): + * Set up a hello world project ready for live reloading in the browser. + * Generate minimized production assets. +1. [Laminar](./laminar.html): * Build UIs with Laminar using Functional Reactive Programming (FRP), a hybrid model between imperative and functional programming particularly well suited for UI development in Scala. -3. [ScalablyTyped](./scalablytyped.html): +1. [ScalablyTyped](./scalablytyped.html): * Integrate JavaScript libraries using ScalablyTyped. ## Prerequisites diff --git a/doc/tutorial/scalajs-vite-mill.md b/doc/tutorial/scalajs-vite-mill.md new file mode 100644 index 0000000..d98b798 --- /dev/null +++ b/doc/tutorial/scalajs-vite-mill.md @@ -0,0 +1,349 @@ +--- +layout: doc +title: Getting Started with Scala.js and Vite using Mill +--- + +In this first tutorial, we learn how to get started with Scala.js and [Vite](https://vitejs.dev/). +We use Vite to provide live-reloading of the Scala.js application in the browser for development. +We also configure it to build a minimal bundle for production. + +Going through this tutorial will make sure you understand the basic building blocks. +If you prefer to skip this step and directly write Scala.js code, you may jump to [Getting Started with Scala.js and Laminar](./laminar.html). + +If you prefer to look at the end result for this tutorial directly, checkout [the scalajs-vite-end-state branch](https://github.com/sjrd/scalajs-sbt-vite-laminar-chartjs-example/tree/scalajs-vite-end-state) instead of creating everything from scratch. + +## Prerequisites + +Make sure to install [the prerequisites](./index.html#prerequisites) before continuing further. + +## Vite template + +We bootstrap our setup using the vanilla Vite template. +Navigate to a directory where you store projects, and run the command + +{% highlight shell %} +$ npm create vite@4.1.0 +{% endhighlight %} + +Choose a project name (we choose `livechart`). +Select the "Vanilla" framework and the "JavaScript" variant. +Our output gives: + +{% highlight shell %} +$ npm create vite@4.1.0 +Need to install the following packages: + create-vite@4.1.0 +Ok to proceed? (y) +✔ Project name: … livechart +✔ Select a framework: › Vanilla +✔ Select a variant: › JavaScript + +Scaffolding project in .../livechart... + +Done. Now run: + + cd livechart + npm install + npm run dev +{% endhighlight %} + +As instructed, we follow up with + +{% highlight shell %} +$ cd livechart +$ npm install +[...] +$ npm run dev + + VITE v4.1.4 ready in 156 ms + + ➜ Local: http://localhost:5173/ + ➜ Network: use --host to expose + ➜ press h to show help +{% endhighlight %} + +Open the provided URL to see the running JavaScript-based hello world. + +### Exploring the template + +In the generated folder, we find the following relevant files: + +* `index.html`: the main web page; it contains a `