fable-electron-elmish-react-reacttoolbox

An electron app using fable to transpile js and vscode to debug the electron process using source maps, together with elmish UI using react and react-toolbox for rendering.

Adapted from

What's Electron?

The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium and is used by the Atom editor and many other apps.

https://github.com/electron/electron

What's Fable?

Fable is a F# compiler that emits javascript. In this sample we write code in F#, transpile it appropriately into an Electron app, and then debug that app.

This is a minimal Electron application based on the Quick Start Guide within the Electron documentation.

A basic Electron application needs just these files:

index.html - A web page to render.
main.fsx - Starts the app and creates a browser window to render HTML.
package.json - Points to the app's main file and lists its details and dependencies.

You can learn more about each of these components within the Quick Start Guide.

Additionally this sample adds

fableconfig.json - for fable compiler options; tutorial here
.vscode/launch.json - for debugging in vscode; tutorial here
.vscode/tasks.json - for build/watch tasks; tutorial here
css from react and react-toolbox

To Use

To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer. Some linux distributions call node something else, e.g. nodejs, which may cause you problems.

To use VSCode you will need to install it.

I've also installed these extensions:

Debugger for Chrome. It must be version 1.1.0 or greater to allow breakpoints to be set in F#, see here

Ionide-fsharp does not seem to be necessary but useful for intellisense

From your command line:

Clone this repository

git clone https://github.com/aolney/fable-electron-elmish-react-reacttoolbox.git
Build and Run
- From command line
  1. Go into the repository
    
    cd fable-electron-elmish-react-reacttoolbox
  2. Run fable (fableconfig.json contains the compiler options)
    
    ./node_modules/.bin/fable
  3. Run electron
    
    npm start
- From VSCode
  1. Start VSCode
    
    code fable-electron-elmish-react-reacttoolbox
  2. Run the build task
    
    View -> Command Palette ; type run build task
  3. Put a breakpoint in main.js or renderer.js, e.g. inside createMainWindow
  4. Enter debug mode, select main or render debug dropdown depending on breakpoint location
  5. Run the debugger. Debugger will break at F# line corresponding to the location of your js breakpoint. You may need to ctrl-r in Electron to refresh and hit breakpoints in render process, see here
  6. Once the debugger has hit the breakpoint you can set other breakpoints in F# that will function. These breakpoints appear to be in the sourcemap. If you set breakpoints in the F# source proper they will not function as expected and show up as greyed out breakpoints in the debug view while the debug session is running.
  You can also run the watch task so that files are transpiled automatically on save. Enable by View -> Command Palette -> Type tasks: run task -> Select watch. Or ctrl-p and type task watch

aolney / fable-electron-elmish-react-reacttoolbox Goto Github PK