Fable Simple Electron Template
npm comes bundled with node.js, but we recommend to use at least npm 5. If you have npm installed, you can upgrade it by running
npm install -g npm.
Although is not a Fable requirement, on macOS and Linux you'll need Mono for other F# tooling like Paket or editor support.
The project can be used by editors compatible with the new .fsproj format, like VS Code + Ionide, Emacs with fsharp-mode or Rider. Visual Studio for Mac is also compatible but in the current version the package auto-restore function conflicts with Paket so you need to disable it:
Preferences > Nuget > General.
Installing the template
In a terminal, run
dotnet new -i Fable.Template.Electron to install or update the template to the latest version.
Creating a new project with the template
In a terminal, run
dotnet new fable-electron to create a project in the current directory. Type
dotnet new fable-electron -n MyApp instead to create a subfolder named
MyApp and put the new project there.
The project will have the name of the directory. You may get some issues if the directory name contains some special characters like hyphens
Building and running the app
In the commands below, yarn is the tool of choice. If you want to use npm, just replace
npmin the commands.
- Install JS dependencies:
- Install F# dependencies:
- Start Fable daemon and Webpack dev server:
yarn startor in VS Code
- In another terminal,
yarn launchor in VS Code see
tasks.jsoninstructions to enable
The first two steps are only necessary the first time or whenever the dependencies change.
Any modification you do to the F# code will be reflected in the app after saving. For production, run
yarn run build to get optimized JS code.
Paket is the package manager used for F# dependencies. It doesn't need a global installation, the binary is included in the
.paket folder. Other Paket related files are:
- paket.dependencies: contains all the dependencies in the repository. At the sln level
- paket.references: one level below sln level
- paket.lock: automatically generated, but should be committed to source control, see why.
- Nuget.Config: prevents conflicts with Paket in machines with some Nuget configuration.
Paket dependencies will be installed in the
packagesdirectory. See Paket website for more info.
- package.json: contains the JS dependencies together with other info, like development scripts.
- yarn.lock: is the lock file created by yarn.
- package-lock.json: is the lock file understood by npm 5, if you use it instead of yarn.
Webpack is a bundler, which links different JS sources into a single file making deployment much easier. It also offers other features, like a static dev server that can automatically refresh the browser upon changes in your code or a minifier for production release. Fable interacts with Webpack through the
- webpack.config.js: is the configuration file for Webpack. It allows you to set many things: like the path of the bundle, the port for the development server or Babel options. See Webpack website for more info.
F# source files
As all Electron apps, the sample is split in two parts:
- The main process, responsible to create the app windows.
- The renderer process, responsible to generate the code used by index.html.
Each process has its own project in