• getting-started-polymer-chrome-dev-editor

What is Polymer?

Polymer is a web component library that brings Material design into the web.

It is built on top of new web platform primitives called Web Components and Custom Elements.

What are Web Components?

Web Components are the new set of web platform features that enable developers to build applications in a declarative, composable way.

What are Custom Elements?

Custom Elements enable developers to create their own custom HTML tags, let them use those tags in their sites and apps, and enable easier component resuse.

Required tools

  • Chrome Dev Editor
  • Node.js(bower needs node package manager)
  • Bower

Chrome Dev Editor

Chrome Dev Editor (CDE) is a developer tool for building apps on the Chrome platform - Chrome Apps and Web Apps. CDE has support for writing applications in JavaScript or Dart, and has Polymer templates to help you get started building your UI. CDE also has built-in support for Git and Bower.

CDE runs on Windows, Mac, Linux, and Chrome OS.
CDE supports Git, Polymer, and Mobile development.

CDE uses Ace as its code editor, which is a full fledged code-editor with syntax-highlighting for over 100 languages.

Customizable theme appearance.

Install Chrome Dev Editor

Install Chrome Dev Editor from Chrome webstore

Chrome-dev-editor-chrome-webstore

Install Node.js

Download Node.js from official site and install it.

Install Bower

After installing node, run this command on your terminal or command prompt.

npm install -g bower

Creating the project

Launch the Chrome Dev Editor from Chrome app launcher. Initially you will be asked to choose a workspace folder, where all project files will be stored. Chrome-dev-editor-workspace

Create a new project, Enter the project name and select “JavaScript web app(Using polymer paper elements)”.

There are some more built in templates available like Dart web app, JavaScript web app, Web Starter Kit and more.

polymer-project-chrome-dev-editor

Whoa, your project is almost ready, wait you need to add polymer elements into to your project. Open your project directory on your terminal / command prompt and run

bower install

bower-install-polymer

Running the project

Polymer-code-view

Polymer up and running

polymer-up-and-running