Polymer Logo Home Start Get started 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 Try Polymer Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling 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 Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community

You're viewing an older version of Polymer. Please see Polymer 2.0 for the latest.

Contents

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.

  1. Install an active LTS version of Node.js (4.x or 6.x). The current version (7.x) should work, but is not officially supported.

  2. If you don't have bower installed, install it

     npm install -g bower

  3. Install the 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 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.

polymer serve --open

The task above automatically opens up your default web browser and fetches the locally-hosted application (at http://localhost:8080).

App Toolbox: Starter Kit Template

Your app template does not contain any version control system. Follow the instructions below if you want to manage your source code with Git.

  1. cd into the base directory of your project.

  2. Initialize a Git repository.

    git init

  3. Add and commit all of the files.

    git add . && git commit -m "Initial commit."

The diagram below is a brief summary of the directories within the template.

/
|---index.html
|---src/
|---bower_components/
|---images/
|---test/
  • index.html is the main entry point into your application
  • src/ is where your application-specific custom elements will go
  • bower_components/ is where reusable custom elements and/or libraries fetched via bower will go
  • images/ is for static images
  • test/ is where you define tests for your web components.

Now that your App Toolbox template is up and running, learn how to add a new page of content, or how to deploy the app to the web.