polymer/pwa-starter-kit

Starter templates for building full-featured Progressive Web Apps from web components.

Status: No longer under development

This project is no longer under development.

If you're interested in continuing to use PWA Starter Kit, feel free to fork and modify it as you like.

If you want to start a new application project using LitElement, the open-wc application scaffold generator is one good starting point.

PWA Starter Kit

This sample app is a starting point for building PWAs. Out of the box, the template gives you the following features:

• all the PWA goodness (manifest, service worker)
• a responsive layout
• application theming
• example of using Redux for state management
• offline UI
• simple routing solution
• fast time-to-interactive and first-paint through the PRPL pattern
• easy deployment to prpl-server or static hosting
• unit and integrating testing starting points
• documentation about other advanced patterns.

📖 Head over to the documentation site for more details or check out how to get started!

TODOs

• Setup Safari testing on Travis.
• Deploy all templates as demos.
• Update to latest Material Web Components.

pwa-starter-kit's Issues

pnpm compatibility

PWA Starter Kit doesn't work with pnpm. The only way to make it work is using the discouraged option shamefully-flatten. This package manager is strict, meaning that only works if the dependency tree is well defined in package.json and no packages are arbitrarily accessed. If pnpm doesn't work is because there are missing dependencies definitions in some packages.

I encourage the Polymer team to try a clean installation of PWA Starter Kit with pnpm, and check the logged errors to track the missing packages.

Thanks!

Incorrect export when `await` the same file several times

Checked on the latest version, 0.8.0 at the moment.

Steps to reproduce:

• Replace switch in src/actions/app.js by the following one:

switch(page) {
    case 'view1':
      await import('../components/my-view1.js');
      // Put code here that you want it to run every time when
      // navigate to view1 page and my-view1.js is loaded
      break;
    case 'view2':
      await import('../components/my-view1.js');
      await import('../components/my-view2.js');
      break;
    case 'view3':
      await import('../components/my-view1.js');
      await import('../components/my-view3.js');
      break;
    default:
      await import('../components/my-view404.js');
  }

• Run npm run build:prpl-server or npm run build:static
• Run npm run serve:prpl-server or npm run serve:static
• Open the app in browser

Expected result:

• The app is working

Current result:

• The app is broken due to Uncaught (in promise) SyntaxError: The requested module './my-app.js' does not provide an export named 'html'

The actual reason of this error is that export in the built my-app.js is incorrect. The expected one:
export{appLayoutBehavior as $appLayoutBehavior,appScrollEffectsBehavior as $appScrollEffectsBehavior, [... a lot of exports ....], PageViewElement,SharedStyles,app$1 as $appDefault,store};

The real one:
export{UPDATE_PAGE,UPDATE_OFFLINE,UPDATE_DRAWER_STATE,OPEN_SNACKBAR,CLOSE_SNACKBAR,navigate,showSnackbar,updateOffline,updateLayout,updateDrawerState}; which is actually /src/actions/app.js export

Wiki Error

Adding page to application
"page" is missing underscore for both nav and drawer

currently is
<a selected?="${page === 'view4'}" href="$/view4">New View!</a>

should be
<a selected?="${_page === 'view4'}" href="$/view4">New View!</a>

macOS HS: npm run test:unit fails with "TypeError: Cannot read property '1' of null"

Environment:

• macOS High Sierra
• node 10.3.0
• npm 6.1.0

Steps:

1. git clone https://github.com/Polymer/pwa-starter-kit pwa.demo
2. cd pwa.demo
3. npm install
   npm-list-out.txt
4. npm audit fix -> cause some warnings on npm install
5. npm run test:unit

> [email protected] test:unit /Users/homeboy/Work/py/pwa.demo
> polymer test --module-resolution=node --npm


TypeError: Cannot read property '1' of null

