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.

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.