js in html is not executing in Phoenix framework sample app

Question

I'm playing around with the phoenix framework. I copied the chat example entirely but I'm not getting any results.

In fact when I write console.log("testing") in my app.js I notice that my console does not log anything...

I am getting the error referenced in this link:

phoenix framework - invalid argument at new Socket - windows

However that error seems to be related to Brunch not working in windows. When I brunch build, I can confirm that app.js has the console.log("testing") that I included.

Nevertheless, I don't see that console log when I visit my localhost:4000.

Why is JS not executing?

Answer 1

Turns out the guide is missing a key line that made it not work.

The guide has the following:

    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>

But that is missing the below line which you can put above the body tag.

<script>require("web/static/js/app")</script>

Answer 2

Even as Chowza already solved this question I would like to propose another, possible cleaner solution, using the autoRequire feature of Brunch.io.

The problem occurs because Brunch.io does not autoRequire the app.js under Windows correctly. Chowza worked around this issue by requiring the file manually in the html. You can omit the manual require if you alter the /brunch-config.js as follows: Change from

modules: {
  autoRequire: {
    "js/app.js": ["web/static/js/app"]
  }
}

To

modules: {
  autoRequire: {
    "js/app.js": ["web/static/js/app"],
    "js\\app.js": ["web/static/js/app"]
  }
}

This way the app.js is autoRequired, even if you work on a Windows based system.

I would like to mention, that this solution is based on the link Chowza himself posted, so all credit goes to him for pointing to the link.