# Elm reactor - init with flags for 0.19

**URL:** <https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217>\
**Category:** Learn\
**Created:** [October 15, 2018, 7:08am UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217 "2018-10-15T07:08:28Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![tangledupinblue](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@tangledupinblue](https://discourse.elm-lang.org/u/tangledupinblue)\
**Post date:** [October 15, 2018, 7:08am UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/1 "2018-10-15T07:08:28Z")

</div>

Hi,

I want to be able to develop my SPA in elm using reactor and pointing to a dev web api. Previously what I did was have a separate elm module and pass the server url parameter in the flag - as per the discussion below:

> [@Elm-reactor with flags?](https://discourse.elm-lang.org/t/elm-reactor-with-flags/764/2):
>
> You could have [elm-reactor serve custom HTML like Ilias described](https://blog.ilias.xyz/elm-reactor-and-custom-html-9e7143553807). Personally I prefer having a Reactor.elm entry point that supplies default flags to the main function of Main.elm module Main exposing (main, reactor) main = Html.programFlags { init = init -- ... } defaultFlags = -- Your reactor flags reactor = Html.program { init = init defaultFlags -- ... } init flags = -- ... module Reactor exposing (main) import Main main…

The nice thing about doing it this way is that I could port the compiled js code to the application server without having to make any code changes to my elm files.

This does not seem to work anymore in elm 0.19 with the Browser.element . I understand that the api has changed and I can’t figure out how to pass the defaultflag to the init function - I get an error similar to the one below:

Any help is greatly appreciated. Thanks.

The 1st argument to `element` is not what I expect:

39| Browser.element  
40|\> { init = init defaultFlags  
41|\> , update = update  
42|\> , subscriptions = subscriptions  
43|\> , view = view  
44|\> }

This argument is a record of type:

```
{ init : ( Model, Cmd Msg )
, subscriptions : Model -> Sub Msg
, update : Msg -> Model -> ( Model, Cmd Msg )
, view : Model -> Html Msg
}

```

But `element` needs the 1st argument to be:

```
{ init : flags -> ( Model, Cmd Msg )
, subscriptions : Model -> Sub Msg
, update : Msg -> Model -> ( Model, Cmd Msg )
, view : Model -> Html Msg
}

```

---

<div class="post-metadata">

**Author:** ![JDemler](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jdemler/32/2130_2.png) [@JDemler](https://discourse.elm-lang.org/u/JDemler)\
**Post date:** [October 15, 2018, 8:45am UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/2 "2018-10-15T08:45:23Z")

</div>

If you do not care about compiling your own compiler:

We forked the compiler to be able to do this: [https://github.com/CurrySoftware/compiler](https://github.com/CurrySoftware/compiler)

Now you can use `<script src="/src/Main.elm?output=js" charset="utf-8"></script>` to get the JavaScript from the reactor and from there on the solution is identical to the one you linked.

---

<div class="post-metadata">

**Author:** ![tangledupinblue](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@tangledupinblue](https://discourse.elm-lang.org/u/tangledupinblue)\
**Post date:** [October 15, 2018, 10:48am UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/3 "2018-10-15T10:48:05Z")

</div>

Thanks a lot. Will have a look - but was hoping for something simpler 🙂

---

<div class="post-metadata">

**Author:** ![G4BB3R](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/g4bb3r/32/4544_2.png) [@G4BB3R](https://discourse.elm-lang.org/u/G4BB3R)\
**Post date:** [October 15, 2018, 4:38pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/4 "2018-10-15T16:38:07Z")

</div>

If you have Haskell platform installed, you can run/compile this script to simulate 0.18 /\_compile/ feature.  
If the compilation fails, you can detect it in the index.html and show the reactor errors in iframe.  
Example: [https://pastebin.com/t8VUNzyg](https://pastebin.com/t8VUNzyg)

> **[G4BB3R/elm-invoker](https://github.com/G4BB3R/elm-invoker)**
>
> Tool for compiling elm from url. Contribute to G4BB3R/elm-invoker development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [October 15, 2018, 5:44pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/5 "2018-10-15T17:44:46Z")

</div>

Folks, what features do you use in `elm reactor` that is not in [elm-live](https://github.com/wking-io/elm-live)?

I often use elm-live as it has some nice features like `elm make` flags support (particularly `--output` so you can use flags and `--debug`), push-state (a default file to serve that is handy for SPA routing tests), hot-reloading and interface/port binding configuration, and I am not missing elm-reactor, so I wonder…

---

<div class="post-metadata">

**Author:** ![G4BB3R](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/g4bb3r/32/4544_2.png) [@G4BB3R](https://discourse.elm-lang.org/u/G4BB3R)\
**Post date:** [October 16, 2018, 12:33am UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/6 "2018-10-16T00:33:55Z")

</div>

Elm Live is very complete. But for my use case I needed to build my own script. If elm-live updated the output content with a variable in the top showing wether the compilation were successful or not, I would be able to use it.

---

<div class="post-metadata">

**Author:** ![Nathan\_Schultz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nathan_schultz/32/1382_2.png) [@Nathan\_Schultz](https://discourse.elm-lang.org/u/Nathan_Schultz)\
**Post date:** [October 16, 2018, 12:59am UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/7 "2018-10-16T00:59:04Z")

</div>

For strictly elm based apps I’ve used elm-live in the past and was happy with it.

But for those which are a mixture of things I found elm-live likes overwriting my custom Index.html page (despite using the --output flag to only update the java-script). Maybe there’s a flag I’ve missed - but I couldn’t work it out.

---

<div class="post-metadata">

**Author:** ![Viir](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/viir/32/4103_2.png) [@Viir](https://discourse.elm-lang.org/u/Viir)\
**Post date:** [October 16, 2018, 5:40pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/8 "2018-10-16T17:40:22Z")

</div>

> [@dmy](#):
>
> Folks, what features do you use in `elm reactor` that is not in [elm-live](https://github.com/wking-io/elm-live)

The most important advantage of elm reactor over elm-live I found: elm reactor works without messing up the file `index.html` in the elm project directory.  
Could not get elm live to work like that. When I used the `--output` option, it stopped working, sending `index.html`(or an error message if there is no `index.html` anymore) to the browser instead of the compilation output.  
This problem was not enough to prevent use of elm-live in my projects so far.

---

<div class="post-metadata">

**Author:** ![Sidney](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sidney/32/3290_2.png) [@Sidney](https://discourse.elm-lang.org/u/Sidney)\
**Post date:** [October 16, 2018, 5:55pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/9 "2018-10-16T17:55:56Z")

</div>

> [@Nathan\_Schultz](#):
>
> But for those which are a mixture of things I found elm-live likes overwriting my custom Index.html page (despite using the --output flag to only update the java-script)

> [@Viir](#):
>
> elm reactor works without messing up the file `index.html` in the elm project directory.  
> Could not get elm live to work like that. When I used the `--output` option…

That could be a bug with elm-live, I just want to confirm that you’re both running elm-live like this:

```
elm-live Main.elm -- --output=elm.js

```

If you leave out that first `--`, then the output flag gets passed to elm-live which might just ignore it. Flags after the `--` are passed to `elm make`.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [October 16, 2018, 6:08pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/10 "2018-10-16T18:08:18Z")

</div>

Ah right, it also happened to me at first to overwrite my `index.html` by using the wrong arguments, that’s why I usually put my `index.html` in a subdirectory to avoid messing with it inadvertently, for example using `./public/index.html`:

```bash
$ elm-live src/Main.elm -d public -- --output=public/elm.js

```

`elm-live` will serve `./public/index.html` that must include `elm.js` and init the elm application. You can also put some `css` or other static files in `public/`. If you forgot the `-- --output`, the generated `index.html` will be in `.` and won’t overwrite your carefully crafted one (which is indeed annoying).

---

<div class="post-metadata">

**Author:** ![Nathan\_Schultz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nathan_schultz/32/1382_2.png) [@Nathan\_Schultz](https://discourse.elm-lang.org/u/Nathan_Schultz)\
**Post date:** [October 17, 2018, 12:54am UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/11 "2018-10-17T00:54:48Z")

</div>

Indeed I was leaving out the first `--` which makes all of the difference.  
Thanks Sidney!

---

<div class="post-metadata">

**Author:** ![Viir](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/viir/32/4103_2.png) [@Viir](https://discourse.elm-lang.org/u/Viir)\
**Post date:** [October 17, 2018, 7:25pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/12 "2018-10-17T19:25:21Z")

</div>

> [@Sidney](#):
>
> That could be a bug with elm-live, I just want to confirm that you’re both running elm-live like this:
> 
> ```auto
> elm-live Main.elm -- --output=elm.js
> 
> ```
> 
> If you leave out that first `--` , then the output flag gets passed to elm-live which might just ignore it. Flags after the `--` are passed to `elm make` .

Testing this, I have renamed the Elm entry file to `Main.elm`, and used this commandline:  
`elm-live Main.elm -- --output=elm.js`  
With this setup, elm-live responds with a `404 Not Found` with a the following body:

> File Not Found

I see that the `elm.js` file was created tough.

* * *

Based on the guide from @dmy at [Elm reactor - init with flags for 0.19 - #10 by dmy](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/10), I found this working setup:  
`elm-live Main.elm -d outputtoignore -- --output=outputtoignore/index.html`

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [October 17, 2018, 8:29pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/13 "2018-10-17T20:29:43Z")

</div>

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:

```bash
$ 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:

```bash
$ 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).

---

<div class="post-metadata">

**Author:** ![Viir](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/viir/32/4103_2.png) [@Viir](https://discourse.elm-lang.org/u/Viir)\
**Post date:** [October 18, 2018, 4:45pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/14 "2018-10-18T16:45:01Z")

</div>

> [@dmy](#):
>
> I’m not sure though why you call it `outputtoignore`

This is to communicate the meaning of this file to people:  
When someone finds a file called `index.html`, how do they know that this is just a temporary artifact from a development tool and not meant to be read or maintained by humans? How do they know it should not be tracked in version control?  
Moving it into a directory called `outputtoignore` is just a way to communicate this better.

Also, I usually avoid having temporary files or build artifacts being written to the root directory of a project. That is why, before I learned this way of setting up elm-live in this thread, elm-reactor had a big advantage in this regard.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [October 18, 2018, 5:02pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/15 "2018-10-18T17:02:20Z")

</div>

> [@Viir](#):
>
> How do they know it should not be tracked in version control?

In this case, I would just put it in `.gitignore`, but I think I get your point.

---

<div class="post-metadata">

**Author:** ![Viir](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/viir/32/4103_2.png) [@Viir](https://discourse.elm-lang.org/u/Viir)\
**Post date:** [October 18, 2018, 5:26pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/16 "2018-10-18T17:26:22Z")

</div>

> [@dmy](#):
>
> In this case, I would just put it in `.gitignore` , but I think I get your point.

That is a good point 👍  
Reducing the number of entries in gitignore felt good 😃

> **Reducing the number of entries in gitignore**
>
> ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/9/98c4d73a65c031d7887cef47617e076c30577de1.png)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [October 28, 2018, 5:26pm UTC](https://discourse.elm-lang.org/t/elm-reactor-init-with-flags-for-0-19/2217/17 "2018-10-28T17:26:22Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.