Skip to content

Getting started

This page builds a Fable project from nothing and runs a counter in the browser.

Requirements

  • .NET SDK 8.0 or later
  • Node.js 20.19 or later

Set up the project

  1. Create the project

    Terminal
    dotnet new console -lang F# -o MyApp
cd MyApp

  2. Install Fable

    The F# to JavaScript compiler, as a local tool.

    Terminal
    dotnet new tool-manifest
dotnet tool install fable

  3. Add the packages

    They are in beta, so --prerelease is required.

    Terminal
    dotnet add package Fable.Ripple --prerelease
dotnet add package Fable.Ripple.Dom --prerelease

  4. Add Vite

    It serves the compiled output during development and bundles it for production.

    Terminal
    npm init -y
npm install --save-dev vite

    Set the package type to module.

    package.json
    {
    "type": "module"
}

  5. Add the host page

    Fable writes a .js file next to each .fs file, so Program.fs becomes Program.fs.js.

    index.html
    <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>MyApp</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/Program.fs.js"></script>
    </body>
</html>

    <div id="root"> is the element the app mounts into. Use any id you like, as long as it matches the one in the next step.

  6. Replace the contents of Program.fs

    Program.fs
    module Program

open Fable.Ripple
open Fable.Ripple.Dom

let count = Var.create 0

let view =
    Html.div
        [
            Html.button
                [
                    on.click (fun _ -> count.Value <- count.Value + 1)
                    Html.text "Count"
                ]
            Html.output count
        ]

Html.mount "root" view

    Html.mount renders an item into the element with the given id.

  7. Run it

    Fable watches the F# sources and Vite serves the result, so this takes two terminals.

    Terminal 1
    dotnet fable watch
    Terminal 2
    npx vite

    Open the address Vite prints. Click the button and the number changes. Editing Program.fs recompiles it and reloads the page.

Build for production

Terminal
dotnet fable
npx vite build

The bundle is written to dist/.

Generated files

Fable's output sits next to the sources:

.gitignore
*.fs.js

Next steps

Edit this page