February 5, 2015 11:53 am

How to Install Polymer Web Components

In this post let us see how to install polymer .If you are familiar with introduction part of polymer let me show  how to install the polymer else first learn introduction part from Introduction to Polymer Web Components Now let us start with the installation procedure polymer can be installed in several ways but i will show you three ways from which you can install it easily.

How to Install Polymer Web Components

1.bower(recommended)

2.zip file

3. github

See also: Introduction to Polymer Web Components

1.Installing from bower

bower is a recommended method to install polymer.bower is a package manager that manages dependencies.

First let us install bower.

Installing bower

For installing bower you must install node and NPM and git.

Install node from http://nodejs.org/

Install git from http://git-scm.com/

After installing node and git configure them

Now go to command line and follow the steps.

step 1

bower is a command line utility install it with Npm.

$npm install -g bower

Step 2

Install packages with bower install. Bower installs packages to bower_components/.

$bower install <package>

step 3

A package can be a GitHub shorthand, a Git endpoint, a URL, and more. Read more about bower install.

# registered package
$ bower install jquery
# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js

Now you can install the latest version of polymer using the command.

Installing Polymer

bower install --save Polymer/polymer

Bower adds a bower_components/ folder in the root of your project and fills it with Polymer and its dependencies.

Updating packages

When a new version of Polymer is available, run bower update in your app directory to update your copy.

bower update

This updates all packages in bower_components/.

Using custom elements

Download the Custom Element package via Bower and import it into your html file and use them anywhere.

example

we’ll experiment with the paper-input custom element and use it in our HTML page

installing the paper-input.

bower install --save Polymer/paper-input

Adding it into html file.

<link href="bower_components/paper-input/paper-input.html" rel="import">

And using it.

<paper-input></paper-input>

2.Installing from zip files

For installing polymer from zip files first download the zip file from

https://www.polymer-project.org/docs/start/getting-the-code.html#using-bower

Unzip the zip file into your project folder.

Import the components as

<link rel="import" href="components/polymer/polymer.html">

3.Installing from github

Run this  command from your project root folder.

git clone https://github.com/Polymer/polymer.git components/polymer

Import the components into your html file as

<link rel="import" href="components/polymer/polymer.html">

Thanks

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

Leave a Reply

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