Polymer 1 → How to install using Bower & How to Download the Polymer Elements in One Shot.


The Intro

Polymer is a new framework to create custom HTML5 elements. It is currently being supported by most of the major browsers, and comes with WebComponets.js for those browsers who can’t utilize HTML imports properly. This tutorial will give a brief walk-through on how to install Polymer 1 along with its Polymer Elements. For brevity, I will assume that you know what Polymer is and how the basis of its works. This tutorial will be demonstrated on a CentOS 6.5 Virtual Machine.

Polymer Core Install

Install Git

First and foremost, you are going to want to install git. Bower talks to git when installing dependencies from Polymer’s repository.

sudo yum install git

Install NodeJs

You are going to need Node JS and NPM (Node Package Manager) so you can install Bower later.

sudo yum install nodejs npm

Install Bower

Next, you are going to install Bower (http://bower.io/)

npm install -g bower

Run Bower Initialization

Now you are going to run a bower init to create a blank bower.json file that will be used to keep track of dependencies. Make sure you are in the folder you want to install the bower_components folder(this is the folder that houses the Polymer Elements).Simply follow the prompts that are given until its finished. Run the following command:

bower init

Install Polymer Core

Once your bower is up and running, you are going to install the Polymer Core components by using the following code in the command line

bower install --save Polymer/polymer#^1.2.0

Install Polymer Starter Kit

Now here’s the cool part. Normally, you have to install Polymer Elements one a time, and there are a ton so it takes forever. You can go to their site and create a collection of elements and download them as a zip and the install them. However, doing that will defeat the purpose of using bower AND you will have to be in charge of keeping the dependencies up to date manually. With bower, all that is taken care of. So its much nice to simply install the Polymer Elements through Bower.

So the easiest way to install all the Polymer Elements you will want to start with (Iron, Paper, Neon, and so forth) is to use the Polymer Starter Kit. To install, simply run this command. Make sure you are in the directory has your bower.json file you just created.

bower install --save PolymerElements/polymer-starter-kit

Once finished, you will have the most recent version of Polymer along with all its elements with the exception of the Google Elements and the Gold Elements. To install those simply visit the Polymer Elements official site

Then go to the Google Web Components Section and download what you wish. The installation code looks just like what you did for the starter kit

For example to install the Google Analytics Custom Element, you would run this command

bower install — save GoogleWebComponents/google-analytics

Bonus Tip About Bower

As you can see by the syntax, bower accesses the github repo where the official custom elements are stored. Below is an example of the syntax

bower install — save GITHUB_ACCOUNT_NAME_HERE/REPO_NAME_HERE

Happy Coding!