A starting point for building Single-Page Applications with Polymer 1.x

App template for building Static Web Applications deployable to static hosting or CDN without dependencies on any backend - Static app use case

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

Do you like it? Please, ⭐ star the project ⭐

See latest Polymer Starter Kit Plus Demo (from master) at https://polymer-starter-kit-plus.appspot.com

The demo is running on Google App Engine with HTTP 2.0 Push

• Hoverboard

• Progressive Web App template
• Building Progressive Web Apps with Polymer
• Getting started with Progressive Web Apps
• Polymer, Paper, Iron, Neon and Start elements
• Offline setup through Platinum - Service Worker elements
• Themes directory with Default Theme
• Default Theme following SUIT CSS - styling methodology for component-based UI development
• Material Design Style
• Custom Fonts list for download fonts from Google Fonts
• Custom Icons element for Material Design Icons
• CSS Variables including Material Design Colors - Material Palette
• JS Variables for colors in index.html and manifest.json
• Light and Dark background mode following Material Design
• Support more themes is ideal for A/B testing
• Material Design Layout
• PostCSS for transforming styles with JS plugins
• Introduction to PostCSS
• PostCSS is 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
• Import - transform @import rules by inlining content
• Simple Variables - Sass-like variables
• Stylelint - modern CSS linter
• SUIT CSS linter
• Babel for support ES2015 JavaScript
• Polymer elements using the ES2015 class syntax
• Nunjucks templating engine for building static code using Gulp
• 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 Crisper for Content Security Policy compliance
• 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 with HTTP 2.0 Push
  • Google Cloud Storage
  • Any Linux hosting with SSH
• Recipes for Polymer performance, Mobile Chrome Apps and using Chrome Dev Editor

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.

Polymer Starter Kit Plus comes in two flavours - Lite (branch lite) and Full (branch master). Lite version doesn't contain demo content!

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

OR Install Start Polymer Generator and run yo startpolymer in my-project directory.

⚠️ Important: Polymer Starter Kit Plus contain dotfiles (files starting with a .). If you're copying the contents of the Starter Kit to a new location make sure you bring along these dotfiles as well! On Mac, enable showing hidden files, then try extracting/copying Polymer Starter Kit Plus again. This time the dotfiles needed should be visible so you can copy them over without issues.

Rob Dodson has a fantastic PolyCast video available that walks through using Polymer Starter Kit. An end-to-end with Polymer and Polymer Starter Kit talk is also available.

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 # OR git merge upstream/lite
# resolve the merge conflicts in your editor
git add . -u
git commit -m 'Updated to 1.0.2'

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

npm run install:complete # Alias for "sudo npm install -g npm && sudo npm install -g bower gulp && npm install && bower install"

gulp init # Initialize your app - download fonts from Google Fonts and analytics.js

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

If you get a browser console error indicating that an element you know you have installed is missing, try deleting the bower_components folder, then run bower cache clean followed by bower install to reinstall. This can be especially helpful when upgrading from a prior version of the Polymer Starter Kit Plus.

If the issue is to do with a failure somewhere else, you might find that due to a network issue a dependency failed to correctly install. We recommend running npm cache clean and deleting the node_modules directory followed by npm install to see if this corrects the problem. If not, please check the issue tracker in case there is a workaround or fix already posted.

• Gulp variables - config.js
• Theme variables - variables.css and variables.js
• HTML metadata - metadata.js

gulp init

Init task run download:analytics task and download:fonts task

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.

gulp serve:dist
gulp serve:gae

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.

gulp

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

• For GAE or GCS install Google Cloud SDK
• For Firebase install Firebase command line tools
• Setup hosting in config file

gulp deploy:dev

gulp deploy:stag

gulp deploy:prod

gulp deploy:promote

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 for load page performance and offline using. Fonts list for download is in file fonts.list.

gulp download:fonts

gulp pagespeed

# Install tool
npm install -g npm-check-updates

# Check latest versions
npm run check:ver # Alias for "ncu && ncu -m bower"

# Update to the latest versions
npm run update:ver # Alias for "ncu -u && ncu -um bower"

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

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.

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

Like other Google projects, Polymer Starter Kit includes Google license headers at the top of several of our source files. Google's open-source licensing requires that this header be kept in place (sorry!), however we acknowledge that you may need to add your own licensing to files you modify. This can be done by appending your own extensions to these headers.

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