This project contains a sample miso application with scripts to develop against vanilla GHC and to compile to Web Assembly or JavaScript.
View source.
curl -fsSL https://install.determinate.systems/nix | sh -s -- install Tip
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 (startApp defaultEvents app)If you use ghciwatch you can have hot reload functionality (where main is executed whenever a file is saved to disk).
$ nix develop .#wasm --command bash -c 'make watch'Call nix develop to enter a shell with GHC 9.12.2
$ nix develop .#wasm --experimental-features nix-command --extra-experimental-features flakesOnce 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.
