Scala Full-Stack templates

Full-Stack templates

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 the main full stack examples and will try to analyze their differences. I already feel it's not an easy task, so I will have to learn along the way.

Scala full-stack template with Scala3, Htt4s, ScalaJs, Javascript

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.

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. It also integrates with database/docker, therefore provides an extended insight into the approach. I wanna keep templates concise so any integration is left outside the scope.

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

1. Build any FE using npm.


2. Create App.scala that will call BE side and get all the products via shared Product DTO. Will transform the list of products into html content and fill it in <... id="app"> field from 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

TBC

Project available on Github - Scala3Http4sFullStack

References

IdiomaticSoft

RockTheJvm

Startbootstrap

Vite-Server-Proxy

Github - Scala3Http4sFullStack

Github - Scala3Http4sFullStack - Readme