Elm reactor - init with flags for 0.19

I’m not sure though why you call it outputtoignore, so let me try to explain elm-live behavior in more details as far as I understand it.

AFAIK, when connecting to localhost:8000 (by default), elm-live will always serve index.html or 404 if not found.

If you specify a path in the url, it will serve the corresponding file or 404 if not found (unless you use --pushstate in which case it will always serve index.html).

For compilation, elm-live performs exactly like elm make:

1. Let “elm make” generate index.html

If you don’t need any additional javascript (like flags, ports, custom elements or observers), you can let elm make generate the html file:

$ elm-live src/Main.elm

This will basically call elm make src/Main.elm then start a web server in .. So index.html will be generated by elm make in . and init the elm application. elm-live will then serve this index.html.

2. Tell “elm make” to generate a js file and use your own index.html

If you need your own index.html file (to add some flags or some javascript), then use elm make --output to generate a javascript file without the html:

$ elm-live src/Main.elm -- --output=elm.js

Every option after the -- is passed to elm make. (you can call elm.js main.js instead or whatever name, given that you use it correctly in index.html).

It is then your responsibility to initialize elm in an index.html file that will be served. If you don’t have any index.html like in your first example, you will get a 404.

However as you noticed, if you put your own index.html in . and forgot the --output=elm.js, this will generate ./index.html and overwrite your own. But this is not elm-live that overwrites your index.html, this is elm make. You can test exactly the same behavior by using only elm make.

This is why I advise to put your own index.html in a subdirectory and use elm-live -d to serve files from it (again always index.html by default without a specific url).

I actually do it even when not using elm-live for the same reasons, you could use instead for example python3 -m http.server 8000 from this subdirectory. The difference is that elm-live also injects some additional javascript itself to support live reloading, and watches source files to recompile when needed.

As a bonus, all your static files (index.html, css, js, images) and the generated elm.js will be cleanly grouped in a subdirectory that you can serve directly when deploying on github pages or netlify for example (preferably after minification).

3 Likes