$ npm install -g yarn
$ git clone https://github.com/oyvindberg/scalajs-fullstack.git
$ cd scalajs-fullstack
$ sbt
sbt> dev
Application served via webpack-dev-server
at http://localhost:8081.
The server will be running at http://localhost:8080.
Look at Suggestions at the bottom
This project consists of a simple file browser that uses Akka Http on the backend, and Scala.js, Slinky ScalablyTyped and Antd for the frontend code.
Furthermore, we use the «Li Haoyi stack» for type-safe Ajax calls (Autowire), json serialization (uPickle) and testing (uTest).
These are all examples of good micro-libraries that are cross-compiled for Scala.js
The Scala.js compiler has two modes:
fastOptJS
generates unoptimized javascript. Since it is by far the fastest mode, we will use this for developmentfullOptJS
also pipes the resulting javascript through the Google Closure compiler which does heavy DCE (Dead Code Elimination), among other optimizations. This is slower, but output file size drops from several megabytes to hundreds of kilobytes.
Usage is just running either of those commands:
sbt> fastOptJS
sbt> fullOptJS
Since the project both has client and server code, we can reload one or both on code changes.
For the backend we use sbt-revolver. Usage is like this:
# start server
sbt> tutorialJVM/reStart
# restart server
sbt> tutorialJVM/reStart
# stop server
sbt> tutorialJVM/reStop
# status
sbt> reStatus
# continuously restart server on changed code
sbt> ~tutorialJVM/reStart
# alias
sbt> devBack
Frontend:
# continuously compile and bundle code
sbt> ~tutorialJS/fastOptJS::webpack
# alias
sbt> devFront
If you make changes both on client and server side, this snippet should do it:
# alias
sbt> dev
Note that there is no synchronization between the two restarts, so
it's possible that the client will reload just as the server is restarting.
In that case, simply reload the browser, or use devFront
or devBack
Test code is transpiled and then executed on Node.js, which you need to install on your system if you want to run tests.
To run the frontend tests do this:
sbt> tutorialJS/test
You can build a fatjar which is executable and will serve frontend contents as well:
sbt>tutorialJVM/assembly
# [info] Packaging .../jvm/target/scala-2.13/tutorial-assembly-0.1.0-SNAPSHOT.jar ...
shell> java -jar .../jvm/target/scala-2.13/tutorial-assembly-0.1.0-SNAPSHOT.jar
This repo was originally created for a workshop, and the idea was that people can play around. These are some suggestions for things that could be fun to play with:
-
Try to break it! The compiler generally has your back, and a lot of the pain points from traditional web development are gone, though some remain. By refactoring the application you can get a feeling for what is still brittle
-
Extend the application to show metadata. Last changed? file size? Right now it's pretty bare bones
-
Add support for showing content of files. Such basic functionality missing!. Can you make it happen?
-
Add support for several file browsers in tabs on the same page. Bootstrap has tabs, and the file browser just needs a DOM element to render to)
-
Add support for remembering state. The Local Storage API is defined in
dom.localStorage
. You probably want to use uPickle for serialization -
Breadcrumbs for the parent folders instead of the back button.
- Scala.js Gitter room Probably the best place for support
-
Li Haoyi - «Scala.js - Safety & Sanity in the wild west of the web» Video Slides
-
Otto Chrons - «Scala.js: Next generation front end development in Scala» Video Slides
-
www.scala-js.org/ Tutorial, community, list of libraries, etc
-
Basic tutorial Tutorial on which this workshop was partly based
-
Hands-on Scala.js Comprehensive introductory material
-
Scala.js SPA-tutorial A more comprehensive starter project that includes Scalajs-React and Diode support, as well how to package a project for production.
-
TodoMVC example Frontend-only todo application with Scalajs-React