Switch branches/tags
Nothing to show
Find file History
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Add samples Aug 2, 2018
src Update to Fable 2.1 Dec 4, 2018
.gitignore Add samples Aug 2, 2018
Nuget.Config Add samples Aug 2, 2018
README.md Update to Fable 2.1 Dec 4, 2018
package-lock.json Update to Fable 2.1 Dec 4, 2018
package.json Update to Fable 2.1 Dec 4, 2018
webpack.config.js Improve the README Nov 4, 2018


Fable 2.1 Minimal App

This is a simple Fable 2.1 app including an Elmish counter with as little configuration as possible. If you want to see a more complex app including commonly used F# tools like Paket or Fake, check the Fulma demo.


Building and running the app

  • Install JS dependencies: npm install
  • Start Webpack dev server: npx webpack-dev-server or npm start
  • After the first compilation is finished, in your browser open: http://localhost:8080/

Any modification you do to the F# code will be reflected in the web page after saving.

Project structure


JS dependencies are declared in package.json, while package-lock.json is a lock file automatically generated.


Webpack is a JS bundler with extensions, like a static dev server that enables hot reloading on code changes. Fable interacts with Webpack through the fable-loader. Configuration for Webpack is defined in the webpack.config.js file. Note this sample only includes basic Webpack configuration for development mode, if you want to see a more comprehensive configuration check the Fable webpack-config-template.


The sample only contains two F# files: the project (.fsproj) and a source file (.fs) in the src folder.

Web assets

The index.html file and other assets like an icon can be found in the public folder.