Getting started with Miso/GHCJS

getting-started-with-miso.md

Toolchain

We have the choice of either using Nix or Stack. Stack is definitely the easiest by far, but Nix will technically be able to provide the most stable build result (assuming it works on macOS...).

To build the sample app with nix, we can do,

$ git clone https://github.com/dmjio/miso && cd miso/sample-app && nix-build

and with stack,

$ git clone https://github.com/dmjio/miso && cd miso/sample-app && stack setup && stack build

Using Stack

The workflow will look something like:

• Run stack build to build the project,
  • and also npm install socket.io && export NODE_PATH=$(pwd)/node_modules if you haven't done that already.
• Then either:
  • Open the built page open $(stack path --local-install-root)/bin/app.jsexe/index.html
  • Open a repl and use socket.io stack ghci

Using Nix

The Nix workflow will look something like:

• Run nix-build to build the project
  • and also nix-env -iA cabal-install -f '<nixpkgs>' if you haven't done that already
• Then either:
  • Open the built page open ./result/bin/app.jsexe/index.html
  • Open a repl by
    • jumping into a nix shell nix-shell -A env
    • run cabal configure --ghcjs, and then cabal repl

If you are on Linux, nix has a binary cache, used by appending https://cache.dmj.io to the commands, like nix-build --option extra-binary-caches https://cache.dmj.io. Alternatively, you can add it to /etc/nix/nix.conf,

binary-caches = https://cache.dmj.io/ https://cache.nixos.org/

Reloading Main in GHCJSi

With both stack ghci and cabal repl, you run main in the REPL. If you need to cancel main and run it again, you need to clear the body first, to avoid duplicate instances running. You do this by first import Miso.Dev and then clearBody >> main, to directly run main again after clearing the body.

The socket.io site can be found at http://localhost:6400.

Helpful Resources

• Miso README
• The GHCJS stack page
• Miso Isomorphic SPA