CompositionalIT / fable-debugging

Fable Minimal App

This is a small Fable app project so you can easily get started and add your own code easily in it.

Requirements

• dotnet SDK 3.0 or higher
• node.js with npm
• An F# editor like Visual Studio, Visual Studio Code with Ionide or JetBrains Rider.

Building and running the app

• Install JS dependencies: npm install
• In VS Code: F5
  • Calls npm run start
  • Launches the app
  • Attaches the VS Code debugger to Chrome

Debug Console in VS Code

Debug output is shown directly in VS Code:

Any modification you do to the F# code will be reflected in the web page after saving.

Debugging the app

1. Set a breakpoint in VS Code (F9)
2. Run the code!
3. Use VS Code debugger to inspect call stack and variables etc.

Project structure

npm

JS dependencies are declared in package.json, while package-lock.json is a lock file automatically generated.

Webpack

Webpack is a JS bundler with extensions, like a static dev server that enables hot reloading on code changes. Fable interacts with Webpack through the fable-loader. Configuration for Webpack is defined in the webpack.config.js file. Note this sample only includes basic Webpack configuration for development mode, if you want to see a more comprehensive configuration check the Fable webpack-config-template.

F#

The sample only contains two F# files: the project (.fsproj) and a source file (.fs) in the src folder.

Web assets

The index.html file and other assets like an icon can be found in the public folder.