Where to put javascript files in the Phoenix framework

Question

So I have a file foo.js which contains the following:

$( document ).ready(function() {
  alert("hello world");
});

and if I put it to the web/static/js folder then it doesn't get executed, but if I put it to the web/static/vendor folder then it does, so I wonder why it doesn't work from the js folder? And where should I put my js files? The vendor folder doesn't seem to be the right place ...

Answer 1

As phoenixframework is using bruch.io as default. In it default configuration. There are two javascript folders

1. web/static/js
2. web/static/vendor

When you add .js files under /web/static/vendor these files will be put in non wrapped codebase. These files will undergo concatinations and other processes and brunch.io with other js files (which also include files under web/static/js) and then will be put it in priv/static/js/app.js

When you add .js files under web/static/js these files content will be put in wrapped codebase and then these file will undergo concatination with other brunch.io processes like previously mentioned. To reference to these file you need to use require() To require it first then you can use it.

I hope you understand the reasons here. I researched from https://github.com/brunch/brunch-guide/blob/master/content/en/chapter04-starting-from-scratch.md.

And these configuration can be overriden in the file brunch-config.js or brunch-config.coffee in the phoenixframework geterated folder content.

Answer 2

It turns out that when you add new files to the js folder, you have to require it either in your html file or in app.js, that's one of the brunch's features