Does anyone have an example of custom html for elm-reactor

Remy D'Agostino

unread,

Feb 18, 2015, 12:45:26 PM2/18/15

to elm-d...@googlegroups.com

I can't figure out how to use elm reactor with custom html, an example would help quite a lot I think.

Just going by the documentation, this is what I tried.

This is what my directory looks like:

ProjectRoot

|- elm-stuff

|- build-artifacts (...)

|- packages (...)

|- MyProject

|- Main.elm

|- custom.html

|- elm-package.json

|- elm-js

`custom.html` looks like this.

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Main</title>

<style>html, head, body { padding:0; margin:0; }</style>

</head>

<body>

<script type="text/javascript" src="/_reactor/debug.js"></script>

<script type="text/javascript">var main = Elm.fullscreenDebug('MyProject.Main', 'MyProject/Main.elm');</script>

</body>

</html>

I'm not sure it matters but `MyProject/Main.elm` looks like this:

module MyProject.Main where

import Text

main = Text.asText "Hello World"

---

The error shown on the page as well as in the console is just, "Cannot read property 'Main' of undefined"

I did tried stepping through the debugger. It fails to load find my module at this point: https://github.com/elm-lang/elm-reactor/blob/master/frontend/debugger-implementation.js#L242

Indeed, the only modules it has are these ones:

Object.keys(Elm)

> ["Native", "Array", "Basics", "Char", "Color", "Debug", "Dict", "Graphics", "Html", "Json", "List", "Markdown", "Maybe", "fullscreen", "embed", "worker", "Result", "SideBar", "Signal", "Slider", "String", "Text", "Transform2D", "VirtualDom", "Window", "fullscreenDebug"]

I'm not sure where to go at this point. Could anyone share an example showing how to get this up and running?

Rehno Lindeque

unread,

Feb 18, 2015, 4:25:52 PM2/18/15

to elm-d...@googlegroups.com

So, the easiest way is definitely to just use the elm-reactor executable directly if you can (not sure if you have a specific reason for using your own custom.html file? I do it only because I'm using ports and I've patched elm's debug.js to work with ports)

So in my own debug.html, I had to include the compiled code for my app directly into the page (obviously you don't get automatic reload this way):

<script type="text/javascript" src="my-elm-app.js"></script>

It might be worth trying to open debug.html from inside the localhost:8000 app that elm-reactor launches though, I think I may have managed to get live reloading working that way in the past (but I'm not sure, my memory is a bit hazy)

Remy D'Agostino

unread,

Feb 20, 2015, 6:19:49 AM2/20/15

to elm-d...@googlegroups.com

Thanks Rehno,

The reason I am trying to use my own html file is so that I can include custom css. The html that the elm-reactor executable packs your code into has a difficult structure to work with for some projects because it contains a bunch of random css rules about link-styling, font-face. It also sets the body height to 100% but puts your app in a `height: auto` div which makes it hard to make a multi-column layout.

Ideally, I would love to just specify a custom css file to go with elm-reactor but that isn't supported.

I'd like to have:

Elm-reactor's auto-reload and time-travel debugging
My own html and css template.

If I didn't want elm-reactor's unique features I would probably just setup a gulp workflow for compiling my source.

I want to have my cake and eat it too! :P

- Remy

Rehno Lindeque

unread,

Feb 20, 2015, 8:36:55 AM2/20/15

to elm-d...@googlegroups.com

I know what you mean... I run into all the same things. Give it a try opening the .html file from your localhost:8000 server. I think you can specify all your css as relative paths in the html and load it that way.

I was hoping to do a PR at some point so that you could specify an additional paths for static assets like css and images that elm-reactor could serve. It should be pretty easy, unfortunately I just don't think I'll manage to get round to it any time soon...

Remy D'Agostino

unread,

Feb 20, 2015, 12:51:43 PM2/20/15

to elm-d...@googlegroups.com

Thanks for your help Rehno,

I'm glad it's not just me! It's a real shame that this doesn't work, since it makes elm-reactor only useful for small demos. Having custom html would enable elm-reactor to be used as a development tool for all sorts of things not just small games.

Anyway, it looks like I'll just put together a small dev server in something else for now.

Thanks again. :)

- Remy

Gábor Varga

unread,

Jul 18, 2015, 2:26:22 PM7/18/15

to elm-d...@googlegroups.com

I ran into the same issue today. Refering elm.js from the html file did the trick for me: it created a good enough development environment for now.

I posted the details here: https://github.com/elm-lang/elm-reactor/issues/76

This solution is not perfect because elm.js has to be first generated, and the updates are also only picked up if you save something when the debugger is already running. It would not pick up any changes made before you loaded your custom.html.

But even with these limitations I think it brings value.

Gabor

flip101

unread,

Oct 4, 2015, 4:51:00 PM10/4/15

to Elm Discuss

Could you please post your patched debug.js somewhere? I also need ports functionality + debugger. I noticed that the fullscreenDebug function doesn't take args

Elm.fullscreenDebug = function(moduleName, fileName)

compared to

Elm.fullscreen = function(module, args)

Op woensdag 18 februari 2015 22:25:52 UTC+1 schreef Rehno Lindeque:

Tomek Wiszniewski

unread,

Feb 13, 2016, 3:43:06 PM2/13/16

to Elm Discuss

I’ve just published a rewrite of git.io/elm-live. It isn’t as fancy as elm-reactor (no hot reloading, no time-travel debugger). But it’s supposed to be more flexible.

Custom HTML and CSS are really easy (git.io/elm-live#/examples):

$ echo \
'<!doctype html>
<link rel="stylesheet" href="/style.css" />
<script src="/elm.js"></script>
' > index.html
$ elm-live Main.elm --output=elm.js --open

Hope it’s useful!

Tomek

Maxwell Gurewitz

unread,

Feb 13, 2016, 5:40:04 PM2/13/16

to Elm Discuss

Take a look at elm-server. I wrote it after experiencing difficulties with elm reactor. It serves assets with live reloading, and will watch and recompile your elm files.

https://www.npmjs.com/package/elm-server

Reply all

Reply to author

Forward