The goal of this example is to show how to get typical Elm features (see below) in F#. It uses Fable to transpile F# to JavaScript and Elmish to get The Elm Architecture (TEA), also known as the Model View Update (MVU) pattern.
Elmish normally uses React under the hood, but in this example React was seamlessly replaced by Preact to get performances similar to Elm, both in term of speed and bundle size.
- 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)
To run this example app on your local machine, you will need:
- .NET 8 SDK
- pnpm
- Node.js (can be installed via pnpm with
pnpm env use --global latest) - Redux DevTools browser extension for the debugger, and maybe Preact DevTools if you wish to inspect the rendering itself.
- Ionide plugin for your IDE is highly recommended.
pnpm ito install Node.js dependencies as well as F# dependencies.pnpm startto start the Vite development server with automatic refresh on http://localhost:5000.pnpm buildto build the bundle, thenpnpm serveto serve it as a single page application on http://localhost:5000.pnpm testto run unit tests.pnpm test:watchto 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.