Reading Time: 2 minutes

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.