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.
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).
dotnet new --install Fable.Template
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 runnpm install
, which will download the needed packages to thenode_modules
folder and create a lock file..NET dependencies are listed in the
src/App.fsproj
file. You can install them by runningdotnet restore src
, but this is already automatically done by Fable.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.