/fable-webmidi-sample

A sample Fable application which uses Web MIDI

Primary LanguageF#

Fable WebMIDI Sample

This sample contains a simple web app with Fable and a Web MIDI implementation with Fable.

This is the complementary sample for my F# Advent 2017 blog post at http://blog.pagansoft.de/articles/a-fable-of-webmidi/

Requirements

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.

Editor

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.

Building and running the app

In the commands below, yarn is the tool of choice. If you want to use npm, just replace yarn by npm in the commands.

  • Install JS dependencies: yarn install
  • Move to src folder: cd src
  • Install F# dependencies: dotnet restore
  • Start Fable daemon and Webpack dev server: dotnet fable yarn-start
  • In your browser, open: http://localhost:8080/

dotnet fable yarn-start (or npm-start) is used to start the Fable daemon and run a script in package.json concurrently. It's a shortcut of yarn-run [SCRIPT_NAME], e.g. dotnet fable yarn-run start.

If you are using VS Code + Ionide, you can also use the key combination: Ctrl+Shift+B (Cmd+Shift+B on macOS) instead of typing the dotnet fable yarn-start command. This also has the advantage that Fable-specific errors will be highlighted in the editor along with other F# errors.

Any modification you do to the F# code will be reflected in the web page after saving. When you want to output the JS code to disk, run dotnet fable yarn-build and you'll get a minified JS bundle in the public folder.

JS Output

This template uses babel-preset-env to output JS code whose syntax is compatible with a wide range of browsers. Currently it's set to support only Chrome.

Project structure

Paket

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.
  • paket.references: there should be one such a file next to each .fsproj file.
  • 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 packages directory. See Paket website for more info.

yarn/npm

  • 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.

JS dependencies will be installed in node_modules. See yarn and/or npm websites for more info.

Webpack

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 fable-loader.

  • 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

The template only contains three F# source files: the project (.fsproj), the WebMIDI module (WebMIDI.fs) and the Application source file (App.fs) in src folder.

Where to go from here

Check more Fable samples and check the awesome-fable for a curated list of resources provided by the community.