This project contains a sample miso application with scripts to develop against vanilla GHC and to compile to Web Assembly or JavaScript.
-----------------------------------------------------------------------------
module Main where
-----------------------------------------------------------------------------
import Miso
import Miso.Lens
import Miso.String
-----------------------------------------------------------------------------
data Action
= AddOne
| SubtractOne
| SayHelloWorld
deriving (Show, Eq)
-----------------------------------------------------------------------------
main :: IO ()
main = run (startApp app)
-----------------------------------------------------------------------------
app :: Component parent Int Action
app = component initialModel updateModel viewModel
where
initialModel :: Int
initialModel = 0
-----------------------------------------------------------------------------
updateModel :: Action -> Effect parent Int Action
updateModel = \case
AddOne ->
this += 1
SubtractOne ->
this -= 1
SayHelloWorld ->
io_ (consoleLog "Hello World!")
-----------------------------------------------------------------------------
viewModel :: Int -> View Int Action
viewModel m = -- see app/Main.hs for more ...Tip
This requires installing nix with Nix Flakes enabled. Although not required, we recommend using miso's binary cache.
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 ensures the <body> and <head> are cleared between reloads.
Call nix develop to enter a shell with GHC 9.12.2
$ nix develop --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.
