https://github.com/fable-compiler/fable-elmish-electron-material-ui-demo

Complete boilerplate for Electron apps using Fable and Elmish with hot module reloading, time-travel debugging, etc.
https://github.com/fable-compiler/fable-elmish-electron-material-ui-demo

boilerplate electron electron-app electron-builder electron-webpack elmish fable fable-elmish fable2 material-ui sample template

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/fable-compiler/fable-elmish-electron-material-ui-demo
• Owner: fable-compiler
• License: mit
• Created: 2018-11-20T20:24:32.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-29T14:55:14.000Z (9 months ago)
• Last Synced: 2024-04-14T08:52:41.121Z (8 months ago)
• Topics: boilerplate, electron, electron-app, electron-builder, electron-webpack, elmish, fable, fable-elmish, fable2, material-ui, sample, template
• Language: F#
• Homepage:
• Size: 5.24 MB
• Stars: 112
• Watchers: 9
• Forks: 19
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fable-Elmish-Electron-Material-UI demo [![Build status](https://ci.appveyor.com/api/projects/status/hm2w65e3enahp55g/branch/master?svg=true)](https://ci.appveyor.com/project/cmeeren/fable-elmish-electron-material-ui-demo/branch/master)

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](https://webpack.electron.build/) takes care of most of the webpack config

* [electron-builder](https://www.electron.build/) packages the app (see their documentation for how to customize)

* [electron-window-state](https://github.com/mawie81/electron-window-state/) for remembering window state between launches

* [Devtron](https://electronjs.org/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](readme-hmr.gif)

### Time-travel debugging in action

![Animation showing time-travel debugging](readme-ttd.gif)

## 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.