Scala Full-Stack templates

Intro

When I started to build Scala full stack projects I observed there are various frameworks and information is scattered all over the internet which is disconcerting. Especially annoying is that I could not find a book that would tackle this aspect sufficiently.

There are lots of templates available however who can tell which is the difference between them in a concise manner ?

In this article I am gathering main full stack examples I can find.

Scala full-stack with

• Scala3
• Htt4s
• ScalaJs
• Javascript

For this template I used the repo outline proposed in this tutorial IdiomaticSoft as it is close to what I am using in Java full-stack.

I have also used ScalaJs integration from RockTheJvm along with fixes for package versions. RockTheJvm tutorial also integrates with database/docker, therefore provides an extended insight into the approach. I want to keep templates concise so any integration is left outside the scope.

After I created the template I realized that it is suitable to use Typescript instead of Javascript. Thus changing the client to whatever FE framework is available is suitable with least impact on the concept.

Project structure

Common - (Domain) shared code - DTOs
Client - FE code
Server - BE code

Common Module

Contains DTOs shared between Client and Server.

Client

1. Build vite.js project
2. Create ClientApp.scala which calls BE to get all products. It transforms the list of products into html content and fill it in <... id="app"> from index.html
3. Add the following field and script to index.html, the rest of its content is not needed <div id="app"></div> <script type="module" src="/app.js"></script>
4. Use styles.css from Startbootstrap
5. app.js calls scalajs:main.js which is compiled by ScalaJs inside client\target\scala-3.6.2\client-fastopt\main.js, it contains the converted scala into javascript code from App.scala and common->Product.scala
6. Add vite.config.js to configure server proxy, explained here Vite-Server-Proxy

Server

Use http4s - EmberServerBuilder to start a server with a "controller".

CLI

Command line is pretty well explained in IdiomaticSoft, RockTheJvm or in Readme

Github repo:

Github - Scala3Http4sFullStack

Scala full-stack with

• Scala3
• Zio
• ScalaJs
• Javascript
• Laminar

As previously, I have used the repo outline proposed in this tutorial IdiomaticSoft.

Project structure

Common - (Domain) shared code - DTOs
Client - FE code
Server - BE code

Common

Create the DTO that is shared between Client and Server.

Client

This time client is provided by Medium-ScalaFullstackWebApp, it is implemented in scala using Laminar.

Necessary files

• index.html
• main.js
• package.json
• vite.config.js
• build.sbt
• plugins.sbt
• add src folder
• add scala code in src folder

Server

Use the code from Medium-ScalaFullstackWebApp

CLI

Command line is pretty well explained in Medium-ScalaFullstackWebApp or in Readme

Github repo:

Github - Scala3ZioFullStack

Observations

In particular any of the referenced tutorials is either complex or contain too much unrelated info, or have some missing, unexplained elements. For me, it is important to have a clean setup that is also predictable, should result in building the same structure and produce the same outcome. It is easy to mess things up just by calling, apparently similar content, in different ways. For example, the most suitable way to have a clean -common- module is by creating it using this command (crossProject(JSPlatform, JVMPlatform) in file("common")) other variations provide different result, I learned this stuff while reading RockTheJvm - Scala3Typelevel. From IdiomaticSoft I learned about .aggregate(server) which provides a cleaner build result. Each tutorial comes with a benefit and a difference that worth to try while searching for a suitable template.

References

IdiomaticSoft

RockTheJvm

RockTheJvm - Scala3Typelevel

Medium-ScalaFullstackWebApp

Startbootstrap

Vite-Server-Proxy

Github - Scala3Http4sFullStack

Github - Scala3Http4sFullStack - Readme

Github - Scala3ZioFullStack

Github - Scala3ZioFullStack - Readme