Complete boilerplate for Electron apps using Fable 2 and Elmish with hot module reloading, time-travel debugging, etc.
Branch: master
Clone or download
Latest commit 329a8e6 Jan 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.paket Convert to Material-UI Jan 12, 2019
.vscode Initial commit Nov 20, 2018
src Cleanup Jan 17, 2019
static Convert to Material-UI Jan 12, 2019
.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 README.md Jan 24, 2019
appveyor.yml Initial commit Nov 20, 2018
build.fsx Simplify electron-webpack entry workaround Jan 16, 2019
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 Convert to Material-UI Jan 12, 2019
paket.dependencies Update Elmish packages to prerelease; fix function names Jan 16, 2019
paket.lock
paket.references Initial commit Nov 20, 2018
readme-hmr.gif Update readme Jan 17, 2019
readme-ttd.gif Update readme Jan 17, 2019
webpack.additions.main.js Convert to Material-UI Jan 12, 2019
webpack.additions.renderer.js Convert to Material-UI Jan 12, 2019
yarn.lock Convert to Material-UI Jan 12, 2019

README.md

Fable-Elmish-Electron-Material-UI demo Build status

This is an example of an F# Electron app centered around Fable 2 and Elmish. The actual app contents (which you can easily replace to build your own Electron app) are intended to show how to use Material-UI (including JSS/style-as-code) as well as serve as examples of how to implement some (not always trivial) UX patterns in Elmish.

To use the demo for scaffolding your own Fable/Elmish/Electron apps, simply clone the repo and start hackin' on the Renderer project to get started (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

Stuff demoed:

  • Autocomplete
  • Badges
  • Dialogs
  • Selects (dropdowns)
  • Snackbars
  • Static assets (images etc.)
  • Text fields / input validation

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. See the code for the “Static assets” page (and the helpers in Utils.fs) to see how to use them.

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 several months trying to understand the byzantine packaging and build systems of modern JS for the first time, getting them to play nicely with Electron and Fable 2, and generally learning Fable/Elmish/React/Material-UI.

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.