Example of custom html #76

remydagostino · 2015-02-02T23:57:46Z

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 here.

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?

The text was updated successfully, but these errors were encountered:

evancz · 2015-02-03T12:08:32Z

Can you ask this question on the elm-discuss mailing list and link to this issue? I think someone in the community can help.

jmatsushita · 2015-03-15T13:02:59Z

Same problem here, and unfortunately the OP didn't get his problem solved on the mailing list: https://groups.google.com/forum/#!topic/elm-discuss/sv06t77n_MA

gaborv · 2015-07-18T18:18:02Z

I am no expert on this matter by any means, but I ran into the same issue today and managed to come up with a solution (at least a temporary one).

My directory structure is:

ProjectRoot
|- elm-stuff
  |- build-artifacts (...)
  |- packages (...)
|- App.elm
|- index.html
|- elm-package.json
|- elm.js

Basically I just included elm.js in my index.html file like:

<head>
        ...
        <script type="text/javascript" src="/_reactor/debug.js"></script>
        <script type="text/javascript" src="/elm.js"></script>
        ...
</head>
...
<script type="text/javascript">
    var main = Elm.fullscreenDebug('Portal', './App.elm');
</script>

Module header in App.elm:

module Portal (main) where
...

The elm.js is only generated when you open App.elm from reactor directly -- but you only have to this once. For subsequent changes it gets automatically updated when you use the debugger through Index.html.

Hope it helps, at least for beginners.

hauntedhost · 2015-08-04T07:53:16Z

FWIW, I just pushed a commit to a tiny app I'm tinkering with while learning Elm that adds a proxy server for Elm reactor.

Here's the code: hauntedhost/elm-buzzword-bingo@2ac3070

TL;DR, run npm run debug and it will launch elm-reactor along with an additional server that proxies appropriate requests and websocket connection to elm-reactor.

PedroSena · 2015-08-10T12:52:00Z

@gaborv Just a quick question, where does the debug.js comes from ? I thought that simply running the reactor would create the _reactor dir (I was thinking it was a temporary dir) but it didn't happen.

Edit: Nevermind, the issue I was facing was related to the fact my ELM_HOME was not properly set.

netaisllc · 2015-09-19T07:11:46Z

@PedroSena Could you share what you discovered about your ELM_HOME. I'm having Reactor issues on Ubuntu with node via npm and fear y ELM_HOME is not right. But the docs are vague...

nicolashery · 2015-09-27T15:59:09Z

No luck after trying your setup @gaborv :(

debug.js:15462 Uncaught TypeError: Cannot read property 'forEach' of undefined

basti1302 · 2015-10-01T19:45:03Z

I also struggled with this for a while but managed to get it working now. Thought I share my setup as a minimal, stripped down example:

https://github.com/basti1302/elm-reactor-custom-html/tree/1.1.0

This setup uses the elm-platform provided via npm and uses npm run scripts to set ELM_HOME correctly.

Kind regards

Bastian

dzannotti · 2015-10-11T22:40:35Z

@basti1302 to the best of my knowledge (which is very little) your example does not allow hotswapping, any ideas how to achieve that?

basti1302 · 2015-10-12T08:10:45Z

Hi @dzannotti!

It does allow hotswapping -- that is, you change your elm files and the browser reloads automatically, showing the updated version of your app.

Make sure to follow the steps from https://github.com/basti1302/elm-reactor-custom-html/tree/1.1.0#development-mode

In particular, you need to start the server with npm run dev and go to index.debug.html, not index.html. Does that work for you? If not, please file a bug at https://github.com/basti1302/elm-reactor-custom-html/issues.

Kind regards

Bastian

simonh1000 · 2015-10-25T22:04:17Z

@gaborv : like @nicolashery I am getting Cannot read property 'forEach' of undefined error.
It comes from this function

function flattenSignalGraph(nodes)
{
    var nodesById = {};

    function addAllToDict(node)
    {
        nodesById[node.id] = node;
        node.kids.forEach(addAllToDict);    // this line causes the error
    }
    nodes.forEach(addAllToDict);

    var allNodes = Object.keys(nodesById).sort(compareNumbers).map(function(key) {
        return nodesById[key];
    });
    return allNodes;
}

Note that I am using the full Elm Architecture, i.e. with ports

league · 2015-11-06T23:03:51Z

@simonh1000 I'm getting the same error: Cannot read property 'forEach' of undefined, trying to use the debug reactor with StartApp with ports. It occurs even in this minimal example:

module MinimalForeachBug where

import Effects exposing (none, Never)
import Html exposing (text)
import StartApp exposing (start)
import Task exposing (Task)

noFx m = (m, none)

app =
  start { init = noFx 0
        , view = \_ -> text << toString
        , update = \_ -> noFx << identity
        , inputs = []
        }

main = app.html
port tasks : Signal (Task Never ())
port tasks = app.tasks

It first happened to me when trying to do custom HTML with Elm.fullscreenDebug as described above. But it also occurs just clicking the wrench icon to debug the module. Curiously, it does not throw an error when used at http://elm-lang.org/try

Maybe this should be spun off as a distinct issue?

brendan-jefferis · 2015-11-22T03:16:31Z

I just wrote a quick tutorial on this http://boonofcode.svbtle.com/setting-up-an-atom-elm-dev-environment

Feedback/criticism/improvements welcom

SerialVelocity · 2016-03-06T17:50:33Z

@league @nicolashery @simonh1000 The Cannot read property 'forEach' of undefined is actually an elm-reactor bug, nothing to do with getting this working. Have a look at issue #145 and PR #149 on what it is and how to fix it temporarily.

iammerrick · 2016-10-21T19:33:40Z

https://github.com/tomekwi/elm-live seems to be a nice option for this work flow, though hopefully elm-reactor adds support for something like this soon.

jvoigtlaender mentioned this issue Aug 9, 2015

Elm Reactor + External CSS #138

Open

CumpsD mentioned this issue Apr 13, 2016

"Cannot read property 'forEach' of undefined" on dev server in Chrome jmfirth/generator-elm-spa#2

Open

evancz closed this as completed May 12, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Example of custom html #76

Example of custom html #76

remydagostino commented Feb 2, 2015

evancz commented Feb 3, 2015

jmatsushita commented Mar 15, 2015

gaborv commented Jul 18, 2015

hauntedhost commented Aug 4, 2015

PedroSena commented Aug 10, 2015

netaisllc commented Sep 19, 2015

nicolashery commented Sep 27, 2015

basti1302 commented Oct 1, 2015

dzannotti commented Oct 11, 2015

basti1302 commented Oct 12, 2015

simonh1000 commented Oct 25, 2015

league commented Nov 6, 2015

brendan-jefferis commented Nov 22, 2015

SerialVelocity commented Mar 6, 2016

iammerrick commented Oct 21, 2016

Example of custom html #76

Example of custom html #76

Comments

remydagostino commented Feb 2, 2015

evancz commented Feb 3, 2015

jmatsushita commented Mar 15, 2015

gaborv commented Jul 18, 2015

hauntedhost commented Aug 4, 2015

PedroSena commented Aug 10, 2015

netaisllc commented Sep 19, 2015

nicolashery commented Sep 27, 2015

basti1302 commented Oct 1, 2015

dzannotti commented Oct 11, 2015

basti1302 commented Oct 12, 2015

simonh1000 commented Oct 25, 2015

league commented Nov 6, 2015

brendan-jefferis commented Nov 22, 2015

SerialVelocity commented Mar 6, 2016

iammerrick commented Oct 21, 2016