The Polymer library is in maintenance mode. For new development, we recommend Lit.

You're viewing an older version of the Polymer library documentation. Please see Polymer 3.0 for the latest.

Polymer CLI supports initializing a project folder with one of several application templates.
The polymer-2-application template is the most basic starting point for a Polymer-based application. Other templates introduce more complex layout and application patterns.

This chapter teaches you more about the polymer-2-application template.
See Polymer App Toolbox templates for more details on other templates.

For a more full-featured progressive web app template, you can use the starter kit template (polymer-2-starter-kit). See the Polymer Starter Kit repo for more information.

Follow the steps below to get your basic app project set up.

  1. Create a directory for your app project.

    mkdir app
    cd app

    Where app is the name of your project directory.

  2. Initialize your app. Polymer CLI asks you a few questions as it sets up your app.

    polymer init
    
  3. Select polymer-2-application.

  4. Enter a name for your app. Defaults to the name of the current directory.

  5. Enter a name for the main element in your project. The main element is the top-most, application-level element of your app. Defaults to the name of the current directory, followed by -app.

    The code samples throughout this doc use the example app element name my-app. When creating your app you'll want to replace any instance of my-app with the name of your main element.

  6. Enter a description for your app.

The Polymer CLI generates your app and installs its dependencies.

After creating your app, Polymer CLI generates the following files and directories:

  • bower.json. Configuration file for Bower.
  • bower_components/. Project dependencies. See Manage dependencies.
  • index.html. Entrypoint page of the app.
  • src/my-app/my-app.html. Source code for main element.
  • test/my-app/my-app_test.html. Tests for main element.

You may want to compose your main element out of smaller elements specific to your app. These application-specific elements should be defined in the src directory, at the same level as my-app.

app/
  src/
    my-app/
      my-app.html
    my-el/
      my-el.html

To add another element to the project:

  1. Create a new folder under src.

    mkdir src/my-el
  2. Create an HTML import for the new element. You can use the existing app element as a starting point.

  3. To use the new element, you'll need to import it into your application element (for example, my-app.html) with an "import" link:

    <link rel="import" href="/src/my-el/my-el.html">

    Don't use polymer init to create an element project inside your app project.

Applications should use relative URLs to import other source files and dependencies. But because applications are served independently, they can properly reach into the dependencies directory for dependencies.

<!-- from a 'src/some-application.html' file in your application -->
<link rel="import" href="../bower_components/polymer/polymer.html">