• Download a Fable sample

    Fable can target different JavaScript runtimes like Node.js, Browser, etc. To make it easier for people to explore Fable usage we created fable3-samples Github repo.

    This repository contains several samples ready to use, each located in its own folder.

    If you are interested in a full-stack F# solution that covers both the backend (using .NET) and the frontend (using Fable), check out the SAFE-Stack.

    • Browser samples

      • Simple HTML5 canvas and Browser DOM: /browser

      • More complex browser app with fetch & promises & json parsing: /promises

    • React samples

    • Node.js samples

    • Advanced samples

  • Install dependencies

    JS dependencies are listed in the package.json file. If you are using npm, you can run npm install, which will download the packages to the node_modules folder and create a lock file.

    Depending on whether you're using Nuget or Paket, .NET dependencies will be listed in the .fsproj or paket.references files. You can install them by running dotnet restore, but this is already automatically done by Fable.

    Lock files (like package-lock.json if you're using npm) should be committed to ensure reproducible builds whenever anybody clones the repo.

  • Build & run the app

    Now that we're done with the dependencies, let's start our app in watch mode. Depending on the kind of template the instructions my differ.

    Web samples

    For web samples, unless advised, it will always be npm start

    Then you'll be able to access your project from http://localhost:8080/ with your favorite browser.

    If you now open the project with your code editor, you can make some changes in the App.fs file located in the src folder. Save it and if the compilation succeeds you should be able to see your changes directly in your browser.

    Node.js samples

    For Node.js samples, unless advised, it will always be npm build

    Then you'll be able see the generated JS files in the build folder.

    Always check the README.md file shipped with the template to get up-to-date instructions.