Skip to content

laurentpayot/fsharp-fable-elmish-example

Repository files navigation

F# Fable Elmish example

The goal of this example is to show how to get typical Elm features (see below) in F#. We use Fable to transpile F# to JavaScript and Elmish to get The Elm Architecture (TEA), also known as the Model View Update (MVU) pattern.

For views we use Feliz that uses React under the hood. In this example React is seamlessly replaced by Preact to get performances similar to Elm, both in term of speed and bundle size.

Featuring

  • Startup flags
  • Getting a random number
  • Routing
  • Subscription via a JavaScript custom event
  • Foreign Function Interface (FFI) using synchronous and asynchronous functions imported from JavaScript
  • JSON decoding
  • Keyed list
  • Unit tests
  • Hot Module Replacement (HMR)
  • Debugger (via Redux DevTools)

Prerequisites

To run this example app on your local machine, you will need:

Usage

  • pnpm i to install Node.js dependencies as well as F# dependencies.
  • pnpm start to start the Vite development server with automatic refresh on http://localhost:5000.
  • pnpm build to build the bundle, then pnpm serve to serve it as a single page application on http://localhost:5000.
  • pnpm test to run unit tests.
  • pnpm test:watch to run unit tests in watch mode.

If you get an error like ENOSPC: System limit for number of file watchers reached, run pnpm watchers-fix to increase the number of watchers on your system. If you want this increase to be permanent, see this answer on StackOverflow.

License

MIT