Polymer CLI supports initializing a project folder with one of several application templates.
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
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.
Set up basic app project
Follow the steps below to get your basic app project set up.
Create a directory for your app project.
mkdir app cd app
appis the name of your project directory.
Initialize your app. Polymer CLI asks you a few questions as it sets up your app.
Enter a name for your app. Defaults to the name of the current directory.
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
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-appwith the name of your main element.
Enter a description for your app.
The Polymer CLI generates your app and installs its dependencies.
App project layout
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.
.html. Source code for main element.
_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
app/ src/ my-app/ my-app.html my-el/ my-el.html
To add another element to the project:
Create a new folder under
Create an HTML import for the new element. You can use the existing app element as a starting point.
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">
polymer initto create an element project inside your app project.
Manage dependencies in an application 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">