Polymer Starter Kit Plus

A starting point for building web applications with Polymer 1.x

Polymer Starter Kit Plus is keeping up to date with Polymer Starter Kit and following
The 10 Commandments of Modern Web Application

✨ DEMO ✨

Features

• Polymer, Paper, Iron, Neon and Start elements
• Offline setup through Platinum - Service Worker elements
• Default Theme following SUIT CSS - styling methodology for component-based UI development
• Custom Fonts list for download fonts from Google Fonts
• Custom Icons element for Material Design Icons
• CSS Variables including Material Design Colors - Material Palette
• Variables for colors from index.html and manifest.json
• Material Design layout
• PostCSS for transforming styles with JS plugins
• 2 times faster than libsass, which is written in C++
• Autoprefixer add vendor prefixes to CSS rules using values from Can I Use
• CSS Custom Media Queries
• CSS Nesting
• CSS MQPacker - pack same CSS media query rules into one media query rule
• Stylelint - modern CSS linter
• SUIT CSS linter
• PostCSS Import
• Babel for support ES2015 JavaScript
• Polymer elements using the ES2015 class syntax
• Nunjucks templating engine for server-side
• Metadata at one place
• Markdown for static content
• Routing with Page.js
• Config file
• Gulp tasks per file
• PageSpeed Insights for performance tuning
• Built-in preview server with BrowserSync
• Vulcanize with Content Security Policy CSP
• Unit testing with Web Component Tester
• Google Analytics with offline support
• Quick deploy with 3 environments: Development, Staging, Production
• Revision all files by appending content hash to their names
• Hosting platforms:
  • Firebase
  • Google App Engine - free hosting with HTTP2-over-QUIC on custom domain
  • Google Cloud Storage

Getting Started

To take advantage of Polymer Starter Kit Plus you need to:

1. Get a copy of the code.
2. Install the dependencies if you don't already have them.
3. Modify the application to your liking.
4. Deploy your production code.

1. Get the code

Download and extract Polymer Starter Kit Plus to where you want to work.

Or git clone https://github.com/StartPolymer/polymer-starter-kit-plus.git <my-repo-name>

Updating from previous version

If you've previously downloaded a copy of the full Starter Kit and would like to update to the latest version, here's a git workflow for doing so:

git init
git checkout -b master
git add .
git commit -m 'Check-in 1.0.1'
git remote add upstream https://github.com/StartPolymer/polymer-starter-kit-plus.git
git fetch upstream
git merge upstream/master
# resolve the merge conflicts in your editor
git add . -u
git commit -m 'Updated to 1.0.2'

2. Install dependencies

Quick-start (for experienced users)

With Node.js installed, run the following one liner from the root of your Polymer Starter Kit Plus download:

npm run-script install-all

Prerequisites (for everyone)

The full starter kit requires the following major dependencies:

• Node.js, used to run JavaScript tools from the command line.
• npm, the node package manager, installed with Node.js and used to install Node.js packages.
• gulp, a Node.js-based build tool.
• bower, a Node.js-based package manager used to install front-end packages (like Polymer).

To install dependencies:

1. Check your Node.js version.

node --version

The version should be at or above 0.12.x. Installing Node.js via package manager

2. If you don't have Node.js installed, or you have a lower version, go to nodejs.org and click on the big green Install button.

3. Install gulp and bower globally.

npm install -g gulp bower

This lets you run gulp and bower from the command line.

4. Install the starter kit's local npm and bower dependencies.

cd polymer-starter-kit-plus && npm install && bower install

This installs the element sets (Paper, Iron, Platinum) and tools the starter kit requires to build and serve apps.

3. Development workflow

Check out the config.js

Gulp variables are in the file config.js

Initializing your app

• Download newest script analytics.js
• Download Google Fonts

gulp init

Serve / watch

gulp serve

This outputs an IP address you can use to locally test and another that can be used on devices connected to your network.

Build and serve the output from the dist build

gulp serve:dist
gulp serve:gae

Run tests

gulp test:local

This runs the unit tests defined in the app/test directory through web-component-tester.

To run tests Java 7 or higher is required. To update Java go to http://www.oracle.com/technetwork/java/javase/downloads/index.html and download JDK and install it.

Build & Vulcanize

gulp

Build and optimize the current project, ready for deployment. This includes linting as well as vulcanization, image, script, stylesheet and HTML optimization and minification.

4. Deploy app 🎉

How to setup Google App Engine

Deploy to development environment

gulp deploy:dev

Deploy to staging environment

gulp deploy:stag

Deploy to production environment

gulp deploy:prod

Promote the staging version to the production environment

gulp deploy:promote

Tools

Download newest script analytics.js

You need download newest script analytics.js from Google, because link https://www.google-analytics.com/analytics.js has set only 2 hours cache. Here is analytics.js changelog. Local copy of this script is for better load page performance.

gulp download:analytics

Download Google Fonts

Download Google Fonts for load page performance and offline using. Fonts list for download is in file fonts.list.

gulp download:fonts

PageSpeed Insights

gulp pagespeed

Service Worker

Polymer Starter Kit Plus offers an offline experience thanks to Service Worker and the Platinum Service Worker elements. New to Service Worker? Read the following introduction to understand how it works.

• http://www.html5rocks.com/en/tutorials/service-worker/introduction/
• chrome://inspect/#service-workers
• chrome://serviceworker-internals

Unit Testing

Web apps built with Polymer Starter Kit come configured with support for Web Component Tester - Polymer's preferred tool for authoring and running unit tests. This makes testing your element based applications a pleasant experience.

Read more about using Web Component tester.

Extending

Use a recipes or recipes for integrating other popular technologies like CoffeeScript or Jade.

Contributing 👍

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Make your changes
4. Run the tests, adding new ones for your own code if necessary
5. Commit your changes (git commit -am 'Added some feature')
6. Push to the branch (git push origin my-new-feature)
7. Create new Pull Request