Installing Polymer with Bower on OSX

My buddy Rob Dodson works for the Google machine and his been all up in my ear lately about Polymer. A few nights ago we were talking shop over a beer in Hayes Valley and he finally convinced me to actually try it out. So, if I can find some time in my life, I’ll try to post my Polymer findings here on my little ole blog.

What is Polymer? Polymer is a library that contains several polyfills for various W3C Web Components. What’s a web component? Web Components are custom HTML elements with a level of visual richness, that are share-able and extensible. Their internals are encapsulated. You interact with them using an API of attributes, events, properties and methods.

So, where do you start? Naturally, you would start off by installing Polymer . Google recommends you install Polymer with Bower. So, what the hell is Bower? Bower is a package manager for the web, it removes the hassle of dependency management. Bower will be the way you install custom HTML elements, and it will shield you from the elements dependencies.

If you started with the Polymer installation guide you will notice that they assume you have already installed Node.Js. Come on Google! Anyhow, Bower depends on Node and npm, so, you must install Node.js, before you can install Bower!

Installing Node.js gives you access to the node package manager (npm). You will use npm to install node programs, like bower. After installing Node.js, fire up the command-line(Terminal) to confirm the version number as a sanity check. Type:

node -v

this should print out the version of node running on your system.

Screen Shot 2013-05-21 at 11.11.22 AM

Sweet! Our next step is to install Bower, globally. In terminal type :

npm install -g bower

My first attempt at installing Bower was unsuccessful, I ended up with errors. Terminal did not allow the install because I do not have root access or permissions to install globally.

If you didn’t receive the error, please skip ahead.

Screen Shot 2014-03-17 at 12.17.57 PM

I’ve encountered this issue from time to time and I’ve usually cheated the procedure by using ‘sudo’. The cheat IS NOT a common practice, since i’m stepping over a security feature that prevents me from screwing up my machine. The correct way to resolve the issue is to set the user account to be the the owner of the ‘/usr/local’ directory.

In Terminal type :

sudo npm install -g bower
Now, that should fix the problem! Let’s try to re-install Bower, type :

Once Bower is installed, you will need to create a bower.json file for your application. Ideally you will want to install this bower.json file in the root of your application folder, so, navigate to your project folder and run this command in Terminal :

bower init

Terminal will walk through all the fields in the bower.json file, simply hit enter to step through them.

Screen Shot 2014-03-18 at 6.13.23 PM

When the process is complete you should now have a bower.json file in your root folder.

The next step is to install Polymer, in Terminal type :

bower install –save polymer

The install will create a bower_components/ folder in the root of your application and fill it with Polymer and its dependencies.

Screen Shot 2014-03-18 at 6.16.44 PM

That’s pretty much all you need to do to install Polymer with Bower.

That was easy! Let’s now install some Polymer elements, so that we can take good ole Polymer for a ride. Elements can be installed individually as needed, for now I suggest you install polymer-elements and polymer-ui-elements.
Polymer elements are non-visual utility elements that perform common tasks like layout, AJAX, signaling, and storage. Polymer UI elements are visual UI elements that render in the browser.
In terminal type:

bower install –save Polymer/polymer-elements Polymer/polymer-ui-elements

The installation will fill your bower_components/ folder with the elements:

Screen Shot 2014-03-18 at 6.20.59 PM

and add the dependencies to your bower.json file.

{
  "name": "prototype",
  "version": "0.0.0",
  "authors": [
    "Manuel Gonzale <design@stheory.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "polymer": "~0.2.1",
    "polymer-elements": "Polymer/polymer-elements#~0.2.1",
    "polymer-ui-elements": "Polymer/polymer-ui-elements#~0.2.1"
  }
}

Once the elements are installed you are ready to start harnessing the power of web components. You simply need to script up a basic HTML page, load platform.js, and import some HTML elements. The following is a quick and dirty example using the polymer-ui-field and polymer-ui-icon.

<!DOCTYPE html>
<html>
  <head>
    <!-- Load platform.js for polyfill support. -->
    <script src="bower_components/platform/platform.js"></script>
    <!-- import a custom element. -->
    <link rel="import"
          href="bower_components/polymer-ui-field/polymer-ui-field.html">
    <link rel="import"
          href="bower_components/polymer-ui-icon/polymer-ui-icon.html">
    <!-- add a wee bit of styling. -->
    <style>
         html {
               font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
               font-size: 14px;
               }
      
         polymer-ui-field {
                border: 1px solid #000;
                margin: 10px;
                height: 40px;
               }
     </style>
  </head>
      <body>
      	    <polymer-ui-field>
      		<polymer-ui-icon icon="favorite"></polymer-ui-icon>
      		 <input placeholder="This is a simple Polymer test using the polymer-ui-field and the polymer-ui-icon." flex>
             </polymer-ui-field>
     </body>
</html>

the results are :

Screen Shot 2014-03-17 at 3.59.36 PM

And that concludes my posting. Polymer covers what I feel native HTML is missing, user interface layout and rich encapsulated widgets with data-binding. Polymer reminds me of the Adobe Flex component widgets, but much more flexible with out the need for the Flash Player plug-in. Polymer should feel familiar to you if you use Angularjs, since Polymer web components and Angular Directives are quite similar. That being said, check back in a day or two and I will continue this post by adding Angular to the mix. Till then, happy coding.

**TIP**
If you are in need of updating existing dependencies like a new stable release of Angular, in Terminal, cd to your project:

cd /Users/’your_username’/your_project_name

hit enter and run a bower update, type:
bower update

and that will bring down all new dependencies.

2 thoughts on “Installing Polymer with Bower on OSX

  • March 17, 2016 at 12:41 am
    Permalink

    Erm… I would advise against doing the following.

    chown -R $USER /usr/local

    That’s likely to break all sorts of other permissions. It also means that any other users will have issues with anything in /usr/local. I would advise using ‘sudo’ to execute the install. e.g.:

    sudo npm install -g bower

    That doesn’t break your system in horribly silly ways.

    Reply
    • March 17, 2016 at 1:17 am
      Permalink

      Thanks Richard, it’s been so long since I’ve read over the post…

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: