Edit

Start a new project

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

  • Use a Fable template

    The easiest way to get started with Fable is to use a template (learn more about dotnet templates). For a minimal Fable project, create and navigate to a new directory and run the following commands (first one is only needed if you haven't installed the template yet in your system).

    1. dotnet new --install Fable.Template
    2. dotnet new fable

    The rest of this document applies to Fable.Template. Alternatively, if you want specific examples or a more comprehensive template with more tooling and libraries installed, please check one of the following:

    • Clone the Fable 3 samples repository to learn how to use Fable with different kinds of apps (browser, nodejs, testing, etc)
    • Build a React app in F# with Feliz template
    • Write a frontend app fully in F# without JS dependencies with Sutil
    • Get up to speed with SAFE Template which covers both the frontend and backend sides of your app

  • Install dependencies

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

    .NET dependencies are listed in the src/App.fsproj file. You can install them by running dotnet restore src, 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 your repo. For .NET dependencies you can create a lock file by using Paket.

  • Build & run the app

    Here we go. If you've already installed JS dependencies, just run npm start. After a few seconds, your web server app will be running in the background until you kill it.

    • You can access your project at http://localhost:8080/ with your favorite browser.
    • The server is in “watch” mode. Each time you save an .fs F# source file, Fable rebuilds the project automatically. If the build succeeds, you will see your changes in the browser without refreshing the page; if not, nothing changes in the browser, and you can see the build errors in the server’s console output.

    The npm start command is just an alias for dotnet fable watch src --run webpack-dev-server, check the "scripts" section of the package.json file. Please also check the README.md file shipped with the template to get up-to-date instructions.

SetupThe project file