Give it a try: Safe


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.

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

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

I’ve chosen Suave as my back-end1 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.

./build.cmd run

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

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.

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

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.

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.


  1. If you want something more mainstream go for Giraffe and enjoy all the powers of ASP.NET Core. ↩︎

  2. I like it much - we use it in the company I work for too. However, FAKE is undergoing a serious refactoring right now and the documentation is quite fragmented/incomplete. Unless you’re a researcher/fanatic I would not recommend to use it until it’s settled. ↩︎