https://github.com/haskell-miso/miso-sampler
:bento: A sample miso application for getting started quickly
https://github.com/haskell-miso/miso-sampler
getting-started haskell miso website
Last synced: 17 days ago
JSON representation
:bento: A sample miso application for getting started quickly
- Host: GitHub
- URL: https://github.com/haskell-miso/miso-sampler
- Owner: haskell-miso
- License: bsd-3-clause
- Created: 2025-06-01T21:56:29.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-04-04T16:27:12.000Z (24 days ago)
- Last Synced: 2026-04-11T04:00:10.780Z (17 days ago)
- Topics: getting-started, haskell, miso, website
- Language: Haskell
- Homepage: https://sampler.haskell-miso.org/
- Size: 95.7 KB
- Stars: 12
- Watchers: 1
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
🍱 miso-sampler
====================
This project contains a sample [miso](https://github.com/dmjio/miso) application with scripts to
develop against vanilla GHC and to compile to Web Assembly or JavaScript.
### Source
View [source](https://github.com/haskell-miso/miso-sampler/blob/main/app/Main.hs).
### Install Nix (w/ flakes enabled)
```bash
# Install nix
curl -L https://nixos.org/nix/install | sh
# Enable flakes
echo 'experimental-features = nix-command flakes' >> ~/.config/nix/nix.conf
```
> [!TIP]
> Miso requires installing [nix](https://nixos.org) with [Nix Flakes](https://wiki.nixos.org/wiki/Flakes) enabled.
### Browser mode 🔥
For interactive development in the browser via the WASM backend
```bash
$ 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 `` and `` are cleared between reloads.
```haskell
main :: IO ()
main = reload defaultEvents app
```
### Live reload 🔥
If you use [ghciwatch](https://github.com/MercuryTechnologies/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.
```haskell
main :: IO ()
main = live defaultEvents app
```
See the [Miso.Reload](https://haddocks.haskell-miso.org/miso/Miso-Reload.html) haddocks for more information.
```bash
$ nix develop .#wasm --command bash -c 'make watch'
```
### Development
Call `nix develop` to enter a shell with [GHC 9.12.2](https://haskell.org/ghc)
```bash
$ nix develop .#wasm
```
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)
```bash
$ nix develop .#wasm --command bash -c "make"
```
### Build (JavaScript)
```bash
$ nix develop .#ghcjs --command bash -c "make js"
```
### Serve
To host the built application you can call `serve`
```bash
$ nix develop --command bash -c "make serve"
```
### Clean
```bash
$ nix develop --command bash -c "make clean"
```
### CI
Ensure that the Haskell miso [cachix](cachix.org) is being used when building your own projects in CI
```yaml
- 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](https://github.com/haskell-miso/miso-sampler/blob/main/.github/workflows/main.yml#L38-L56) and the necessary Github actions included.