Nithin Bekal

Posts About Notes Slides

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 Bekal. I work at Shopify in Ottawa, Canada. Previously, co-founder of CrowdStudio.in and WowMakers. Ruby is my preferred programming language, and the topic of most of my articles here, but I'm also a big fan of Elixir. Tweet to me at @nithinbekal.