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.
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
Where
app
is the name of your project directory. -
Initialize your app. Polymer CLI asks you a few questions as it sets up your app.
polymer init
-
Select
polymer-2-application
. -
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
-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 ofmy-app
with 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.src/
my-app/my-app
.html
. Source code for main element.test/
my-app/my-app
_test.html
. Tests for main element.
Add elements
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:
-
Create a new folder under
src
.mkdir src/my-el
-
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">
Don't use
polymer init
to 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">