error: [cli.main]   cli runtime exception: TypeError: Cannot read property '1' of null
error: [cli.main]   TypeError: Cannot read property '1' of null
    at module.exports (/Users/homeboy/Work/py/pwa.demo/node_modules/polymer-cli/node_modules/promisify-node/utils/args.js:9:63)
    at processExports (/Users/homeboy/Work/py/pwa.demo/node_modules/polymer-cli/node_modules/promisify-node/index.js:61:29)
    at processExports (/Users/homeboy/Work/py/pwa.demo/node_modules/polymer-cli/node_modules/promisify-node/index.js:82:25)
    at processExports (/Users/homeboy/Work/py/pwa.demo/node_modules/polymer-cli/node_modules/promisify-node/index.js:82:25)
    at processExports (/Users/homeboy/Work/py/pwa.demo/node_modules/polymer-cli/node_modules/promisify-node/index.js:82:25)
    at module.exports (/Users/homeboy/Work/py/pwa.demo/node_modules/polymer-cli/node_modules/promisify-node/index.js:164:10)
    at /Users/homeboy/Work/py/pwa.demo/node_modules/polymer-cli/node_modules/web-component-tester/runner/paths.js:49:23
    at Generator.next (<anonymous>)
    at /Users/homeboy/Work/py/pwa.demo/node_modules/polymer-cli/node_modules/web-component-tester/runner/paths.js:20:71
    at new Promise (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:unit: `polymer test --module-resolution=node --npm`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/homeboy/.npm/_logs/2018-06-01T13_32_38_812Z-debug.log

2018-06-01T13_32_38_812Z-debug.log

Can I fix this?

Thanks and Cheers,
Alex

build script only supports mac

npm run build currently builds prpl-server & static, but as a windows user the prpl-server script does not work, since it uses commands like:
rm -rf
mv
renamer

none of these commands work on windows. Not really hard to change as a windows users, but perhaps should work out of the box?

Local server not accessible on devices on same network

Steps to reproduce..

1. clone, npm install, build, npm start => server running on 127.0.0.1:8081
2. ifconfig | grep 192.168 - to get the local address
3. open the address:8081 from step 2 on another device

step 3 returns refused connection.
Even if I try opening the address:8081 from same device, same error.

Possibly an issue with prpl-server?

PRPL Server Question

HI guys, I came across the PRPL server and initially it looked like a Godsend as to what I am trying to accomplish.

I wish to have a static polymer index.html file which presents a bunch of static information to the user as well as a Node server running in the functions area that renders out a separate polymer html file with dynamic content from Firestore. How would I route these requests? I added a link in the main index.html file for the following path: '/comments' - below is the modified index.js file in functions folder.

const functions = require('firebase-functions');
const prpl = require('prpl-server');
const express = require('express');
const rendertron = require('rendertron-middleware');

const app = express();

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://render-tron.appspot.com/render',
  injectShadyDom: true,
}));

app.get('/comments', (request, response) => {
  response.send('<h1>Comments</h1>');
});

app.get('/*', prpl.makeHandler('./build', require('./build/polymer.json')));



exports.app = functions.https.onRequest(app);

Any help would be greatly appreciated.

NPM: duplicate dependencies and audit warnings

Could this be an OSX issue, that the path is too long?
I even tried running sudo npm install to no effect

> node scripts/build-browser-scripts

/Users/kristianmandrup/repos/tecla5/tecla5-site/node_modules/polymer-cli/node_modules/mkdirp/index.js:90
                    throw err0;
                    ^

Error: EACCES: permission denied, mkdir '/Users/kristianmandrup/repos/tecla5/tecla5-site/node_modules/polymer-cli/node_modules/wd/build'
    at Object.fs.mkdirSync (fs.js:902:18)
    at sync (/Users/kristianmandrup/repos/tecla5/tecla5-site/node_modules/polymer-cli/node_modules/mkdirp/index.js:71:13)
    at Object.<anonymous> (/Users/kristianmandrup/repos/tecla5/tecla5-site/node_modules/polymer-cli/node_modules/wd/scripts/build-browser-scripts.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
    at startup (internal/bootstrap/node.js:201:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node scripts/build-browser-scripts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Integration test errors

When I try to run the integration tests from a fresh clone, I get errors at the end:

> [email protected] test:integration /home/nic/dev/pwa-starter-kit/my-app
> mocha test/integration --timeout=10000



  routing tests
    ✓ the page selector switches pages (1764ms)
    ✓ the page selector switches pages in a different way (946ms)

  👀 page screenshots are correct
    wide screen
📸 wide/index.png => 61678 bytes, 0.2072707746118374% different
      1) /index.html
📸 wide/view1.png => 61678 bytes, 0.2072707746118374% different
      2) /view1
📸 wide/view2.png => 59020 bytes, 0.22544875585299656% different
      3) /view2
📸 wide/view3.png => 59593 bytes, 0.1876301971788609% different
      4) /view3
📸 wide/batmanNotAView.png => 26058 bytes, 0.04283317418893817% different
      5) /404
    narrow screen
📸 narrow/index.png => 70159 bytes, 0.4054856996033467% different
      6) /index.html
📸 narrow/view1.png => 70159 bytes, 0.4054856996033467% different
      7) /view1
📸 narrow/view2.png => 58060 bytes, 0.4147195323665912% different
      8) /view2
📸 narrow/view3.png => 59637 bytes, 0.35449888391064865% different
      9) /view3
