Complete boilerplate for Electron apps using Fable 2 and Elmish with hot module reloading, time-travel debugging, etc.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8e97863 Dec 1, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.paket Initial commit Nov 20, 2018
.vscode Initial commit Nov 20, 2018
src Initial commit Nov 20, 2018
static Initial commit Nov 20, 2018
.editorconfig Initial commit Nov 20, 2018
.gitignore Initial commit Nov 20, 2018
LICENSE Initial commit Nov 20, 2018
NuGet.Config Initial commit Nov 20, 2018
README.md Update packages Dec 1, 2018
appveyor.yml Initial commit Nov 20, 2018
build.fsx Update packages Dec 1, 2018
build.proj Initial commit Nov 20, 2018
fable-elmish-electron-demo.sln Initial commit Nov 20, 2018
fake.cmd Initial commit Nov 20, 2018
fake.sh Initial commit Nov 20, 2018
package.json Update packages Dec 1, 2018
paket.dependencies Initial commit Nov 20, 2018
paket.lock Update packages Dec 1, 2018
paket.references Initial commit Nov 20, 2018
readme-hmr.gif Initial commit Nov 20, 2018
readme-ttd.gif Initial commit Nov 20, 2018
webpack.additions.main.js Initial commit Nov 20, 2018
webpack.additions.renderer.js Initial commit Nov 20, 2018
yarn.lock Update packages Dec 1, 2018

README.md

Fable-Elmish-Electron demo Build status

This is an example of an F# Electron app centered around Fable 2 and Elmish. The actual app contents are taken from the TodoMVC sample on the online Fable REPL.

Simply clone the repo and start hackin' on the Renderer project to get started on your own app (details below).

Features/stack:

  • Hot module reloading for both code and styles
  • Time-travel debugging (using Redux DevTools, RemoteDev, and Fable.Elmish.Debugger)
  • Single-command development and packaging with FAKE
  • electron-webpack takes care of most of the webpack config
  • electron-builder packages the app (see their documentation for how to customize)
  • electron-window-state for remembering window state between launches
  • Devtron for Electron-specific debugging/linting

There are a lot of files in this repo that do not pertain to the actual app source code. These are mostly well commented in order to explain why they are needed. If you see something but don't understand why it's there, feel free to open an issue.

Hot module reloading in action

Animation showing hot module reloading

Time-travel debugging in action

Animation showing time-travel debugging

Requirements

  • .NET Core
  • Yarn (probably easy to change to npm if you prefer that)

How to develop

./fake.cmd build -t Dev (default target)

After the app starts, edit the renderer project in /src/Renderer and see the changes appear in real-time thanks to hot module reloading.

Place static files in the root /static folder as required by electron-webpack. An image has already been placed there and used in the app's heading to show how it works (in short: exactly as you'd expect).

Release build to unpacked directory

./fake.cmd build -t DistDir

Release build to packed installer

./fake.cmd build -t Dist

Disclaimer 🤯

I am very new to Fable, Electron and the modern JS/Node stack. This example/boilerplate is the result of my banging my head against a wall for two weeks trying to understand the byzantine packaging and build systems of modern JS for the first time, and getting them to play nicely with Electron and Fable 2.

Other Fable/Electron examples I have come across have either been outdated or missed some essential parts of the stack used in this repo. It feels like I have been given a mostly functional 20 year old petrol car, blueprints for a general-purpose electric engine, and asked to create a modern electric car.

In short: If you see anything here that looks wrong, suboptimal or just weird, you may very well be right. Don't be shy about opening an issue or PR.

Finally: While I hope this repo is useful, I can make no promises to keep it updated. PRs are welcome.