Frontend to Backend: Everything is on Scala using Play, Scala.js and ScalaCSS

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 CSS

In this application, I have tried to create frontend  to backend: everything on SCALA.

You can find complete working  code here:- ScalaJs_Weather_Report.