Frontend to Backend: Everything is on Scala using Play, Scala.js and ScalaCSS
Published in
2 min readMay 1, 2016
In my previous post, I tried to create a pure front-end application using Scala.js and ScalaCSS. So that we can build our front-end also in a typesafe way. But there was no server interaction.
This time I have tried to make server interaction using play framework. Since this application is about Weather Information System, so I am hitting a third party api to get weather information. I have taken help from play-with-scalajs-example to integrate scala.js with play.
Here is a sample of build.sbt:
lazy val server = (project in file("server")).settings(
scalaVersion := scalaV,
cpdSettings,
scalaJSProjects := clients,
pipelineStages := Seq(scalaJSProd, gzip),
resolvers += "scalaz-bintray" at "https://dl.bintray.com/scalaz/releases",
scalacOptions ++= Seq("-deprecation", "-Xlint","-feature"),
libraryDependencies ++= Seq(
"com.vmunier" %%% "play-scalajs-scripts" % "0.3.0",
"org.scalaj" % "scalaj-http_2.11" % "2.3.0"
)
).enablePlugins(PlayScala).
aggregate(clients.map(projectToRef): _*).
dependsOn(sharedJvm)lazy val client = (project in file("client")).settings(
scalaVersion := scalaV,
cpdSettings,
persistLauncher := true,
persistLauncher in Test := false,
scalacOptions ++= Seq("-deprecation", "-Xlint"),
libraryDependencies ++= Seq(
"org.scala-js" %%% "scalajs-dom" % "0.9.0",
"be.doeraene" %%% "scalajs-jquery" % "0.9.0",
"com.lihaoyi" %%% "scalatags" % "0.5.4",
"com.github.japgolly.scalacss" %%% "ext-scalatags" % "0.4.0",
"com.github.japgolly.scalacss" %%% "core" % "0.4.0"
),
jsDependencies +=
"org.webjars" % "jquery" % "2.1.4" / "2.1.4/jquery.js",jsDependencies += RuntimeDOM,// uTest settings
libraryDependencies += "com.lihaoyi" %%% "utest" % "0.3.0" % "test",
testFrameworks += new TestFramework("utest.runner.Framework")
).enablePlugins(ScalaJSPlugin, ScalaJSPlay).
dependsOn(sharedJs)lazy val shared = (crossProject.crossType(CrossType.Pure) in file("shared")).
settings(scalaVersion := scalaV).
jsConfigure(_ enablePlugins ScalaJSPlay)
Now I am interacting with server to hit Weather api to get information and send response to client to be rendered on screen.I have used ScalaTags, which is HTML construction library for Scala which converts Scala code into HTML page. For the styling, I have used ScalaCSS, which is CSS construction library for Scala, which converts scala code into CSSIn this application, I have tried to create frontend to backend: everything on SCALA.You can find complete working code here:- ScalaJs_Weather_Report.