All-in-One Scala.js Static Web Project Template

This repository is a template of the basic structure for a Scala.js web project, contains all the best technologies in Scala.js community until 2020:

Sbt is the build tool.
Scala.js to compile Scala to JavaScript.
html.scala for reactive HTML templating.
Binding.scala for data-binding.
sbt-sassify for compiling Sass to CSS.
Font Awesome as an example of Sass dependency.
sbt-scala-js-map for source mapping.
scalajs-bundler for webpack and NPM (or YARN).
ScalablyTyped for type definition of NPM dependencies.
pad as an example of NPM dependency.
sbt-web for WebJars.
sbt-buildinfo to expose sbt settings to runtime.
Coursier for fast downloading Maven and ivy dependencies.
sbt-example to generate ScalaTest from from examples in Scaladoc comments.
sbt-dynver to determine the build version from git tags.

Other libraries and tools can be found in sbt settings.

This template contains settings for a static web project, and you can additionally configure Play or Akka HTTP dependencies in web/build.sbt to turn it into a dynamic web project.

Directory Structure

web/

The sbt-web project for web assets
- build.sbt
  
  Sbt settings for the sbt-web project, which contains WebJars dependency configurations, including SASS / SCSS dependencies and static resources from external libraries.
- src/main/assets/
  
  The root directory of static assets sources.
  - index.html
    
    The main page in release mode, which reference uglified version of CSS and JS resources.
  - devMod.html
    
    The main page in development mode, which reference indented CSS and JS resources.
  - style.scss
    
    The style sheet used by main page in SCSS syntax, which will be compiled to style.css by sbt-web pipeline.
- target/web/public/main/
  
  The root directory of static assets output.
  - lib/
    
    The output directory for Webjars dependencies.
js/

The Scala.js project to create JS output used in the sbt-web project.
- build.sbt
  
  Sbt settings for the Scala.js project, which contains Scala.js settings, NPM dependencies and type definitions.
- src/main/scala/
  
  The directory contains Scala.js source files.
project/
- plugins.sbt
  
  Sbt plugins dependencies.
- coursier.sbt
  
  sbt-coursier settings.
- project/
  - plugins.sbt
    
    sbt-coursier settings.

Requirements

Java 8+
Sbt launcher
Node.js or nodenv

How to use this template?

Just clone this repository, and the following sbt tasks are available.

Build

Run the following command:

sbt assets

Then visit web/target/web/public/main/index.html to browse the main page.

Development build

By default, the assets command builds Scala.js in release mode. To build this project in development mode

sbt "set web / scalaJSPipeline / isDevMode := true" assets

Then visit web/target/web/public/main/devMod.html to browse the main page in development mode.

Test