how to pass elm flags

[johndeighan]

I love the fact that I can just globally install elm and elm-live, do an "elm init", create a src/Main.elm file and invoke elm-live. Short and simple. But to make my app responsive, I need to 1) respond to "window resized" events and 2) initially, get the window size. From research, I see that to get the initial window size, I need to pass in elm flags in the index.html file:

<script>
let app = Elm.Main.init({
flags: {
windowHeight: window.innerHeight,
windowWidth: window.innerWidth
}
})
</script>

Well, darn... I didn't want to have to mess with index.html - elm-live creates that automatically for me.

I tried to edit the index.html file created, but unfortunately, elm-live rebuilds it each time it's run. Is there some way to handle this without having to change my development process?

[tom-a-horrocks]

Try running elm-live src/Main.elm --open -- --output=app.js. This way, elm-live will compile app.js and use index.html as-is. A few gotchyas if you're on Windows:

• If you launch elm-live from PowerShell, you'll need to include -- in quotes: elm-live src/Main.elm --open "--" --output=app.js
• Slightly unrelated, but if you're using VSCode then compiling your app to "elm.js" causes weird errors! Use "app.js" or "main.js" instead.