At work today I used
bower link and wanted to know more about how it works. I'm not going to talk about why you should use Bower, how to use it generally, or really anything useful for most people. I'm only going to talk about the
bower link command.
What does it do?
Linking with Bower creates symlinks. It makes a connection between two places on your computer so you can keep a clean file structure but still have all the code where you need it. It also means if you need the code in more than one place you only need one “master” copy and it can appear elsewhere as well.
How do I use it?
First, let’s lay out an example. You’re working on a project and need to write some new functionality. Typically you’d just make a new directory and include your feature’s code in there, but for this example you want the code to be stand alone (perhaps you’ll use it in another project, or perhaps you’ll publish it for others to use). So you decide to write a package for Bower to manage.
Here’s the setup so far:
1 2 3 4 5 6 7 8 code/ my_awesome_project/ lots.txt of.rb files.js here.html new_package/
Make your package a Bower package
1 2 $ cd ~/code/new_package $ bower init
I just went ahead and accepted all the defaults, but if it was a real package you’d probably want to think about them. Again, this isn’t a post about all of Bower, so I’ll skip over any details on the
bower init command.
Now your package looks like this:
1 2 3 new_package/ node_modules/ <-- New! bower.json <-- New!
Tell Bower about your package
Next we need to tell Bower about the
new_package directory. This command won’t change the
new_package directory at all.
1 2 $ cd ~/code/new_package $ bower link
For Mac computers, the output of that will be:
1 bower link /Users/lbain/.local/share/bower/links/new_package > /Users/lbain/code/new_package
lbain will be different in your case.)
Ok, let’s take a quick peak under the hood and look into
1 $ cd /Users/lbain/.local/share/bower/links
From here you can see all the links you’ve created (probably just the one
1 $ cd new_package
And now you should see the
node_modules directory and the
bower.json right there. So you can see using
bower link creates a connection (some might even go so far as to say “link”) between the original and the bower-controlled code.
Ok, we’re halfway there!
Tell your project about your package
Now we can go back to your project and get to include your package.
1 $ cd ~/code/my_awesome_project
From here we run the
bower link command, but with a parameter of the package name.
1 $ bower link new_package
Note: The fact that you’re just giving the name of the directory you want to link is pretty much the only really clear advantage of using
bower link over a traditional symlink. Yes, you get all of the associated Bower-goodness, but for this example (where we’re not looking at the Bower-goodness) the name is about the only interesting thing.
The output of that is:
1 $ bower link /Users/lbain/code/my_awesome_project/bower_components/new_package > /Users/lbain/.local/share/bower/links/new_package
The content of
/Users/lbain/.local/share/bower/links/ hasn’t changed. Rather, that directory keeps a list of all linkable packages, not the packages that have been linked.
Now your directories should look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 code/ my_awesome_project/ bower_components/ <-- New! new_package/ <-- New! node_modules/ <-- New! bower.json <-- New! node_modules/ <-- New! lots.txt of.rb files.js here.html new_package/ node_modules/ bower.json
So, as you can see, you've got all of
new_package’s content in
my_awesome_project/bower_components. Any other Bower packages you link would also go to the
Alright, let’s give it a quick test. Make a new file in
new_package and save it. It should also be in
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 code/ my_awesome_project/ new_package/ node_modules/ bower.json test.txt <-- New! lots.txt of.rb files.js here.html new_package/ node_modules/ bower.json test.txt <-- New!
You can also add files the other way. Make a new file in
my_awesome_project and save it. It should also be in
Now you can develop as though your code was inline, but actually keep it as a stand alone package.
Note: Again, this is a 100% normal symlink. The code used to make the link can be found on Bower’s GitHub and doesn’t do anything fancy. If you go around moving
new_package the symlinks will break!
- Intro to Bower - I really liked the style of this one, it’s quite chatty, just like me!
- Bower’s code if you want to look under the hood