• Stars
    star
    112
  • Rank 312,240 (Top 7 %)
  • Language
    F#
  • License
    MIT License
  • Created almost 6 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Complete boilerplate for Electron apps using Fable and Elmish with hot module reloading, time-travel debugging, etc.

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
  • Saving/loading files
  • Selects (dropdowns)
  • Snackbars
  • Static assets (images etc.)
  • Text fields / input validation

Hot module reloading in action

Animation showing hot module reloading

Time-travel debugging in action

Animation showing time-travel debugging

Requirements

  • .NET Core SDK 3.0
  • Node (for npm)

How to develop

This project uses .NET Core 3 local tools. Therefore, run dotnet tool restore to restore the necessary CLI tools before doing anything else.

Then, to run the app locally in "live mode":

dotnet fake build -t Dev

(Dev is the default target, so you can also just run dotnet fake build.)

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

dotnet fake build -t DistDir

Release build to packed installer

dotnet fake build -t Dist

NuGet package management

Use dotnet paket (after running dotnet tool restore).

Improvements welcome!

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.

More Repositories

1

Fable

F# to JavaScript, TypeScript, Python, Rust and Dart Compiler
F#
2,916
star
2

fable-react

Fable bindings and helpers for React and React Native
F#
273
star
3

ts2fable

Parser of Typescript declaration files
F#
223
star
4

Fable.Python

Python bindings for Fable
F#
134
star
5

Fable.Lit

Write Fable Elmish apps with Lit
F#
94
star
6

fable2-samples

Fable 2 samples
F#
68
star
7

fable-browser

Fable bindings for Browser Web APIs
F#
66
star
8

repl

Fable online REPL
F#
61
star
9

samples-electron

Fable bindings and samples for Github Electron
F#
60
star
10

fable-arch

Framework for building applications based on the elm architecture.
F#
60
star
11

Fable.Store

Manage state logic in Svelte, React apps and more
F#
59
star
12

fable-react-native

Fable bindings and helpers for React Native projects
F#
49
star
13

fable3-samples

Nagareyama (Fable 3) samples
F#
47
star
14

Fable.Solid

Fable bindings for SolidJS
F#
45
star
15

samples-browser

Fable samples for browser apps
F#
36
star
16

fable-powerpack

Utilities for Fable apps
F#
33
star
17

fable-import

Fable bindings for JavaScript libraries
F#
33
star
18

fable-electron

Fable bindings for Electron apps
F#
32
star
19

Feliz.JSX

Feliz API for JSX compilation
F#
30
star
20

Fable.Jupyter

F# (Fable) support for Jupyter
Jupyter Notebook
30
star
21

Fable.JsonProvider

F# JSON Type Provider for Fable
F#
28
star
22

fable-templates

Templates for Fable projects maintained by fable-compiler org
F#
26
star
23

static-web-generator

Simple Fable Node.js app to generate static pages
F#
24
star
24

fable-compiler.github.io

Fable web site
JavaScript
23
star
25

fable-graphics

Fable bindings for graphic tools: D3, DC, Three, Pixi
F#
23
star
26

fable-node

Bindings for node.js native modules
F#
21
star
27

cfworker-hello-world

Cloudflare worker
F#
19
star
28

fable-promise

Fable bindings for JS promise
F#
19
star
29

Fable.Flutter

Fable bindings for Flutter API
F#
18
star
30

fable-fetch

Fable bindings for Browsers' Fetch API
F#
17
star
31

samples-pixi

Pixi samples for Fable
CSS
15
star
32

repl-legacy

F#
14
star
33

Fable.RegexProvider

Simple Safe Regex Provider compatible with Fable
F#
12
star
34

Fable.Expect

Utilities to test Fable apps
JavaScript
11
star
35

webpack-config-template

Template for webpack.config.js in Fable projects
JavaScript
10
star
36

ts2fable-exports

All branches are auto-generated by ts2fable
F#
9
star
37

fable-recharts

Fable bindings for Recharts
F#
8
star
38

fable-vscode-extension

Example of a VS Code Extension Written in F#
F#
8
star
39

Fable.I18Next

Fable bindings and helpers for [i18next](https://www.i18next.com/)
JavaScript
7
star
40

community

Finder for community resources
F#
7
star
41

fable-pixi

Bindings For Pixi.js
F#
7
star
42

Fable.ReactGoogleMaps

Fable bindings and helpers for react-google-map
F#
7
star
43

fableconf-workshops

Workshops for FableConf
F#
5
star
44

fableconf

Material for fableconf
F#
4
star
45

rollup-plugin-fable

Rollup plugin for Fable (F# to JS compiler)
JavaScript
4
star
46

repl2

REPL for Fable 2
F#
3
star
47

repl3

F#
3
star
48

Fable.Package.SDK

F#
3
star
49

fable-import-ws

Fable bindings for Websockets library ws
F#
2
star
50

fable-date

F#
2
star
51

fable-import-google-cloud-functions

F#
2
star
52

Fable.React.UseElmish

useElmish React hook
F#
1
star
53

fable-react-dom

F#
1
star