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 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

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 tutorial for setup instructions.

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">