Elm reactor and custom HTML
elm-reactor is an underrated tool. Not only does it do on-demand recompilation of Elm source code, but it can serve up other assets, too.
But did you know you can serve your own HTML with live-compiled Elm code, too? This is useful if you need JS interop or want to start your program with flags.
The trick here is that elm-reactor exposes a “magical” /_compile directory — any elm file prefixed with that path will be pulled in and compiled on page-load.
For example, start with a folder-structure like this:
myProject/
|- elm-package.json
|- index.html
`- src/
`- Main.elm
Placing your index.html at the same level as your elm-package.json means that running elm-reactor from your myProject folder will allow you to point your browser to http://localhost:8000/index.html
As for the contents of your index.html, start with something like this:
<html>
<head>
<style>
/* custom styles? Sure! */
</style>
</head>
<body>
<!-- Relative to index.html, main.elm lives in `src/Main.elm`. -->
<!-- Prefixing that with `/_compile/` gives us magic! -->
<script src="/_compile/src/Main.elm"></script>
<script>
var app = Elm.Main.fullscreen()
// You could also pass flags, or setup some ports, ...
</script>
</body>
</html>
There, all set!
Note that elm-reactor has also learned how to serve quite a few other file types with the correct content type headers, so pulling in some CSS, images or JSON should work, too.
Shout-out to @ohanhi for the tip!
