Now we're ready, let's start a new project using Fable!

  • Download a Fable sample

    The best way is to clone the fable2-samples Github repo which 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 also 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

      • Node.js app with fetch & promises: /nodejs

      • Bundled Node.js app with fetch & promises: (/nodejsbundle

    • 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.