Getting started

Install the required tools

First, you need to have all the required tools to develop the application.

👉 Check the requirement section.

Build your project

First, let's build your fullstack application 🏗️

This scaffolding project allows you to customize some value. To do so, you should scaffold the application with sbt (opens in a new tab):

sbt new do4-2022/scala-fullstack-scaffold.g8
 

It will outputs some Questions about the configuration of the application:

This a scaffolded app created with Gitter8 
 
name [My Fullstack App]: 
 

Customization

Subsequent questions permits to define:

• The name of the project
  The default value is My Fullstack App.

• The name of the Frontend application
  The default value is My Fullstack App frontend.

• The name of the Frontend application
  The default value is My Fullstack App frontend.

• The SBT version used
  The default value is latest. You can use a semantic defined version.

• The Database used

postgres=yes

Once finished, a new folder name [My Fullstack App] will be created, containing the frontend and the backend applications.

Here is the generated folder structure:

<project_name>/
├─ <frontend_name>/
├─ <backend_name>/

Now that the project is setup, you will have to launch both application, let's start with the backend !

Launch the backend

Run the following command:

cd ./backend
sbt run 

Launch the frontend

cd ./frontend
# Install dependencies
npm install
# Run the project in development
npm run dev

Now, open your browser at the following localhost:3000 (opens in a new tab) and see the magic happen 🌟.

Start coding !

You are done with the setup, now you can performs some changes to see if everything is working as expected:

Open the header.scala file and Change the title with My Todo :

package My_Fullstack_App_frontend.components
import com.raquo.laminar.api.L.{given, *}
import My_Fullstack_App_frontend.events.commandObserver
import My_Fullstack_App_frontend.events.Reload
 
// header of the app
def header() = {
  div(
    cls("header"),
    h1("Todo"),
    errorMessage(),
    div(
      cls("top-bar"),
      button(
        "reload",
        cls("reload"),
        onClick.mapTo(Reload) --> commandObserver
      )
    ),
    newTodoInput
  )
}
 

Save your file and open the Changes in your browser 🤩