Polymer - Installation

It's easy to configure Polymer in your system. Following are the two ways to install Polymer.

  • The Polymer CLI (Command Line Interface)
  • The Bower

Installing Polymer Using Polymer CLI

Step 1 − Install Polymer using the following npm command.

npm install -g polymer-cli@next

Step 2 − Check the successful installation and version using the following command.

polymer --version

If it has installed successfully, then it will show the version as −

Step 3 − Create a directory with the name of your choice and switch to that directory.

mkdir polymer-js 
cd polymer-js

Step 4 − To initialize your project, run the following command in your polymer-jsdirectory.

polymer init

After executing the above command, it will show something like this −

C:\polymer-js>polymer init 
? Which starter template would you like to use? 
   1) polymer-1-element - A simple Polymer 1.0 element template 
   2) polymer-2-element - A simple Polymer 2.0 element template 
   3) polymer-1-application - A simple Polymer 1.0 application template 
   4) polymer-2-application - A simple Polymer 2.0 application 
   5) polymer-1-starter-kit - A Polymer 1.x starter application template, with 
      navigation and "PRPL pattern" loading 
   6) polymer-2-starter-kit - A Polymer 2.x starter application template, with 
      navigation and "PRPL pattern" loading 
   7) shop - The "Shop" Progressive Web App demo
   Answer: 4

Step 5 − Select the polymer-2-application from the above given options.

Now, start your project using the following command.

polymer serve

Installing Polymer Using Bower

Step 1 − To start from scratch using Bower method, install the Bower using the following command.

npm install -g bower

Step 2 − Install the Polymer using the following command.

npm install -g polymer-cli@next

Step 3 − Check the successful installation and version of Polymer, using the following command.

polymer --version

If it has installed successfully, then it will show the version as −

0.18.0-pre.13.

Step 4 − To install the latest Polymer 2.0 RC release from bower, use the following command.

bower install Polymer/polymer#^2.0.0-rc.3

Step 5 − Create a index.html file and add the following code in the <head> tag.

<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script> 
// it loads the polyfills 

<link rel = "import" href = "/bower_components/polymer/polymer.html"> 
// it import Polymer

Step 6 − Start your project using the following command.

polymer serve

Building for Deployment

To build your project for deployment, polymer build command is an easier way, which will minify, compile, or bundle your code depending on the command line flags.

To create a universal build that works on all browsers, use the following command.

polymer build --js-compile

The above command will build the project to build/default and you can start this directory, using the following command.

polymer serve build/default

Polymer 2.0 uses ES6 and HTML Custom Elements. For best practice, it is always good to use ES6 to browsers with full ES6 support and compile ES5 to old browsers that don't support ES6. The following table shows the best strategy for your project.

Strategy Easiest for cross-browser support Most optimal for WC v1 performance
Server Any server works, including static ones Differential serving required
Deployed Code ES5 transpiled ES6
Polyfill Loader webcomponents-es5-loader.js webcomponents-loader.js
Advertisements