Give it a try: Safe

Intro ¶

I’ve recently learnt about the SAFE Stack. It’s F# all the way from the client to the server side. It’s a fantastic news for back-end people (knowing F#). There is no need of learning intricacies of JavaScript. You can focus on productivity instead. In this post I just want to show you how quickly you can start developing.

First SAFE app ¶

Prerequisites ¶

.Net Core 2, Node.js, Yarn. Make sure you’ve got it all. Then just open shell and let’s type.

Install the template ¶

dotnet new -i SAFE.Template

Create a new SAFE app ¶

dotnet new SAFE -lang 'F#' --Server suave --Fulma basic

I’ve chosen Suave as my back-end¹ and used a basic Fulma template. More options described here

Now you should have the following directory structure:

├───.paket
└───src
    ├───Client
    │   ├───obj
    │   └───public
    │       └───Images
    ├───Server
    │   └───obj
    └───Shared

The template uses Paket - a typical replacement for NuGet package manager in the world of F#. Like it or not it works just fine.

Let it run ¶

./build.cmd run

SAFE uses FAKE as its build script. Also like Paket - a typical choice for F# apps.²

It takes a while for the first time. Once it’s done it kicks off the server and a browser window navigating to http://localhost:8080/. It displays a basic page with a counter we can increment and decrement.

Let’s modify ¶

SAFE uses webpack.js and benefits from its hot module replacement feature. It’s very cool (aka a must) for development.

Breaking the counter ¶

Let’s open ./src/Client/Client.fs and find the following method:

let update (msg : Msg) (model : Model) : Model * Cmd<Msg> =
  let model' =
    match model,  msg with
    | Some x, Increment -> Some (x + 1)
    | Some x, Decrement -> Some (x - 1)
    | None, Init (Ok x) -> Some x
    | _ -> None
  model', Cmd.none

Now change it to increment 7 and decrement 3 (or whatever) and save it. In the console you should see something like the following:

i ｢wdm｣: Compiling...
Parsing ./Client/Client.fs...
fable: Compiled Client.fs

And then boom, go to the browser, DO NOT reload the page, and enjoy your counter being broken.

Outro ¶

It has been a very quick overview I hope you enjoyed. I believe SAFE stack not only can boost productivity but also is a milestone in making F# a popular rather than an exotic choice.