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 |
Leave a Reply