Add Github Pages deploy and routing

This does the following:

1. Add gulp tasks to deploy to Github Pages
2. Revises routing to handle hosting from a subfolder
3. Allows development environment to run from root while production can
run from subfolder
4. Add link to PSK demo in readme.md
5. Add deploy section to readme.md
6. Add detail Deploy to Github Pages recipe

Remove getUrl function and use data binding instead

With Polymer 1.2.0 we can now use compound bindings so getUrl function
is not needed.

Change Github to GitHub

Fixed linting errors

Add example for deploy to GitHub pages

use $ variable instead of require for ghPages

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 bower_components
 .tmp
+.publish/

README.md

@@ -13,6 +13,9 @@
 * End-to-end Build Tooling (including [Vulcanize](https://github.com/Polymer/vulcanize))
 * [Recipes](/docs/README.md/) for ES2015 support, Polymer performance and using Chrome Dev Editor
 
+### Demo
+See latest Polymer Starter Kit Demo (from master) at http://polymerelements.github.io/polymer-starter-kit
+
 ## Getting Started
 
 To take advantage of Polymer Starter Kit you need to:
@@ -149,6 +152,16 @@ Web apps built with Polymer Starter Kit come configured with support for [Web Co
 
 Polymer uses [Bower](http://bower.io) for package management. This makes it easy to keep your elements up to date and versioned. For tooling, we use npm to manage Node.js-based dependencies.
 
+## Deploy
+
+### Github Pages
+1. Uncomment this line  `// app.baseUrl = '/polymer-starter-kit/';` in app.js near the top
+2. Change `app.baseUrl = '/polymer-starter-kit/';`  to `app.baseUrl = '/your-pathname/';` (ex: if you repo is `github.com/username/bobs-awesome-site` you would change this to `bobs-awesome-site`)
+3. Run `build-deploy-gh-pages` from command line
+4. To see changes wait 1-2 minutes then load Github pages for your app (ex: http://polymerelements.github.io/polymer-starter-kit)
+
+[See more details](/docs/deploy-to-github-pages.md/)
+
 ## Service Worker
 
 Polymer Starter Kit offers an optional offline experience thanks to Service Worker and the [Platinum Service Worker elements](https://github.com/PolymerElements/platinum-sw). New to Service Worker? Read the following [introduction](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) to understand how it works.

app/elements/routing.html

@@ -16,6 +16,11 @@
     // client-side router inspired by the Express router
     // More info: https://visionmedia.github.io/page.js/
 
+    // Removes end / from app.baseUrl which page.base requires for production
+    if (window.location.port === '') {  // if production
+      page.base(app.baseUrl.replace(/\/$/, ''));
+    }
+
     // Middleware
     function scrollToTop(ctx, next) {
       app.scrollPageToTop();
@@ -27,6 +32,10 @@
       app.route = 'home';
     });
 
+    page(app.baseUrl, scrollToTop, function() {
+      app.route = 'home';
+    });
+
     page('/users', scrollToTop, function() {
       app.route = 'users';
     });
@@ -43,7 +52,7 @@
     page('*', function() {
       app.$.toast.text = 'Can\'t find: ' + window.location.href  + '. Redirected you to Home Page';
       app.$.toast.show();
-      page.redirect('/');
+      page.redirect(app.baseUrl);
     });
 
     // add #! before urls
@@ -52,5 +61,4 @@
     });
 
   });
-
-</script>
+</script>

app/index.html

@@ -74,17 +74,17 @@
 
         <!-- Drawer Content -->
         <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
-          <a data-route="home" href="/" on-tap="onDataRouteClick">
+          <a data-route="home" href="{{baseUrl}}" on-tap="onDataRouteClick">
             <iron-icon icon="home"></iron-icon>
             <span>Home</span>
           </a>
 
-          <a data-route="users" href="/users" on-tap="onDataRouteClick">
+          <a data-route="users" href="users" on-tap="onDataRouteClick">
             <iron-icon icon="info"></iron-icon>
             <span>Users</span>
           </a>
 
-          <a data-route="contact" href="/contact" on-tap="onDataRouteClick">
+          <a data-route="contact" href="contact" on-tap="onDataRouteClick">
             <iron-icon icon="mail"></iron-icon>
             <span>Contact</span>
           </a>
@@ -157,7 +157,10 @@ <h1 id="license">License</h1>
               <paper-material elevation="1">
                 <h2 class="page-title">Users</h2>
                 <p>This is the users section</p>
-                <a href="/users/Rob">Rob</a>
+                <a href$="{{baseUrl}}users/Addy">Addy</a><br>
+                <a href$="{{baseUrl}}users/Rob">Rob</a><br>
+                <a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
+                <a href$="{{baseUrl}}users/Sam">Sam</a>
               </paper-material>
             </section>
 

app/scripts/app.js

@@ -15,6 +15,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   // Learn more about auto-binding templates at http://goo.gl/Dx1u2g
   var app = document.querySelector('#app');
 
+  // Sets app default base URL
+  app.baseUrl = '/';
+  if (window.location.port === '') {  // if production
+    // Uncomment app.baseURL below and
+    // set app.baseURL to '/your-pathname/' if running from folder in production
+    // app.baseUrl = '/polymer-starter-kit/';
+  }
+
   app.displayInstalledToast = function() {
     // Check to make sure caching is actually enabled—it won't be in the dev environment.
     if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) {

bower.json

@@ -4,7 +4,7 @@
   "dependencies": {
     "iron-elements": "PolymerElements/iron-elements#^1.0.0",
     "neon-elements": "PolymerElements/neon-elements#^1.0.0",
-    "page": "visionmedia/page.js#~1.6.3",
+    "page": "visionmedia/page.js#~1.6.4",
     "paper-elements": "PolymerElements/paper-elements#^1.0.1",
     "platinum-elements": "PolymerElements/platinum-elements#^1.1.0",
     "polymer": "Polymer/polymer#^1.2.0"

docs/README.md

@@ -3,3 +3,4 @@
 * [Add ES2015 (formally ES6) support using Babel](add-es2015-support-babel.md)
 * [Polymer Performance Recipe](polymer-perf.md)
 * [Use PSK with Chrome Dev Editor](chrome-dev-editor.md)
+* [Deploy to Github Pages](deploy-to-github-pages.md)

docs/add-es2015-support-babel.md

@@ -33,7 +33,7 @@ Note: At the time of writing Crisper does not generate the sourcemaps. Your app
 
  - [ragingwind/gulp-crisper#4](https://github.com/ragingwind/gulp-crisper/issues/4)
  - [PolymerLabs/crisper#14](https://github.com/PolymerLabs/crisper/issues/14)
- 
+
 
 ## Integrating the transpile task
 
@@ -75,12 +75,12 @@ gulp.task('default', ['clean'], function (cb) {
 ```
 
  - In the `html` task replace `app` in the paths by `dist` since dist should already contain all JS and HTML files now transpiled.
- 
+
  ```patch
  // Scan your HTML for assets & optimize them
  gulp.task('html', function () {
    return optimizeHtmlTask(
--    ['app/**/*.html', '!app/{elements,test}/**/*.html'],  
+-    ['app/**/*.html', '!app/{elements,test}/**/*.html'],
 +    [dist('/**/*.html'), '!' + dist('/{elements,test}/**/*.html')],
      dist());
  });

docs/deploy-to-github-pages.md

@@ -0,0 +1,23 @@
+# Deploy to Github Pages
+
+You can deploy to github pages with a couple minor changes to Polymer Starter Kit:
+
+1. Uncomment this line  `// app.baseUrl = '/polymer-starter-kit/';` in app.js near the top
+
+  ```JavaScript
+  // Sets app default base URL
+  app.baseUrl = '/';
+  if (window.location.port === '') {  // if production
+    // Uncomment app.baseURL below and
+    // set app.baseURL to '/your-pathname/' if running from folder in production
+    // app.baseUrl = '/polymer-starter-kit/';
+  }
+  ```
+2. Change `app.baseUrl = '/polymer-starter-kit/';`  to `app.baseUrl = '/your-pathname/';` (ex: if you repo is `github.com/username/bobs-awesome-site` you would change this to `bobs-awesome-site`)
+3. Run `gulp build-deploy-gh-pages` from command line
+4. To see changes wait 1-2 minutes then load Github pages for your app (ex: http://polymerelements.github.io/polymer-starter-kit)
+
+### Notes
+
+* When deploying to Github Pages we recommend using hashbangs which is Polymer Starter Kit default.
+* This method should work for most hosting providers when using a subfolder.

gulpfile.js

@@ -23,6 +23,7 @@ var glob = require('glob-all');
 var historyApiFallback = require('connect-history-api-fallback');
 var packageJson = require('./package.json');
 var crypto = require('crypto');
+// var ghPages = require('gulp-gh-pages');
 
 var AUTOPREFIXER_BROWSERS = [
   'ie >= 10',
@@ -305,6 +306,20 @@ gulp.task('default', ['clean'], function(cb) {
     cb);
 });
 
+// Build then deploy to GitHub pages gh-pages branch
+gulp.task('build-deploy-gh-pages', function(cb) {
+  runSequence(
+    'default',
+    'deploy-gh-pages',
+    cb);
+});
+
+// Deploy to GitHub pages gh-pages branch
+gulp.task('deploy-gh-pages', function() {
+  return gulp.src('./dist/**/*')
+    .pipe($.ghPages());
+});
+
 // Load tasks for web-component-tester
 // Adds tasks for `gulp test:local` and `gulp test:remote`
 require('web-component-tester').gulp.init(gulp);

package.json

@@ -10,6 +10,7 @@
     "gulp-cache": "^0.4.0",
     "gulp-changed": "^1.0.0",
     "gulp-cssmin": "^0.1.7",
+    "gulp-gh-pages": "^0.5.4",
     "gulp-html-extract": "^0.0.3",
     "gulp-if": "^2.0.0",
     "gulp-imagemin": "^2.2.1",