Nithin Bekal About

Using bower with Phoenix

04 Jul 2015

I was looking for a way to use Bower to manage my front-end dependencies in a Phoenix app, and I found out that bower already works seamlessly with brunch, which is the build tool for assets that ships with Phoenix.

All you need to do is add a bower.json file to the root of your project and brunch takes care of installing the dependencies. For instance, here’s how you would add jquery to your project:

Make sure bower is installed using bower --version. If it isn’t installed alerady, install it using:

npm install -g bower

Now add a barebones bower.json file:

{
  "name": "MyPhoenixProject",
  "dependencies": {
    "jquery": "~ 2.1"
  }
}

And that’s literally it!

If you run mix phoenix.server, you will see the message, “info: Installing bower packages…”. It even watches the bower file for changes and installs dependencies if the server is already running. When you check the app.js file from the browser, you will see that jquery has been concatenated to the top of the file.

Comparing this to my preferred method to do the same thing in Rails, I definitely prefer Phoenix’s approach.

Hi, I’m Nithin! This is my blog about programming. Ruby is my programming language of choice and the topic of most of my articles here, but I occasionally also write about Elixir, and sometimes about the books I read. You can use the atom feed if you wish to subscribe to this blog or follow me on Mastodon.