App Setup using SAFE – Informedica

I am using the SAFE template to setup my apps. This will install a full stack framework with F# as the back-end and front-end language.

To see the setup instructions go to the SAFE website. Typically, I use the install with the following directives:

# --deploy docker: use docker for deployment
# --layout: don't use the standard Fulma layout
# Note use two hyphens (code here shows only hyphen)
dotnet new SAFE --deploy docker --layout none

Because the default Fulma UI library is not selected as the default choice, an UI library has to be added. I am using the Fable.MaterialUI (for now). This can be added by:

# Adds the Fable.MaterialUI library to the client project
./paket/paket.exe add --group Client --project src/Client/Client.fsproj Fable.MaterialUI

# Add the required node modules
yarn add @material-ui/core

Next I update the index.html file with the following additions to the header section:

<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#2196f3">
<meta property="og:title" content="My SAFE APP" />
<meta property="og:description" content="A SAFE app" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link rel="shortcut icon" type="image/png" href="public/favicon.png" />

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=es6"></script>
<script src="https://polyfill.app/api/polyfill?features=fetch"></script>

This adds all necessary css files. It also loads a polyfill for the fetch function (for use with IE 11). As described in this GitHub issue. The next step is to configure the docker deploy. Therefore the build.fsx file has to be edited, changing the “Docker Target” with:

let dockerUser = "halcwb"
// Note that the docker image name has to be all lower caps
let dockerImageName = "myapp"
// The resulting docker image will be called: halcwb/myapp

You can now power up the application with a simple command:

# Builds the application using the run target
# This will also starup the default browser
# with the running client front-end
fake build -t run

The result is an enormous powerful setup featuring:

A full stack application with a running web server and a web based client.
All code written in (IMHO the best language) F#.
Hot module reloading, i.e. every time you save a code change, the browser will reload you and show the changes directly.
A time travelling debugger. You can literally replay your app use history in the browser.

How impressive is that!

Next setup server side and browser side! testing.

Leave a Reply Cancel reply