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.

To work with Polymer CLI, you will need a Node.js version supported by the Polymer toolset, npm, Git, and Yarn. For full installation instructions, see the Polymer CLI documentation.

Once you have the prerequisites set up, 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
    

    Press the down arrow until polymer-3-starter-kit is highlighted and press the enter / return key to select.

Polymer CLI downloads and installs dependencies, and creates an app from the polymer-3-starter-kit template.

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

The output of the polymer serve command tells you where your app is served. In a web browser, open the URL shown at applications. For example:

~/my-app > polymer serve
info: [cli.command.serve]    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/polymer-starter-kit/

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

images/
index.html             # main entry point into your app
manifest.json          # app manifest configuration
node_modules           # installed npm dependencies used in your app
package-lock.json      # dependency management file generated by npm
package.json           # npm metadata file
polymer.json           # Polymer CLI configuration 
service-worker.js      # auto-generated service worker
src/                   # app-specific elements
  my-app.js            # top-level element
  my-icons.js          # app icons
  my-view1.js          # sample views or "pages"
  my-view2.js
  my-view3.js
  my-view404.js        # sample 404 page
  shared-styles.js     # 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