building, running and debugging

Building

Using package.json, we specify two build npm lifecycles that are also "programmed" into the webpack config:

• build: Full production build.

• dev: Development build. Uses sbt fastOptJS

You run them as:

• npm run build

• npm run dev.

The output is in the bin direcotry is cli.js.

Running

You can run the script using bin/cli.js because the cli.js has the shebang header and has been marked executable by webpack.

Debugging

Debugging is much more difficult in a two build-system world. The lag time between builds is large. Some approaches include:

Chained and continuously running build steps

In this approach we can easily chain the build tools using sbt. Since we previously setup a lifecycle step called afterscalajs that only looks for changes in the sbt target directory, we can use that target to run after scala runs:

To run the two build steps once, one after the other:

sbt> ;fastObjJS; postScalaJS

To run them continuously as changes are made in your scala source files can you use:

sbt> ~ ;fastOptJS ;postScalaJS

If you want to detect changes in both your scala and supporting js files, you will want to run sbt and webpack in parallel with sbt focusing on ~fastOptJS and webpack focusing on afterscalajs-watch.

Source file maps are carried throughout including conveying the scalajs basesd source maps into the final, consolidated source maps file located in "bin".

Any colored output from Chalk will not show in the sbt console since the nodejs detection mechanism does not detect that the sbt console is capable of handling color output.

If you want to add an alias for the commands above, you can use sbt:

addCommandAlias("watchit", "~ ;fastOptJS ;postScalaJS")

Using a debugger such as Visual Studio Code

...more here...