Zio-BlogApp: Full Stack App Template

Launched my open source project: Zio-BlogApp, it creates a Full Stack App using shared Scala code for the frontend and backend, and builds to containers so you can deploy it to Docker/Kubernetes!

In a natural arc of development, I’ve been dabbeling into adopting Functional Programming. I been trying to branch out with Rust and Scala. Then I came across this cool video from the Ziverge team. It’s a demo with their open source repo, zio/zio-petclinic and explains how to build a Full Stack app with a frontend, backend api and a Postgres database. The codebase shows how many different libraries are used in combination to build the project.

This seems like a great project to adapt and learn how to use ZIO, Scala, ScalaJS and Laminar all in one go. I used their repo as a starting point by also want to make some changes:

• Update to using the latest Scala 3.2.2 instead of Scala 2
• Move the deployment out of Heroku(which I’ve never used) to Docker/Kubernetes
• Change the nature of the application from a pet clinic appointment book to a blogging app, to use all new data models
• Switch the frontend UI theme to a predesigned theme, to dive into how Laminar(DOM manipulation library) works
  
• Create a development environment and project structure

Frontend

Laminar is the replacement equivalent of React as it uses Scala instead of ES6 or TypeScript. A great advantage of using Scala is sharing code and data models with the backend codebase. Its focus is still creating components and managing events, but it does it with direct DOM manipulation, instead of a virtual DOM. This video by the creator is a great introduction, and explains many of the differences. Also, the component’s logic is written in a functional style with strong type support.

I also wanted to demostrate using a prebuilt UI theme and how to integrate it. I picked the Medio Theme from Untree.co.

• ScalaJS will convert Scala to JavaScript
• Laminar provides DOM manipulation, like ReactJS but different
• Integrate with JavasScript/CSS design templates, Bootstrap and others

Backend

Using Scala 3 with ZIO to build the backend API. The server basically provides endpoints for HTTP requests and makes calls to the database.

Project and Source Code

Being new(ish) to Scala and sbt, I adopted the use of Makefile to organize development tasks. The instructions for onboarding, continuing development and builds are found in the README.md or the Makefile and uses of bash scripts for other specific tasks.

• kyledinh/zio-blogapp - Github repository of open source project
• Build Docker Images
• Deploy with Docker/Kubernetes, locally or to the cloud
• Run the frontend with Nginx
• Run the backend/api as a custom build Container
• Run the database with PostgreSQL

Reminder, this codebase is a work in progress, best used as an example and to learn, not in a production environment. Cheers!