Fable · TypeScript

This section is specific to TypeScript targetting, it will guide you through the process of setting up your project and using Fable with TypeScript.

We will cover the basics of using Node.js and Vite for the browser, but you can use any tools you want.

Node.js

Please make sure you followed the Fable setup guide before continuing.

In this section, we are going to see how to run Fable code using Node.js.

When using JavaScript, you will need a package.json to manage your dependencies. This file also allows you to confiture the type of module that Node.js use to interpret your code.

Generate a package.json file.
```
npm init -y
```

Add the following line to the generated package.json file:

"type": "module",

It should looks something like that now:

{
  "name": "my-fable-project",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "Program.fs.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Install TypeScript compiler and Node.js type definitions.
```
npm i -D typescript @types/node
```

Use TypeScript to compile your F# code.

npx tsc Program.fs.ts --target es2022 --skipLibCheck

Run your code.
```
node Program.fs.js
```
You should see Hello from F# in your terminal.
When targeting the Node.JS, you will probably want to have access to the Node.JS API.
To do so, you can use the Fable.Node.
```
dotnet add package Fable.Node
```

Change the content of Program.fs to the following:

open Node.Api

fs.writeFileSync("test.txt",  "Hello World")

Run Fable and TypeScript in watch mode.
The follwing command start Fable in watch mode, and after the first Fable compilation, it will start TypeScript in watch mode.
```
dotnet fable watch --lang typescript --run npx tsc Program.fs.ts --target es2022 --skipLibCheck --watch --preserveWatchOutput
```
You can use your favorite build system instead to launch the different commands in parallel.
If you run your node script again, you should see a new file test.txt with the content Hello World.
Try changing the content of Hello World to something else and re-run your script.
You should see that Fable and TypeScript re-compile your code and the file content changed.

Browser

Please make sure you followed the Fable setup guide before continuing.

In this section, we are going to use Vite as a development server to run our code in the browser.

If you want to use another bundler, please refer to their respective documentation.

Generate a package.json file.
```
npm init -y
```
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
            ]
        }
    }
})

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>
    <script type="module" src="/Program.fs.ts"></script>
  </body>
</html>

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

Run Vite and go to the indicated URL.
```
npx vite
```
If you open the browser console, you should see Hello from F#.
When targeting the Browser, you will probably want to have access to the Browser API.
To do so, you can use the Fable.Browser.Dom.
```
dotnet add package Fable.Browser.Dom
```

Change the content of Program.fs to the following:

open Browser

let div = document.createElement "div"
div.innerHTML <- "Hello world!"
document.body.appendChild div |> ignore

Run Fable in watch mode and Vite in parallel.
```
dotnet fable watch --lang typescript --run npx vite
```
If you open the browser, you should see Hello world!.
Try changing the content of Program.fs and see the result in the browser.

Node.js#

Browser#

Node.js

Browser