Install dependencies

Quick-start (for experienced users)

With Node.js installed, run the following one liner from the root of folder:

npm install -g gulp bower && npm install && bower install

Prerequisites (for everyone)

This project requires the following major dependencies:

• Node.js, used to run JavaScript tools from the command line.
• npm, the node package manager, installed with Node.js and used to install Node.js packages.
• gulp, a Node.js-based build tool.
• bower, a Node.js-based package manager used to install front-end packages (like Polymer).

To install dependencies:

1. Check your Node.js version.

node --version

The version should be at or above 0.12.x.

2. If you don't have Node.js installed, or you have a lower version, go to nodejs.org and click on the big green Install button.

3. Install gulp and bower globally.

npm install -g gulp bower

This lets you run gulp and bower from the command line.

4. Install the local npm and bower dependencies.

npm install && bower install

This installs the element sets (Paper, Iron, Platinum) and tools this project requires to build and serve apps.

5. Install the polybuild

npm install -g polybuild

This installs the all-in-one build tool for Polymer apps

6. Install the gulp Babel, Sourcemap and Crisper plugins in order to support ES2015

npm install --save-dev gulp-babel gulp-sourcemaps gulp-crisper

Development workflow

Serve / watch

gulp serve

This outputs an IP address you can use to locally test and another that can be used on devices connected to your network.

Run tests

gulp test:local

This runs the unit tests defined in the app/test directory through web-component-tester.

To run tests Java 7 or higher is required. To update Java go to http://www.oracle.com/technetwork/java/javase/downloads/index.html and download JDK and install it.

Build & Vulcanize

gulp

Build and optimize the current project, ready for deployment. This includes linting as well as vulcanization, image, script, stylesheet and HTML optimization and minification.

Application Theming & Styling

Polymer 1.0 introduces a shim for CSS custom properties. We take advantage of this in app/styles/app-theme.html to provide theming for your application. You can also find our presets for Material Design breakpoints in this file.

Read more about CSS custom properties.

Styling

1. main.css - to define styles that can be applied outside of Polymer's custom CSS properties implementation. Some of the use-cases include defining styles that you want to be applied for a splash screen, styles for your application 'shell' before it gets upgraded using Polymer or critical style blocks that you want parsed before your elements are.
2. app-theme.html - to provide theming for your application. You can also find our presets for Material Design breakpoints in this file.
3. shared-styles.html - to shared styles between elements and index.html.
4. element styles only - styles specific to element. These styles should be inside the <style></style> inside template.

<dom-module id="my-list">
  <template>
    <style>
      :host {
        display: block;
        background-color: yellow;
      }
    </style>
    <ul>
      <template is="dom-repeat" items="{{items}}">
        <li><span class="paper-font-body1">{{item}}</span></li>
      </template>
    </ul>
  </template>
</dom-module>

These style files are located in the styles folder.

Unit Testing

This project come configured with support for Web Component Tester - Polymer's preferred tool for authoring and running unit tests. This makes testing your element based applications a pleasant experience.

Read more about using Web Component tester.