cutting teeth with scala-js

Full-Stack-Scala is really appealing for a few of reasons, for starters a programmer can still use many of the principles of category theory in day to day work without being stunted by the language, the front end then may also be type safe forming a more cohesive and robust experience and finally many of the major JS frameworks(React.js, AngularJS, Vue.js ) integrate with Scala-JS. Below is an example of how to quickly get a basic page up to illustrate configuration and simple mechanics of appending data to the DOM.

  1. Create a new directory for your project maybe something like frontend or fe for short.  Then create your directories for a basic sbt project.

     
  2.  Set an sbt version in build.properties file.

     
  3. Solid this is going great, if sbt is unfamiliar maybe checkout sbt in Action: The simple Scala build tool this book is everything that’s needed to get up to speed on structuring Scala projects and automating build processes as well as just being a great reference to have around. So maybe purchasing this book is a good step three, who knows?
  4. Now add the Scala-JS plugin to the project whatever way is easiest the below command will work as well.
  5. Check out the project so far.

     
  6. Cool, now add the contents below to a build.sbt file. First make the file.

     
  7. Then put the enable plugins command, the name and very importantly the Scala version in the build.sbt file.

    Nice, this shit is configured.

    If for whatever reason there’s a command line maniac reading this copy/paste the below and let it rip.


     
  8. In Step 1. a hello module was created. Now add  the following contents to LordsAndLadies.scala

    And for the command line fans..

     
  9. Now add a html file to the root directory like so

     
  10. Add some basic HTML along with specific Scala-JS scripts.

     
  11. Now Run the following

     
  12. Now open hello.html in a web browser.. Lo and behold. This post is a rip off from the documentation but slightly expedited.