Reflex-DOM Auto Reload Development with ghcid

.ghci

:set prompt "> "
:set -isrc
:load Main

dev-server

#!/usr/bin/env bash
port=${1:-9090}
ghcid -W --test "devMainAutoReload apiServer appWidget $port"

Main.hs

import Language.Javascript.JSaddle            (JSM)
import Language.Javascript.JSaddle.Run        (syncPoint)
import Language.Javascript.JSaddle.WebSockets (debugWrapper, jsaddleWithAppOr)
import Network.Wai                            (Application)
import Network.Wai.Handler.Warp               (defaultSettings, run, runSettings, setPort, setTimeout)
import Network.WebSockets                     (defaultConnectionOptions)


-- | A @main@ for doing development.
devMain :: Application -> JSM () -> Int -> IO ()
devMain backend frontend port = do
  putStrLn $ "Running dev server on localhost:" <> show port

  app <- jsaddleWithAppOr
    defaultConnectionOptions
    (frontend >> syncPoint)
    backend

  runSettings (defaultSettings & setTimeout 3600 & setPort port) app


-- | A version of @devMain@ that can be used with @ghcid --test@ to get an auto-reloading server.
devMainAutoReload :: Application -> JSM () -> Int -> IO ()
devMainAutoReload backend frontend port =
  debugWrapper $ \refreshMiddleware registerContext ->
    devMain (refreshMiddleware backend) (registerContext >> frontend) port

Inspired by https://gist.github.com/dalaing/73b24b9faea0f51c8e4cbc6d1311516e

Tip: Have your backend Application serve any static files needed by the front-end.

Thanks! I have implemented this here: https://github.com/rvl/flatris