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 2023:

• 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.
• Bootstrap for responsive UI components.
• 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.

Note that the default branch of this repository is written in Scala 3. Check out the scala-2.13 branch for a project template in Scala 2.13.

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 references uglified CSS and JS resources.

    • devMod.html

      The main page in development mode, which references 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 a 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.

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/devMod.html to browse the main page.

Release mode build

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

sbt "set scalaJSStage := FullOptStage" assets

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

Test

Run the following command:

sbt test

Then the examples in Scaladoc comments will be ran by ScalaTest.