Creating a polymer.json in your project directory allows you to store information about your project structure and desired build configuration(s). It is used by the Polymer CLI as a way to understand the structure of your application.

To make sure your application builds correctly, create a polymer.json file at the top level of your project. Here's an example from the Shop app:

-shop
  |-README.md
  |-app.yaml
  |-bower.json
  |-build
  |-data
  |-images
  |-index.html
  |-manifest.json
  |-polymer.json
  |-service-worker.js
  |-src
  |-sw-precache-config.js
  |-test

Here’s an example polymer.json file from the Shop app:

polymer.json

{
  "entrypoint": "index.html",
  "shell": "src/shop-app.html",
  "fragments": [
    "src/shop-list.html",
    "src/shop-detail.html",
    "src/shop-cart.html",
    "src/shop-checkout.html",
    "src/lazy-resources.html"
  ],
  "sources": [
   "src/**/*",
   "data/**/*",
   "images/**/*",
   "bower.json"
  ],
  "extraDependencies": [
    "manifest.json",
    "bower_components/webcomponentsjs/webcomponents-lite.js"
  ],
  "lint": {
    "rules": ["polymer-2-hybrid"]
  },
  "builds": [
    { "preset": "es5-bundled" },
    { "preset": "es6-unbundled" }
  ]
}

Optional, Defaults to index.html
Type: String

The main entrypoint to your app for all routes, often index.html. This file should import the app shell file specified in the shell property. It should be as small as possible since it’s served for all routes. All paths in the entrypoint should be absolute, because this file is served from many different URLs.

Optional
Type: Array of String

This property supports dynamic dependencies. It is an array of any HTML filenames that are not statically linked from the app shell (that is, imports loaded on demand by importHref).

If a fragment has static dependencies, provided the fragment is defined in this property, the Polymer build analyzer will find them. You only need to list the file imported by importHref.

In a Polymer app, the files listed in the fragments property usually contain one or more element definitions that may or may not be required during the user’s interaction with the app, and can thus be lazily loaded.

Optional
Type: Array of String

Dependencies that the analyzer component of the Polymer build toolchain can’t discover, possibly because they're not statically imported, and that do not need to be bundled.

Required
Type: String

The app shell. Contains the main code that boots the app and loads necessary resources. The shell usually includes the common UI for the app, and the router, which loads resources needed for the current route.

Optional, Defaults to ["src/**/*"]
Type: Array of String

An optional array of globs matching your application source files. If left out, defaults to all files in your project src/ directory. You’ll need to set this if you store your source files in other locations.

In the Shop app, source files are stored in /src, /data and /images. See above for the Shop file structure.

The sources property is set as follows:

"sources": [
  "data/**/*",
  "images/**/*",
  "src/**/*",
  "bower.json"
],

Optional
Type: Array of Build Configuration objects

You can configure how the CLI builds your application for production via the builds property. This is equivalent to passing different CLI flags to the build command, but storing them here will configure the build for every run:

  • name: An optional name for your build. If multiple builds are defined, the name property is required.

  • preset: An optional preset name that your build configuration can inherit from. See below for more information.

  • addServiceWorker: If true, generate a service worker for your application.

  • addPushManifest: If true, generate an HTTP/2 Push Manifest for your application.

  • swPrecacheConfig: An optional configuration file for the generated service worker.

  • insertPrefetchLinks: If true, insert prefetch link elements into your fragments so that all dependencies are prefetched immediately.

  • bundle: You may provide a boolean (true to bundle your application; default is false), or an object containing bundling configuration options.

    • excludes: A list of paths of files and/or folders that should not be inlined.

    • inlineCss: Inline external CSS file contents into <style> tags.

    • inlineScripts: Inline external Javascript file contents into <script> tags.

    • rewriteUrlsInTemplates: Rewrite element attributes inside templates when inlining html.

    • sourcemaps: Create identity source maps for inline scripts.

    • stripComments: Remove all comments except those tagged @license, or starting with <!--! or <!--#.

  • html: An object containing a configuration option for HTML:

    • minify: If true, minify all HTML.
  • css: An object containing a configuration option for CSS:

    • minify: If true, minify all CSS.
  • js: An object containing configuration options for Javascript:

    • minify: If true, minify all JS.

    • compile: If true, use babel to compile all ES6 JS down to ES5.

  • browserCapabilities: Capabilities required for a browser to consume this build. Values are es2015, push and serviceworker. For more information, see the prpl-server-node README.

  • basePath: Update the entrypoint's <base> tag to support serving this build from a non-root path, such as when performing differential serving based on user agent. Requires that a <base> tag already exists.

    If true, use the build name. If a string, use that value. Leading and trailing slashes are optional.

    Note that basePath must be set to true if using prpl-server.

As an example, here is the configuration for a bundled, minified application build:

"builds": [{
    "bundle": true,
    "js": {"minify": true},
    "css": {"minify": true},
    "html": {"minify": true}
  }]

And here is a configuration to generate two optimized builds: One bundled and one unbundled:

"builds": [{
    "name": "bundled",
    "bundle": true,
    "js": {"minify": true},
    "css": {"minify": true},
    "html": {"minify": true}
  },{
    "name": "unbundled",
    "js": {"minify": true},
    "css": {"minify": true},
    "html": {"minify": true}
  }]

The following configuration generates a bundled, minified application build with bundling options:

  • Specified paths are excluded from inlining.
  • Comments are stripped.
  • External CSS is not inlined.
  • Identity source maps for inline scripts are created.
"build": [{
  "name": "bundled-custom",
  "bundle": {
    "excludes": ["/path/to/stuff/", "/path/to/more/stuff.html"],
    "stripComments": "true",
    "inlineCss": "false",
    "sourcemaps": "true"
  },
  "js": {"minify": true},
  "css": {"minify": true},
  "html": {"minify": true}
}]

Build presets provide an easy way to create common build configurations. When you provide a valid preset for your build, it will inherit its configuration from that preset. We currently support 3 different presets:

  • es5-bundled:
    • name: es5-bundled
    • js: {minify: true, compile: true}
    • css: {minify: true}
    • html: {minify: true}
    • bundle: true
    • addServiceWorker: true
    • addPushManifest: true
    • insertPrefetchLinks: true
  • es6-bundled:
    • name: 'es6-bundled'
    • browserCapabilities: ['es2015']
    • js: {minify: true, compile: false}
    • css: {minify: true}
    • html: {minify: true}
    • bundle: true
    • addServiceWorker: true
    • addPushManifest: true
    • insertPrefetchLinks: true
  • es6-unbundled:
    • name: 'es6-unbundled'
    • browserCapabilities: ['es2015', 'push']
    • js: {minify: true, compile: false}
    • css: {minify: true}
    • html: {minify: true}
    • bundle: false
    • addServiceWorker: true
    • addPushManifest: true
    • insertPrefetchLinks: true

Any additional options that you provide will override the given preset. In the example below, a single "es5-bundled" build will be created with all the es5-bundled preset options except "addServiceWorker", which was overridden and set to false:

"builds": [{
  "preset": "es5-bundled",
  "addServiceWorker": false
}]

Optional
Type: Object

You can use this to configure how polymer-lint will lint your project both on the command line and in IDE plugins.

  • rules: An array of lint rules and rule collections to run on your project. For most projects, one of polymer-2, polymer-2-hybrid, or polymer-1 is all that's needed here. Run polymer help lint for the full list of options.
  • ignoreWarnings: An array of warning codes to ignore.

For example:

  "lint": {
    "rules": ["polymer-2"],
    "ignoreWarnings": []
  }