🍱 miso-sampler

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.Html.Element as H
import           Miso.Html.Event as E
import           Miso.Html.Property as P
import           Miso.Lens
import           Miso.String
import qualified Miso.CSS as CSS
import           Miso.CSS (StyleSheet)
-----------------------------------------------------------------------------
data Action
  = AddOne PointerEvent
  | SubtractOne PointerEvent
  | SayHelloWorld
  deriving (Show, Eq)
-----------------------------------------------------------------------------
main :: IO ()
main = run (startApp app)
-----------------------------------------------------------------------------
app :: App Model Action
app = (component (Model 0) updateModel viewModel)
  { events = pointerEvents
  , styles = [ Sheet sheet ]
  }
-----------------------------------------------------------------------------
updateModel :: Action -> Transition Model Action
updateModel = \case
  AddOne _ ->
    this += 1
  SubtractOne _ ->
    this -= 1
  SayHelloWorld ->
    io_ (consoleLog "Hello World!")
-----------------------------------------------------------------------------

Tip

This requires installing nix with Nix Flakes enabled. Although not required, we recommend using miso's binary cache.

Development

Call nix develop to enter a shell with GHC 9.12.2

$ nix develop --experimental-features nix-command --extra-experimental-features flakes

Once in the shell, you can call cabal run to start the development server and view the application at http://localhost:8080

Build (Web Assembly)

$ nix develop .#wasm --command bash -c "make"

Build (JavaScript)

$ nix develop .#ghcjs --command bash -c "make js"

Serve

To host the built application you can call serve

$ nix develop .#wasm --command bash -c "make serve"

Clean

$ nix develop --command bash -c "make clean"

CI

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-cachix

Hosting

To upload and host your project to Github Pages, please see our Github workflow file and the necessary Github actions included.