📸 narrow/batmanNotAView.png => 19305 bytes, 0.07186330715742481% different
      10) /404


  2 passing (16s)
  10 failing

  1) 👀 page screenshots are correct
       wide screen
         /index.html:

      number of different pixels
      + expected - actual

      -992
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  2) 👀 page screenshots are correct
       wide screen
         /view1:

      number of different pixels
      + expected - actual

      -992
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  3) 👀 page screenshots are correct
       wide screen
         /view2:

      number of different pixels
      + expected - actual

      -1079
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  4) 👀 page screenshots are correct
       wide screen
         /view3:

      number of different pixels
      + expected - actual

      -898
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  5) 👀 page screenshots are correct
       wide screen
         /404:

      number of different pixels
      + expected - actual

      -205
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  6) 👀 page screenshots are correct
       narrow screen
         /index.html:

      number of different pixels
      + expected - actual

      -1010
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  7) 👀 page screenshots are correct
       narrow screen
         /view1:

      number of different pixels
      + expected - actual

      -1010
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  8) 👀 page screenshots are correct
       narrow screen
         /view2:

      number of different pixels
      + expected - actual

      -1033
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  9) 👀 page screenshots are correct
       narrow screen
         /view3:

      number of different pixels
      + expected - actual

      -883
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)

  10) 👀 page screenshots are correct
       narrow screen
         /404:

      number of different pixels
      + expected - actual

      -179
      +0

      at exports.PNG.doneReading (test/integration/visual.js:143:59)
      at exports.PNG.<anonymous> (node_modules/pngjs/lib/png.js:37:10)
      at module.exports.ParserAsync._complete (node_modules/pngjs/lib/parser-async.js:153:8)
      at module.exports.complete (node_modules/pngjs/lib/filter-parse-async.js:19:12)
      at module.exports.Filter._reverseFilterLine (node_modules/pngjs/lib/filter-parse.js:169:10)
      at module.exports.ChunkStream._processRead (node_modules/pngjs/lib/chunkstream.js:174:13)
      at module.exports.ChunkStream._process (node_modules/pngjs/lib/chunkstream.js:193:14)
      at module.exports.ChunkStream.write (node_modules/pngjs/lib/chunkstream.js:61:8)
      at Inflate.<anonymous> (node_modules/pngjs/lib/parser-async.js:94:9)
      at addChunk (_stream_readable.js:274:12)
      at readableAddChunk (_stream_readable.js:261:11)
      at Inflate.Readable.push (_stream_readable.js:218:10)
      at Inflate.Transform.push (_stream_transform.js:146:32)
      at Zlib.processCallback (zlib.js:556:10)



npm ERR! code ELIFECYCLE
npm ERR! errno 10
npm ERR! [email protected] test:integration: `mocha test/integration --timeout=10000`
npm ERR! Exit status 10
npm ERR!
npm ERR! Failed at the [email protected] test:integration script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nic/.npm/_logs/2018-05-16T17_24_14_312Z-debug.log

With the debug log:

