Serving SPAs - barebones version

Main.fs

namespace CSSPA0

open WebSharper
open WebSharper.Sitelets
open WebSharper.UI
open WebSharper.UI.Server
open WebSharper.UI.Html

type SPA =
    | [<EndPoint "/cities">] Cities
    | [<EndPoint "/cities">] City of string

type EndPoint =
    | [<EndPoint "/">] Home
    | [<EndPoint "/spa">] SPA of SPA

[<JavaScript>]
module Client =
    open WebSharper.UI.Client

    let store =
        [
            "Budapest", "awesome"
            "Paris", "famous"
            "San Francisco", "expensive"
            "London", "cosmopolitan"
            "Singapore", "crowded"
        ]

    let Main () =
        let router = Router.Infer<EndPoint>()
        let location =
            router
            |> Router.Slice (function | SPA spa -> Some spa | _ -> None) EndPoint.SPA
            |> Router.Install SPA.Cities

        location.View.Doc(function
            | SPA.Cities ->
                Doc.Concat [
                    ul [] (
                        store |> List.map (fun (city, _) ->
                            a [attr.href <| router.Link (EndPoint.SPA (SPA.City city))] [
                                li [] [text city]
                            ] :> Doc)
                    )
                ]
            | SPA.City city ->
                let message =
                    match List.tryFind (fun (cty, _) -> city=cty) store with
                    | None ->
                        p [] [text "I don't know your city :("]
                    | Some (_, adjective) ->
                        p [] [text <| "Your city is " + adjective + "!"]
                Doc.Concat [
                    h1 [] [text city]
                    message
                    p [] [
                        text "Click "
                        a [attr.href (router.Link (EndPoint.SPA SPA.Cities))] [text "here"]
                        text " to go back."
                    ]
                ]
        )

module Site =
    let HomePage (ctx: Context<EndPoint>) =
        Content.Page(
            Title = "Home",
            Body = [
                p [] [
                    text "There is nothing here, go to the "
                    a [attr.href <| ctx.Link (EndPoint.SPA SPA.Cities)] [text "Cities page"]
                ]
            ]
        )

    let CitiesPage ctx =
        Content.Page(
            Title = "Cities",
            Body = [
                div [] [client <@ Client.Main () @> ]
            ]

        )

    [<Website>]
    let Main =
        Application.MultiPage (fun ctx endpoint ->
            match endpoint with
            | EndPoint.Home ->
                HomePage ctx
            | EndPoint.SPA SPA.Cities
            | EndPoint.SPA (SPA.City _) ->
                CitiesPage ctx
        )

packages.config

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="System.ValueTuple" version="4.3.0" targetFramework="net461" />
  <package id="WebSharper" version="4.1.0.171" targetFramework="net461" />
  <package id="WebSharper.FSharp" version="4.1.0.171" targetFramework="net461" />
  <package id="WebSharper.UI" version="4.1.0.34" targetFramework="net461" />
</packages>