webpack

[RBleyenberg]

Howdy jokade,

Was waiting for the angular 4 update AWESOME work, and i see you've also implemented webpack.

Now for the questions... do you have a webpack sbt seed template or some readme.txt update on how to go about it ??

Many thanks upfront.

[jokade]

@RBleyenberg sorry for the late response... I've created a preliminary giter template:

g8 jokade/angulate2-seed.g8

or with a recently new sbt version simply:

sbt new jokade/angulate2-seed.g8

Please note: the template currently uses snapshot versions of various projects (I think I've published all of those, but you might need to add the sonatype repo to the build.sbt).

Now, this template uses the Angulate2BundlingPlugin which requires node/npm to be installed. By default, this plugin is configured for using System.js for fastOptJS, and webpack for fullOptJS.

To run the app during development with fastOptJS, compile the project and prepare the System.js config by running

sbt fastOptJS::liteServerPrepare

(on the first run, this will take some time, since all npm dependencies will be installed automatically).

After that you can run the application via: npm run-script fastOptJS

Alternatively you might simply call fastOptJS::liteServerRun from within sbt, but that currently doesn't close the lite-server correctly afterwards (at least on macOS).

As for webpack: this is configured to be used with fullOptJS, i.e.

sbt fullOptJS::webpack

will create the bundle as target/scala-2.11/fullopt/bundle-fullopt.js. Again, you can try it using lite-server by executing fullOptJS::liteServerPrepare in sbt, and then running npm run-script fullOptJS in the terminal.

Compilation of SASS files is also supported, and there a quite a few config options, which I will hopefully be able to document over the next few days. Until then just contact me if you have any questions/problems with the template (you can just use the gitter channel).

[schmitch]

@jokade wouldn't it be better to be more compatible to https://scalacenter.github.io/scalajs-bundler/

[jokade]

@schmitch I know about scalajs-bundler, but that plugin solely focuses on bundling with webpack, whereas I wanted to use System.js as alternative during development (while using the same set of configuration values), add support for other npm build tools (e.g. node-sass) or bundlers, and provide a mechanism for library JAR to specify the npm packages they depend on.

Accomplishing this with scalajs-bundler proved to be somewhat cumbersome, since it doesn't clearly separate between npm dependency management and the actual bundling process (at least this was the case when I initialy tried to do so). That's why I started sbt-node, which is the basis for the Angulate2BundlingPlugin.

However, you still can use scalajs-bundler: just activate the Angulate2Plugin instead of the Angulate2BundlingPlugin.

[schmitch]

The problem is that as soon as I have both plugins added to plugins.sbt. Somebody would get:

build.sbt:24: error: reference to npmDependencies is ambiguous;
it is imported twice in the same scope by
import _root_.de.surfice.sbtnpm.NpmPlugin.autoImport._
and import _root_.scalajsbundler.sbtplugin.ScalaJSBundlerPlugin.autoImport._
      npmDependencies in Compile ++= Seq(
      ^
sbt.compiler.EvalException: Type error in expression
[error] sbt.compiler.EvalException: Type error in expression
[error] Use 'last' for the full log.

Now of course I can prefix everything with the full path, but that starts to get ugly really quickly.

[jokade]

@schmitch Did you activate Angulate2Plugin or Angulate2BundlingPlugin? The former should not result in any conflicts with scalajs-bundler.

[schmitch]

I did not activate any. It came after adding the dependency to plugins.sbt ;)

[jokade]

That's strange, I don't get any conflicts. Which version of angulate do you use?

[schmitch]

Sorry for my late response plugins.sbt:

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.19")
addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.6.3")

// https://scalacenter.github.io/scalajs-bundler/getting-started.html
addSbtPlugin("ch.epfl.scala" % "sbt-web-scalajs-bundler" % "0.7.0")

addSbtPlugin("de.surfice" % "sbt-angulate2" % "0.1.0-RC1")

sbt.version=0.13.16

build.sbt:

lazy val scalaV = "2.12.3"

organization := "com.example"
name := "Hello"
scalaVersion := scalaV

val shared = (crossProject.crossType(CrossType.Pure) in file("shared"))
    .enablePlugins(SbtTwirl)
    .settings(
      sourceDirectories in(Compile, TwirlKeys.compileTemplates) := (unmanagedSourceDirectories in Compile).value,
      scalaVersion := scalaV
    )
    .jsConfigure(_.enablePlugins(ScalaJSWeb))

val sharedJvm = shared.jvm
val sharedJs = shared.js

val client = project.in(file("client"))
    .enablePlugins(ScalaJSBundlerPlugin, ScalaJSWeb, SbtTwirl)
    .settings(
      scalaVersion := scalaV,
      scalaJSUseMainModuleInitializer := true,
      libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.9.1",
      npmDependencies in Compile ++= Seq(
      )
    )
    .dependsOn(sharedJs)

val server = project.in(file("server"))
    .enablePlugins(PlayScala, WebScalaJSBundlerPlugin)
    .disablePlugins(PlayLayoutPlugin)
    .settings(
      libraryDependencies += guice,
      scalaVersion := scalaV,
      scalaJSProjects := Seq(client),
      pipelineStages in Assets := Seq(scalaJSPipeline),
      pipelineStages := Seq()
      // Expose as sbt-web assets some files retrieved from the NPM packages of the `client` project
      // npmAssets ++= NpmAssets.ofProject(client) { modules => (modules / "font-awesome").*** }.value
    )
    .dependsOn(sharedJvm)

val play = project.in(file(".")).aggregate(client, server)

// loads the server project at sbt startup
// onLoad in Global := (Command.process("project server", _: State)) compose (onLoad in Global).value

[jokade]

Could please try using version 0.1.0-RC2 of the plugin?

[schmitch]

yeah I will do sadly at the moment it's not resolveable. I will try tomorrow and edit my post.

[jokade]

@schmitch sorry, forgot to publish RC2 - it should now resolve

[schmitch]

same issue with RC2.

The problem is that I need to set some npmDependencies, and both projects autoImport a key named npmDependencies.

[jokade]

@schmitch OK, I've split off the bundling plugin into a separate ivy artifact in 0.1.0-RC3-SNAPSHOT; could try with that again please?

[schmitch]

at the moment the dependency can't be resolved, on which repository were it uploaded?

[jokade]

It's a Snapshot on sonatype

[schmitch]

yes, this dependency does work and does not have any conflicts. thanks! (now I just need to try integrating the two.)