This project contains a sample miso application with scripts to develop against vanilla GHC and to compile to Web Assembly or JavaScript.
View source.
# Install nix
curl -L https://nixos.org/nix/install | sh
# Enable flakes
echo 'experimental-features = nix-command flakes' >> ~/.config/nix/config.nixTip
Miso requires installing nix with Nix Flakes enabled.
For interactive development in the browser via the WASM backend
$ nix develop .#wasm --command bash -c 'make repl'Preprocessing executable 'app' for app-0.1.0.0...
GHCi, version 9.12.2.20250924: https://www.haskell.org/ghc/ :? for help
Open http://127.0.0.1:8080/main.html or import http://127.0.0.1:8080/main.js to boot ghci
Paste the URL in your browser. Doing so will cause assets to transfer; you can inspect the network tab, but do not refresh the page. The REPL will load in the terminal
Loaded GHCi configuration from /Users/dmjio/Desktop/miso-sampler/.ghci
[1 of 2] Compiling Main ( app/Main.hs, interpreted )
Ok, one module loaded.
ghci>
Finally, to run the example app, run main in the repl:
ghci> main
and you will see
Call :r to refresh the page with the latest code. Using Miso.Run.reload (as shown below) ensures the <body> and <head> are cleared between reloads.
main :: IO ()
main = reload defaultEvents appIf you use ghciwatch you can have live reload functionality (where main is executed whenever a file is saved to disk).
When combined with the live function it is possible to persist the application state between GHCi reloads. This is like reload, except your application state will not be cleared.
main :: IO ()
main = live defaultEvents appSee the Miso.Reload haddocks for more information.
$ nix develop .#wasm --command bash -c 'make watch'Call nix develop to enter a shell with GHC 9.12.2
$ nix develop .#wasmOnce in the shell, you can call cabal run to start the development server and view the application at http://localhost:8080
$ nix develop .#wasm --command bash -c "make"$ nix develop .#ghcjs --command bash -c "make js"To host the built application you can call serve
$ nix develop --command bash -c "make serve"$ nix develop --command bash -c "make clean"Ensure that the Haskell miso cachix is being used when building your own projects in CI
- name: Install cachix
uses: cachix/cachix-action@v16
with:
name: haskell-miso-cachixTo upload and host your project to Github Pages, please see our Github workflow file and the necessary Github actions included.
