To play with elmish, I Added the animalquiz kata in the Fable.Elmish.React Template. The project works as the standard project created by that template described here. Just click the home to play.
It uses a text area and a submit button to play the "quiz".
what follow is the original text of the readme of the fable-elmish template:
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.Elmish.React::* to install or update the template to latest version.
In some shells you many need quotations:
dotnet new -i "Fable.Template.Elmish.React::*". If you use dotnet SDK 2, you should only need to type
dotnet new -i Fable.Template.Elmish.React.
Creating a new project with the template
In a terminal, run
dotnet fable-elmish-react to create a project in the current directory. Type
dotnet new fable-elmish-react -n awesome instead to create a subfolder named
awesome 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
- Install JS dependencies:
- Move to
- Install F# dependencies:
- Start Fable daemon and Webpack dev server:
dotnet fable npm-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 [SCRIP_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 (or
npm-build) and you'll get a minified JS bundle in the
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
- paket.lock: automatically generated, but should 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.
- package-lock.json: is the lock file created by npm5.
JS dependencies will be installed in
node_modules. See npm website for more info.
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
The template only contains two F# source files: the project (.fsproj) and a source file (.fs) in