(pwa-starter-kit) ~/d/p/my-app ❯❯❯ cat /home/nic/.npm/_logs/2018-05-16T17_24_14_312Z-debug.log                                                                                               ⏎
0 info it worked if it ends with ok
1 verbose cli [ '/home/nic/.virtualenvs/pwa-starter-kit/bin/node',
1 verbose cli   '/home/nic/.virtualenvs/pwa-starter-kit/bin/npm',
1 verbose cli   'run',
1 verbose cli   'test:integration' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pretest:integration',
4 verbose run-script   'test:integration',
4 verbose run-script   'posttest:integration' ]
5 info lifecycle [email protected]~pretest:integration: [email protected]
6 info lifecycle [email protected]~test:integration: [email protected]
7 verbose lifecycle [email protected]~test:integration: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~test:integration: PATH: /home/nic/.virtualenvs/pwa-starter-kit/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/nic/dev/pwa-starter-kit/my-app/node_modules/.bin:/home/nic/.virtualenvs/pwa-starter-kit/bin:/usr/lib/hardening-wrapper/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/lib/jvm/default/bin:/opt/marytts/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl
9 verbose lifecycle [email protected]~test:integration: CWD: /home/nic/dev/pwa-starter-kit/my-app
10 silly lifecycle [email protected]~test:integration: Args: [ '-c', 'mocha test/integration --timeout=10000' ]
11 silly lifecycle [email protected]~test:integration: Returned: code: 10  signal: null
12 info lifecycle [email protected]~test:integration: Failed to exec test:integration script
13 verbose stack Error: [email protected] test:integration: `mocha test/integration --timeout=10000`
13 verbose stack Exit status 10
13 verbose stack     at EventEmitter.<anonymous> (/home/nic/.virtualenvs/pwa-starter-kit/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack     at EventEmitter.emit (events.js:180:13)
13 verbose stack     at ChildProcess.<anonymous> (/home/nic/.virtualenvs/pwa-starter-kit/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:180:13)
13 verbose stack     at maybeClose (internal/child_process.js:936:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/nic/dev/pwa-starter-kit/my-app
16 verbose Linux 4.16.8-1-ARCH
17 verbose argv "/home/nic/.virtualenvs/pwa-starter-kit/bin/node" "/home/nic/.virtualenvs/pwa-starter-kit/bin/npm" "run" "test:integration"
18 verbose node v9.11.1
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 10
22 error [email protected] test:integration: `mocha test/integration --timeout=10000`
22 error Exit status 10
23 error Failed at the [email protected] test:integration script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 10, true ]

it seems the value of numDiffPixels is ['', '']

The version of picelmatch I have is

[email protected]

PS: the files are generated:

(pwa-starter-kit) ~/d/p/my-app ❯❯❯ find test/integration -name "*png"|xargs file
test/integration/screenshots-baseline/narrow/batmanNotAView.png: PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/narrow/index.png:          PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/narrow/view1.png:          PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/narrow/view2.png:          PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/narrow/view3.png:          PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/wide/batmanNotAView.png:   PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/wide/index.png:            PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/wide/view1.png:            PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/wide/view2.png:            PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-baseline/wide/view3.png:            PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/wide/index.png:             PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/wide/view1.png:             PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/wide/view2.png:             PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/wide/view3.png:             PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/wide/batmanNotAView.png:    PNG image data, 800 x 600, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/narrow/index.png:           PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/narrow/view1.png:           PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/narrow/view2.png:           PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/narrow/view3.png:           PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
test/integration/screenshots-current/narrow/batmanNotAView.png:  PNG image data, 375 x 667, 8-bit/color RGBA, non-interlaced
(pwa-starter-kit) ~/d/p/my-app ❯❯❯

Vulnerability Found on "renamer" Dev Dependency

The NPM audit security report is warning about 2 low vulnerabilities related to the package "renamer", a PWA Starter Kit dev dependency.

Prototype Pollution
renamer > app-usage-stats > usage-stats > cli-commands >command-line-usage > table-layout > deep-extend
https://nodesecurity.io/advisories/612

Prototype Pollution
renamer > command-line-tool > command-line-usage >table-layout > deep-extend
https://nodesecurity.io/advisories/612

According to 'npm audit', the solution would be updating "renamer" to version 0.7.0

Any infinite-list / iron-list samples using lit-html?

I'm wondering if it would be possible to include an infiinite list sample. Just tried to include it in one of my firebase related samples, but looks like there is no refernce code or anything out there yet.
Although iron-list or vaadin-grid is already available on npm, they are lacking samples. The existing vaadin-grid sample are still using PolymerElement.
Therefore I was wondering if it is even feasible or possible to integrate them in a lit-html sample?

API middleware for Redux in PWA Starter Kit

Hello,

I'm quite new on this tool and I just want to ask if you guys have a suggested Redux API middleware tool? Tried using redux-api-middleware but I always get this error

Uncaught SyntaxError: The requested module '../node_modules/redux-api-middleware/lib/index.js' does not provide an export named 'apiMiddleware'

when doing import {apiMiddleware} from 'redux-api-middleware'

Thanks for the assist!

npm test fails

Running this on macos 10.13.4:

$ git clone --depth 1 https://github.com/Polymer/pwa-starter-kit my-app
$ cd my-app
$ npm --version
6.0.1
$ npm install
....
$ npm test
TypeError: Cannot read property '1' of null

error: [cli.main]   cli runtime exception: TypeError: Cannot read property '1' of null
error: [cli.main]   TypeError: Cannot read property '1' of null
    at module.exports (/Users/mkm/tmp/my-app/node_modules/polymer-cli/node_modules/promisify-node/utils/args.js:9:63)
    at processExports (/Users/mkm/tmp/my-app/node_modules/polymer-cli/node_modules/promisify-node/index.js:61:29)
    at processExports (/Users/mkm/tmp/my-app/node_modules/polymer-cli/node_modules/promisify-node/index.js:82:25)
    at processExports (/Users/mkm/tmp/my-app/node_modules/polymer-cli/node_modules/promisify-node/index.js:82:25)
    at processExports (/Users/mkm/tmp/my-app/node_modules/polymer-cli/node_modules/promisify-node/index.js:82:25)
    at module.exports (/Users/mkm/tmp/my-app/node_modules/polymer-cli/node_modules/promisify-node/index.js:164:10)
    at /Users/mkm/tmp/my-app/node_modules/polymer-cli/node_modules/web-component-tester/runner/paths.js:49:23
    at Generator.next (<anonymous>)
    at /Users/mkm/tmp/my-app/node_modules/polymer-cli/node_modules/web-component-tester/runner/paths.js:20:71
    at new Promise (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:unit: `polymer test --module-resolution=node --npm`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mkm/.npm/_logs/2018-05-15T23_30_06_028Z-debug.log
npm ERR! Test failed.  See above for more details.

(FWIW, npm run test:integration works and the kit builds and serves just fine)

_firstRenreded called before _render with lazy loaded elements

Getting and initializing a child element of the shadow Dom during the _firstRendered callback is not working in the following case:

class MyView2 extends connect(store)(PageViewElement) {
  _render(props) {
    return html`
      <canvas id="draw"></canvas>
    `;
  }

  static get properties() { return {
    // This is the data from the store.
    _clicks: Number,
    _value: Number
  }}

  _firstRendered() {
    console.log(this.shadowRoot.getElementById('draw')); // log null
  }

   _didRender(props, changedProps, prevProps) {
       console.log(this.shadowRoot.getElementById('draw')); // log canvas
   }

  // This is called every time something is updated in the store.
  _stateChanged(state) {
    this._clicks = state.counter.clicks;
    this._value = state.counter.value;
  }
}

It seems that the _firstRendered is called before _render in this situation. The original discussion is here lit/lit-element#57

Consider adding `font-display: swap` on the main title

This article suggests to use:

font-display: swap;

For logo texts. Adding this property would allow us to immediately render the main title with a fallback font (of course only if the original one isn't already available), and then replace it with the correct font as soon as it gets loaded.

(PS: the idea comes from a Lighthouse 3 audit to https://pwa-starter-kit.appspot.com/)

Redux section: add which time travel tool we use

package dependencies excess (and resulting exposure)

since this seems to be a funnel for so many things, and I'm a slight participant in this stuff (for what it's worth), I feel compelled to point out:

• there are notable issues of varying severity for a number of included dependencies (51 at time of this issue--use npm audit after install/update for current infos)
• the number of packages (2554) and contributors (1964) seems a little excessive

post-install at time of reporting, not including audit:

added 2554 packages from 1964 contributors in 168.548s
[!] 51 vulnerabilities found [16961 packages audited]
    Severity: 31 low | 11 moderate | 7 high | 2 critical
    Run `npm audit` for more detail```

New views/section directory

What do you think about a views directory for the components views:

• my-view1.js
• my-view2.js
• my-view3.js
• my-view404.js

I don't care so much about the name (views/sections/pages/etc) but about the concept.

From	To

Not working in IE 11

It looks like the starter kit is not working in IE 11 :(

Will template-responsive-drawer-layout stay in sync?

As of today, template-responsive-drawer-layout is a couple of weeks behind master.
Can we expect this branch to be kept in sync consistently?
This is an especially important branch, since it has the same functionalities as the "original" PSK...

Strange behaviour on yarn install - obsolete/ancient dependency warnings!?

$ yarn install
yarn install v1.5.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning polymer-cli > [email protected]: ...psst! Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
warning polymer-cli > [email protected]: 'github' has been renamed to '@octokit/rest' (https://git.io/vNB11)
warning polymer-cli > web-component-tester > [email protected]: Package no longer supported. Contact [email protected] for more info.
warning polymer-cli > web-component-tester > sinon > [email protected]: This package is unmaintained. Use @sinonjs/formatio instead
warning replace > [email protected]: Package no longer supported. Contact [email protected] for more info.
warning replace > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning wct-browser-legacy > sinon > [email protected]: This package is unmaintained. Use @sinonjs/formatio instead
info Unable to find a suitable version for "@webcomponents/webcomponentsjs", please choose one by typing one of the numbers below:
  1) "@webcomponents/webcomponentsjs@^2.0.0" which resolved to "2.0.0"
  2) "@webcomponents/webcomponentsjs@^1.0.7, @webcomponents/webcomponentsjs@^1.0.7" which resolved to "1.2.0"
Answer?: 

Load of warnings, such as use of bower

warning polymer-cli > [email protected]: ...psst! Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/

Loads of packages unmaintained or not supported. Looks like ancient dependencies!! What gives?

Drawer has scrollbar awkwardness

When the drawer opens, the scrollbar vanishes which leads to the content reorganizing.

Opening the drawer shouldn't have any effect on the layout or scrollbar.

build:prpl-server error on Windows 10

In package.json there is a Unix only command that won't run on Windows 10.

rm -rf

"build:prpl-server": "polymer build --auto-base-path && rm -rf server/build && mv build server/ && renamer --find node_modules --replace node_assets 'server/build/**' && replace node_modules node_assets server/build -r -s"

Configure babel-loader to include both the app source path and node_modules/@material

I'm trying to integrate mdc components in an application, so far so good with several other mdc components but I found an issue with the @material\dialog.
I have this comment from mdc team:

When I install using your list of dependencies, I also get [email protected] under top-level node_modules.

I'm wondering if this is not so much a npm issue as a toolchain issue... how are you transpiling/serving your JS? The fact that you're getting this error in the browser console in particular has me wondering, unless that's being forwarded from a dev server.

We're using MDC Dialog in our MDC Web Catalog repository, currently locked to [email protected], with no issues. AFAICT the index.js in focus-trap hasn't changed in 2.4.6. One thing worth noting is that we specifically configure babel-loader to include both the app source path and node_modules/@Material.

I'm going to reference a Github issue that I created for the MDC component:
github issue

Please could someone take a look at this, I need to start using this component in my application but it seems to be a problem with PWA Starter kit in the way is loading the packages because I tested directly in a vanilla app and the component works fine.

Thanks

npm start crush width "write after end" error

Hi guys, deploy your repository, but something went wrong.

Steps:

1. clone git clone https://github.com/PolymerLabs/pwa-starter-kit "my-app"
2. cd my-app
3. npm install end with "write after end" three times

npm ERR! write after end
npm ERR! write after end
npm ERR! write after end

Full log
4. npm start

> [email protected] start /home/cherrytea/Git/dossier-page
> polymer serve

error:   Promise rejection: Error: Property 'builds[1].js.compile' is not any of [subschema 0],[subschema 1]
error:   Error: Property 'builds[1].js.compile' is not any of [subschema 0],[subschema 1]
    at Function.validateOptions (/home/cherrytea/.nvm/versions/node/v8.9.4/lib/node_modules/polymer-cli/node_modules/polymer-project-config/lib/index.js:235:19)
    at Function.loadOptionsFromFile (/home/cherrytea/.nvm/versions/node/v8.9.4/lib/node_modules/polymer-cli/node_modules/polymer-project-config/lib/index.js:196:25)
    at new PolymerCli (/home/cherrytea/.nvm/versions/node/v8.9.4/lib/node_modules/polymer-cli/lib/polymer-cli.js:89:56)
    at Object.<anonymous> (/home/cherrytea/.nvm/versions/node/v8.9.4/lib/node_modules/polymer-cli/lib/run.js:35:17)
    at Generator.next (<anonymous>)
    at /home/cherrytea/.nvm/versions/node/v8.9.4/lib/node_modules/polymer-cli/lib/run.js:20:71
    at new Promise (<anonymous>)
    at __awaiter (/home/cherrytea/.nvm/versions/node/v8.9.4/lib/node_modules/polymer-cli/lib/run.js:16:12)
    at __dirname (/home/cherrytea/.nvm/versions/node/v8.9.4/lib/node_modules/polymer-cli/lib/run.js:33:8)
    at Object.<anonymous> (/home/cherrytea/.nvm/versions/node/v8.9.4/lib/node_modules/polymer-cli/lib/run.js:50:4)

Environment:

node v.8.9.4
npm v.5.8.0
OS: Manjaro Linux 17.1.8 (Hakoila)

Explain how to deploy to Firebase using PRPL Server

The wiki explains how to deploy prpl-server to App Engine. However, it would be great to also have a little guide explaining how to deploy it to Firebase, since the Polymer docs only explain how to deploy the static version of the PWA. This morning I came up with this step-by-step gist that explains how to do that. If you think it makes sense to add this to the docs, I can easily tweak it to make it pwa-starter-kit specific and maybe a little less detailed. Also, if there is a shorter way to do that, I would be glad to know it. What do you think?

Tests are using symbols/fonts/emoji that are not documented

Hi,

This is a minor annoyance but the integration tests are using some unknown symbols/fonts/emoji (don't know from where it should come)
when running

npm run test:integration

I get :

  routing tests
    ✓ the page selector switches pages (1764ms)
    ✓ the page selector switches pages in a different way (946ms)


  👀 page screenshots are correct
    wide screen
📸 wide/index.png => 61678 bytes, 0.2072707746118374% different
      1) /index.html
📸 wide/view1.png => 61678 bytes, 0.2072707746118374% different
      2) /view1
📸 wide/view2.png => 59020 bytes, 0.22544875585299656% different
      3) /view2
📸 wide/view3.png => 59593 bytes, 0.1876301971788609% different
      4) /view3
📸 wide/batmanNotAView.png => 26058 bytes, 0.04283317418893817% different
      5) /404
    narrow screen
📸 narrow/index.png => 70159 bytes, 0.4054856996033467% different
      6) /index.html
📸 narrow/view1.png => 70159 bytes, 0.4054856996033467% different
      7) /view1
📸 narrow/view2.png => 58060 bytes, 0.4147195323665912% different
      8) /view2
📸 narrow/view3.png => 59637 bytes, 0.35449888391064865% different
      9) /view3
📸 narrow/batmanNotAView.png => 19305 bytes, 0.07186330715742481% different
      10) /404

With squares on the beginning of lines (? in my console).

Could you describe how to get rid of that (installing package or font), or remove that from https://github.com/Polymer/pwa-starter-kit/blob/master/test/integration/visual.js (cleaner but less beautiful)

Thx !

[DISSCUSION] Why not use js for the only attached the views active

Hi!

In the my-app file, has been replaced the iron-page by main tag and the attribute active in the views. That is good because lit html help us to manage the render of the inactives views but doesn't detached the components from the DOM.

The problem for example, is when we have a _stateChanged method on inactive views. This method will be call even if the view is inactive, because lit html doesn't control the call to _stateChanged method. It Also happens with listeners attached to the document inside the inactive views.

A possible solution could be using js to control the render of inactive views, removing these views from the DOM.

    <main class="main-content">
      ${this.getPage(_page)}
    </main>

     ...

      getPage(_page) {
    switch(_page) {
      case 'view1':
        return html`<my-view1 class="page" active></my-view1>`
        break;
      case 'view2':
        return html`<my-view2 class="page" active></my-view2>`
        break;
      case 'view3':
        return html`<my-view3 class="page" active></my-view3>`
        break
      case 'view404':
        return html`<my-view404 class="page" active></my-view404>`
        break
      default:
        return html`<my-view1 class="page" active></my-view1>`
    }  

This will give us more control on all listeners inside the views by disconectCallback method . But I'm not sure about the posible impact in performance.

loadPage method called for already loaded page,

I need to show a spinner while page is loading, after loading of page spinner should be hidden. But spinner should be hidden after revisit of same page. In current scenario since loadPage is called every time and import function is executing, so spinner is shown always. Is there anything can be done in order to avoid stop importing modules which are already imported. Any suggestions for achieving to show spinner only if any page is not imported.

Thanks.

Add table of contents to all the wiki pages

Question: why did u add yarn.lock to .gitignore ?

Improve the build process

In the build:static step, we don't need to create the three builds (es5-bundled, es6-bundled & esm-bundled), we only need the es5-bundled build.

---

Also, the build:prpl-server gulp task could directly use the clean:prpl-server gulp task, as the Polymer CLI, we always want to clean it. Also, the build:prpl-server npm script would be simpler:

"build:prpl-server": "gulp build:prpl-server",

PolymerCLI runs bower for PWA-starter kit

Ran polymercli (v 1.7) init and selected PWA-starter-kit. The process then tried to run bower and stopped on the error that there was no "bower.json". Obviously with Polymer 3.0 bower should not be invoked.

Dynamic expressions for import() are broken after polymer build

Unable to use expression literals for import path.

For example, if route path is /page/subpage, I'm trying to import subpage like this.
await import(../components/${page}/${subpage}.js);
Above line of code is working fine before build. But after polymer build throwing error for imports.

After build also it should support imports dynamically. Otherwise writing imports based on path would little heavy if one have more paths and subpath routes.

Thanks.

[feature request] Add a localization sample

It would be nice to have an example with the support of several languages.

Wiki error on adding page to application (app.js changes)

The instructions on the updates to lazy loading of the page have a crucial piece missing.
Need to add "view4" into the if statement as below

`const loadPage = (page) => async (dispatch) => {
// If the page is invalid, set to 404. The is also a good spot to check
// other location things like sub-path or query params.
if (['view1', 'view2', 'view3', 'view4'].indexOf(page) === -1) {
page = 'view404';
}`

I got mislead for some time, as it was showing 404, and I thought that was the correct page, but in fact it could not find view4.
Maybe using another template instead of 404 might be a better approach?
Can you include a pointer to which file needs to be edited , ie in this case its app.js

Also the code included in the wiki has
switch(this.page)

The actual code has no "this".

switch(page)

ps Many thanks for this starter kit, it really brings a lot of modern web dev stuff into one place :-)

Update to lit-element 0.5.2 fails

I'm not sure if this is a pwa-starter-kit or a lit-element bug, so I'm posting it here because reproducing it involves pwa-starter-kit.

After updating lit-element on my new pwa-starter-kit project yesterday all I got was an empty page with the following error:

Uncaught TypeError: window.ShadyCSS.prepareTemplateDom is not a function
at result (shady-render.ts:54)
at render (shady-render.ts:154)
at HTMLElement._applyRender (lit-element.ts:286)
at HTMLElement._propertiesChanged (lit-element.ts:218)
at HTMLElement._flushProperties (properties-changed.js:370)
at HTMLElement._flushProperties (lit-element.ts:232)
at HTMLElement.ready (properties-changed.js:193)
at HTMLElement.ready (lit-element.ts:119)
at HTMLElement._enableProperties (properties-changed.js:347)
at HTMLElement.connectedCallback (properties-mixin.js:226)

Unfortunately it's my first Polymer project so I have no clue how to start debugging this - sorry 😕

How to reproduce:
(I'm running this in Chrome 67.0.3396.87 on Windows 10)

1. Clone pwa-starter-kit
2. npm install
3. npm start
4. open localhost:8081 - page works
5. edit lit-element version number to "^0.5.2" in package.json
6. npm install
7. npm start
8. open localhost:8081 - white page, error shown in the Chrome devtools

I hope this helps - if there's anything else you need from me I'm happy to help. Thanks for providing such a great starting point for Polymer beginners 💯

What about Workbox?

Maybe consider adding workbox to the kit? Really nice developer experience and documentation.

es6 imports are not working properly.

Trying to use redux-firestore but got errors like these.
The requested module '../node_modules/redux-firestore/es/index.js' does not provide an export named 'reduxFirestore'

[feature request] Add a push notifications sample

(request received at the I/O sandbox from @ozasadnyy)

This should probably live in one of the apps (maybe flash-cards, to remind you to practice?), but we could also add an explanation on the wiki

Installing packages with Yarn

Installing deps using yarn gives prompts in terminal: Unable to find a suitable version for... which makes you select the version of each dependency to install.

Update to Redux v4

https://github.com/reactjs/redux/releases/tag/v4.0.0

How to create http2-push-manifest?

Hi, sorry, I tried to use http2-push-manifest but seems like it can't work with es6 modules. For now, we have a tool which can create push manifest?

Google Cloud Shell

I am not an expert in this tech stack. But, I can't use it with Google Cloud Shell "Web Preview" feature with the npm start command. This is unfortunate for people on Chromebooks or folks who don't want to get a working npm stack.

Errors in chrome window:

Access to Script at 'https://accounts.google.com/o/oauth2/auth?client_id=618104708054-jqgabbtcm3fusmhf5hu82r7j8emh7aoa.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Fdevshell.appspot.com%2F_cloudshellProxy%2Foauth2callback&response_type=code&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&state=eyJYU1JGVG9rZW4iOiJOY2lqTGQ1ZHBxUFJtQ1NWTUJOUW1EcUtlQUk6MTUyNjAxMzQyMzQxMiIsIkFwcFVSTCI6Imh0dHBzOi8vODA4MS1kb3QtMzU5NjUyNC1kb3QtZGV2c2hlbGwuYXBwc3BvdC5jb20vc3JjL2NvbXBvbmVudHMvbXktYXBwLmpzIn0%3D' from origin 'https://8081-dot-3596524-dot-devshell.appspot.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://8081-dot-3596524-dot-devshell.appspot.com' is therefore not allowed access.
(index):1 Failed to load https://accounts.google.com/o/oauth2/auth?client_id=618104708054-jqgabbtcm3fusmhf5hu82r7j8emh7aoa.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Fdevshell.appspot.com%2F_cloudshellProxy%2Foauth2callback&response_type=code&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&state=eyJYU1JGVG9rZW4iOiJvbWotdjhEU3dlZFdSZ1dqeGtqeVpOeHliU0E6MTUyNjAxMzQyMzYxMCIsIkFwcFVSTCI6Imh0dHBzOi8vODA4MS1kb3QtMzU5NjUyNC1kb3QtZGV2c2hlbGwuYXBwc3BvdC5jb20vbWFuaWZlc3QuanNvbiJ9: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://8081-dot-3596524-dot-devshell.appspot.com' is therefore not allowed access.

Is lit-html#map the successor for dom-repeat?

I was trying to find an example of having dom-repeat in the starter-kit, but I only could find this commit 73b9105#diff-5ae7aae99baa59f89af90d458c0230aeL14

In there dom-repeat was removed for .map in combination with nested templates.

I guess because this starter-kit is the new standard on how to build apps, we should ditch dom-repeat? Or what is the recommendation here?

[Help Wanted] [Heroku deployment] use process.env.PORT

The server runs on port 8080, 8081 and 3000 depending on the kind of build and ignores process.env.PORT on Heroku.

How to deploy this on Heroku after building?

[PROPOSAL] pwa-starter-kit as a github-fetch-starter template.

Recently I've made github-fetch-starter, a micro node app that lets you fetch a "starter" release on github. There are few advantages to use this program compared to a barbarian "git clone all my starter" :

• You can control which files are included in the starter. .git, .travis.yml, and other files are usually not intended to be on the end-user file-system.
• You don't want your end-user git clone the master state of your project because it could have a failure build state.
• github-fetch-starter implements a dummy placeholder replacement system. A template is like a mold with customizable parts, these variable parts are user-dependent (e.g. application name, description, etc...). github-fetch-starter prompts for every placeholders found in the starter during fetch time. As soon as the starter is made available on the user file-system, the user does not need to brain consume what tiny parts are customizables and can directly focus on writing components.

I originally made this application for personal use but I love Polymer and your decision to make it available in the node empire was more than appreciated. Therefore I thought this tool of mine could be of use for you. And it was made with love.

(Feel free to contact me or to PR the repository in case you are interested or want to see some changes)

Adding prpl-server as a library + express to the wiki

In the wiki there is a section regarding "building for prpl-server".

I suggest we add a walkthrough on how to add server side logic to the project using express as mentioned in the prpl-server-node readme.

1. Install express in the server folder

cd server
npm i --save express

2. Add a app.js file to the server folder

3. Add server side logic to the file

// server/app.js or whatever you wish to call this file
const express = require('express')
prpl = require('prpl-server');
const app = express();

app.get('/api/launch', (req, res, next) => res.send('boom'));
let polyConfigFile = require("./build/polymer.json");
app.get('/*', prpl.makeHandler('server/build',polyConfigFile));


app.listen(3000, () => console.log('Express + prpl-server app listening on port 3000!'));

3. Add run script to root folder package.json

cd ..

{ ...
    "scripts": {
        ...
        "serve:prpl-server-express": "node ./server/app.js",
       ...
    },
...}

4. Dont forget to build so you have something to serve

npm run build:prpl-server

• Please note thet this runs a script that modifies polymer.json in the server folder:
  "build:prpl-server": "polymer build --auto-base-path && rm -rf server/build && mv build server/ && renamer --find node_modules --replace node_assets 'server/build/**' && replace node_modules node_assets server/build -r -s",
  The --auto-base-path flag adds autoBasePath:true to the polymer.json file.
  This autoBasePath:true property is necessary in order to get the file paths right when serving the app from the server folder.

5. Serve from express + prpl-server

npm run serve:prpl-server-express
And you should see something like this:

Consider adding preconnect hint to get faster display of Google Fonts

We can greatly reduce the delay by adding the preconnect hint below:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints/

Use next-gen version of the app-layout elements

Update to use next-gen version of app-drawer, app-header and app-toolbar when they are available.