Home Start Get started Quick tour of Polymer Install Polymer 2.x Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview About this release What's new in 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Browser support Overview Polyfills ES6 Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements Web services polymer.json specification Node support Resources Glossary API Reference API Reference Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Deploy Build for production Serve your app The PRPL pattern Case study Shop News Blog Community Get started Quick tour of Polymer Install Polymer 2.x
Build an element
1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties
Build an app
1. Get set up 2. Create a new page 3. Add some elements 4. Deploy

The Polymer App Toolbox is a collection of components, tools and templates for building Progressive Web Apps with Polymer.

Follow the instructions below to install, build, and deploy a project using an App Toolbox template in less than 15 minutes.

Polymer CLI is an all-in-one command line tool for Polymer projects. In this tutorial you use Polymer CLI to initialize, serve, and build your project. You can also use it for linting and testing, but this tutorial won't cover those topics.

Polymer CLI requires Node.js, npm, Git and Bower. For full installation instructions, see the Polymer CLI documentation.

To install Polymer CLI:

npm install -g polymer-cli
  1. Create a new project folder to start from.

     mkdir my-app
     cd my-app
    
  2. Initialize your project with an app template.

     polymer init polymer-2-starter-kit
    

The App Toolbox templates do not require any build steps to get started developing. You can serve the application using the Polymer CLI, and file changes you make will be immediately visible by refreshing your browser.

To serve your project:

polymer serve --open

The diagram below is a brief summary of the files and directories within the project.

bower.json             # bower configuration
bower_components/      # app dependencies
images/
index.html             # main entry point into your app
manifest.json          # app manifest configuration
package.json           # npm metadata file
polymer.json           # Polymer CLI configuration
service-worker.js      # auto-generated service worker
src/                   # app-specific elements
  my-app.html            # top-level element
  my-icons.html          # app icons
  my-view1.html          # sample views or "pages"
  my-view2.hmtl
  my-view3.html
  my-view404.html        # sample 404 page
  shared-styles.html     # sample shared styles
sw-precache-config.js  # service worker pre-cache configuration
test/                  # unit tests

Your app is now up and running locally. Next, learn how to add a page to your app.

Next step: Create a page