Using Bower with BowerCDN for better web performance!

Posted: Sep 28, 2015 by Bryan Tong

If you haven't heard of Bower you should probably check it out. It is the de-facto in frontend javascript / css packaging. I brought it a step closer with BowerCDN to offer the package repository the power of Bower with the reliability and ease of a CDN. Millions of pageviews are already speed up with BowerCDN help.

What is Bower?

Bower is a package manager for browser based libraries comprising mostly of Javascript and CSS. It comes with a CLI utility that can be used to install bower packages in projects.

The drawbacks

I love Bower for finally giving projects a repository for front end web pages instead of hunting around endlessly through websites looking for tarballs of popular javascript/css packages.

However, I noticed in production we have had some troubles with keeping our bower_components folders synced up and just in general another step when checking out code and updating libraries in our Node.js projects.

BowerCDN Helps!

BowerCDN is a service built on the bower API that installs and maintains permalinks to bower repository content. The project is then backed by CloudFlare. To offer CDN speed and reliability for any of the content offered by the repositories listed in Bower.

How to use BowerCDN

Visit: http://www.bowercdn.net
Search for a package such as jquery, eg: http://bowercdn.net/search?search=jquery
Select jquery from the list: http://bowercdn.net/package/jquery
Select a version to use: http://bowercdn.net/package/jquery/2.1.4
Select URLs for files to use in your application.

<html>
<head>
  <script type="text/javascript" src="//bowercdn.net/c/jquery-2.1.4/dist/jquery.min.js"></script>
</head>

Thats it! Now your applications can access nearly any package available for front-end development and load it with the power of a CDN!