Outwatch Frontend Example

A github-template for outwatch.

Technologies used:

• Outwatch functional web-frontend library
• Scala 3 programming language, compiled to javascript using ScalaJS
• Mill build tool
• Vite hot reloading and bundling
• devbox for a reproducible dev environment
• direnv to automatically load dev environment when entering project directory

Getting Started

1. Setup on your system:

   • devbox
   • direnv

   If you don't want to spend the time to setup those, skip to the manual setup section.

2. Clone the example

   # if you want to just get the template locally without creating a github repo:
   git clone --depth 1 https://github.com/outwatch/example-mill-vite my-first-outwatch-project
   
   # OR: create new repo on github based on this template (using github-cli)
   gh repo create my-first-outwatch-project --template outwatch/example-mill-vite --public --clone
   
   
   cd my-first-outwatch-project

3. Allow direnv to enter the dev environment when entering the project directory

   direnv allow

   Which will load .envrc and install the packages from devbox.json.

4. Start the dev server

   devbox services up

   The services are defined in process-compose.yml.

5. Point your browser to http://localhost:5173

6. Edit FrontendMain.scala to see hot reloading.

7. Production build:

   mill frontend.fullLinkJS && npx vite build

Manual Setup without devbox or direnv

1. Install:
   • Mill
   • NodeJS (provides npm)
2. Run:

   npm install
   
   # for automatically recompiling Scala sources to Javascript
   mill --watch frontend.fastLinkJS
   
   # in another terminal
   # to start the devserver with hot reloading
   npx vite dev

3. Point your browser to http://localhost:5173
4. Edit FrontendMain.scala to see hot reloading.