Importing assets from an NPM Package

Question

Say I want to include font-awesome in my webapp. So I define my build.sbt as follows:

val commonSettings = Seq(
    name := "repro",
    version := "1.0",
    scalaVersion := "2.12.8",
    unmanagedSourceDirectories in Compile +=
        baseDirectory.value / ".." / "shared" / "src" / "main" / "scala"
)
val client = project.in(file("client"))
    .settings(commonSettings: _*)
    .settings(
        npmDependencies in Compile ++= Seq(
            "font-awesome" -> "4.7.0",
        ),

    mainClass in Compile := Some("app.App"),

    scalaJSUseMainModuleInitializer := true,

    webpackBundlingMode := BundlingMode.LibraryOnly(),
)
.enablePlugins(ScalaJSPlugin)
.enablePlugins(ScalaJSBundlerPlugin)

val server = project.in(file("server"))
.settings(commonSettings: _*)
.settings(
    npmAssets ++= NpmAssets.ofProject(client) { nodeModules =>
        (nodeModules / "font-awesome").allPaths
    }.value
)
.enablePlugins(WebScalaJSBundlerPlugin)

Can I configure this project so that my "package" command will then include the css in my target/webapp folder? Or is there another command I have to use?

Answer 1

In addition to your configuration, you have to add the following settings to the server project:

.settings(
    scalaJSProjects := Seq(client),
    pipelineStages in Assets := Seq(scalaJSPipeline),
    managedClasspath in Runtime += (packageBin in Assets).value,
    WebKeys.packagePrefix in Assets := "public/"
)

The first line introduces a dependency between the server project and the assets produced by the client project. The scalaJSProjects settings is introduced by the sbt-web-scalajs plugin.

The second line integrates the assets produced by the client project into the Web assets managed by sbt-web.

The third line tells sbt to include the assets produced by the sbt-web plugin to the classpath of the server.

The last line is optional, it simply puts the produced assets into the public/ resource directory, so that they are not mixed with other classpath resources which are not meant to be exposed to the outside world.

With this configuration, you can build the production assets with the following command:

> server/web-assets:package

Or, from a build file, by using the packageBin in Assets task.

This will produce a target/scala-2.12/repro_2.12-1.0-web-assets.jar file containing the JavaScript bundle produced by Webpack on your client project, as well as the font-awesome/ directory.