Home

Awesome

Giraffe.HotReload

A repo to explore using FSharp.Compiler.Portacode for hot-reloading Giraffe Views

Enabling Giraffe View Hot-Reload in your project

Enabling static content Hot-Reload in your project

  <ItemGroup>
    <WebRoot Include="$(MSBuildProjectDirectory)/wwwroot/**/*" />
    <Watch Include="@(WebRoot)" />
  </ItemGroup>

    <Content Include="@(WebRoot)">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>

  <Target Name="CopyWebroot">
      <Copy
          SourceFiles="@(WebRoot)"
          DestinationFiles="@(WebRoot->'$(OutDir)\wwwroot\%(RecursiveDir)%(Filename)%(Extension)')"
      />
    </Target>

  let webroot = "wwwroot"

  WebHostBuilder()
    (...omitted...)
      .UseWebRoot(webroot)
    (...omitted...)

$ dotnet watch msbuild /t:CopyWebroot

By default this will watch your webroot folder. If you want to include additional folders, you can add them to StaticFileProviders in the Settings.

Settings

The current settings that can be configured are listed below.

  type Settings = {
    /// The route where the hot reload tool should post.
    UpdateRoute : string
    /// The route for the websocket that will refresh the browser.
    WebsocketRefreshRoute : string
    /// The name of the Giraffe HttpHandler member that will be searched for
    WebAppMemberName : string
    /// Static file providers for anything not under webroot
    StaticFileProviders : IFileProvider list
  }
    with
      static member Default = {
        UpdateRoute = "/update"
        WebsocketRefreshRoute = "/ws"
        WebAppMemberName = "webApp"
        StaticFileProviders = []
      }

You can pass these settings to the UseGiraffeWithHotReload as a second argument.

let settings = { Settings.Default with UpdateRoute = "/PleaseSendCodeHere" }

app.UseGiraffeWithHotReload(webApp,settings)

Triggering the auto-reload of your Giraffe app

The code looks for either a static HttpHandler value or a HttpHandler-generating-function called webApp (or another name that you provide in Settings) in your main application code.

If the value webApp: HttpHandler (or another name that you provide in Settings) is found, that value is passed into the HotReload middleware immediately.

If a member of the form webApp: 'dep1 -> ... -> 'depN -> HttpHandler (or another name that you provide in Settings) is found, the parameters are resolved from the HttpContext.RequestServices service locator on your behalf, passed into the function to get the HttpHandler, and then that value is passed into the HotReload middleware.

Log messages for both of these traversal paths will be written to the ASP.Net Core Logging Infrastructure under the Giraffe.HotReload.LiveUpdate.HotReloadGiraffeMiddleware logger name,

Check the samples/ReloadSample/Program.fs file for an example of a function-generating webApp.

WARNING: If your function includes generic parameters it will not work at this time.

Enabling auto-refresh of your page

The new middleware exposes a websocket-friendly connection at localhost:5000/ws, and if you include a simple script like in your root page template every page in your app will support hot-refresh. The important part is the onmessage handler, where the page is refreshed when a message is sent.

var socket = new WebSocket('ws://localhost:5000/ws');
socket.onopen = function(event) {
  console.log('Connection opened');
}
socket.onmessage = function(event) {
  console.log(event.data);
  window.location.reload();
  return false;
}
socket.onclose = function(event) {
  console.log("connection closed");
}
socket.onerror = function(error) {
  console.log("error", error);
}

Running locally from the repo

To test the current set up:

Builds

MacOS/LinuxWindows
Travis BadgeBuild status
Build HistoryBuild History

Nuget

StablePrerelease
NuGet BadgeNuGet Badge

Building

Make sure the following requirements are installed in your system:

> build.cmd // on windows
$ ./build.sh  // on unix

Environment Variables

Watch Tests

The WatchTests target will use dotnet-watch to watch for changes in your lib or tests and re-run your tests on all TargetFrameworks

./build.sh WatchTests

Releasing

git add .
git commit -m "Scaffold"
git remote add origin origin https://github.com/user/MyCoolNewLib.git
git push -u origin master

paket config add-token "https://www.nuget.org" 4003d786-cc37-4004-bfdf-c4f3e8ef9b3a

#### 0.2.0 - 2017-04-20
* FEATURE: Does cool stuff!
* BUGFIX: Fixes that silly oversight

./build.sh Release

Code formatting

To format code run the following target

./build.sh FormatCode

This uses Fantomas to do code formatting. Please report code formatting bugs to that repository.