Fable · Build and Run

When targetting JavaScript, there are a lot of ways to build and run your code.

This section will only cover the basics of using Vite for more complex scenarios or if you want to use another bundler, please refer to their respective documentation.

Setup

Install Vite.
```
npm i -D vite
```

Create vite.config.ts file, and add the following content:

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
    clearScreen: false,
    server: {
        watch: {
            ignored: [
                "**/*.fs" // Don't watch F# files
            ]
        }
    }
})

This file is used to configure Vite.

Create index.html file, and add the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fable</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Adapt the path to your entry file -->
    <script type="module" src="/Program.fs.js"></script>
  </body>
</html>

This file is the entry point of your application. It will load the generated JavaScript file.

Watch

Run Fable in watch mode and Vite in parallel.

Single command

dotnet fable watch --lang typescript --run npx tsc Program.fs.ts --target es2022 --watch --preserveWatchOutput

When changes are made to your F# code, Fable will recompile it and Vite will reload the page.

Build for production

The following command will build your application for production using Fable and then ask Vite to bundle it.

During the bundling process, Vite will minify your code and remove dead code.

dotnet fable --run npx vite build

Setup#

Watch#

Single command#

Build for production#

Setup

Watch

Single command

Build for production