Programming Phoenix

Adding JavaScript

Brunch^[20] is a build tool written in Node.js. We’ll use Brunch to build, transform, and minify JavaScript code. Processing assets in this way makes your page load much more efficiently. Brunch not only takes care of JavaScript but also CSS and all of our application assets, such as images.

The Brunch structure is laid out in the web/static directory:

...
├── assets
├── css
├── js
├── vendor
...

We put everything in assets that doesn’t need to be transformed by Brunch. The build tool will simply copy those assets just as they are to priv/static, where they’ll be served by Phoenix.Static in our endpoint.

We keep CSS and JavaScript files in their respective directories. The vendor directory is used to keep any third-party ...