polymer / polymer-starter-kit Goto Github PK

A starting point for Polymer apps

HTML 32.36% JavaScript 67.64%

polymer-starter-kit's Introduction

Polymer App Toolbox - Starter Kit

This template is a starting point for building apps using a drawer-based layout. The layout is provided by app-layout elements.

This template, along with the polymer-cli toolchain, also demonstrates use of the "PRPL pattern" This pattern allows fast first delivery and interaction with the content at the initial route requested by the user, along with fast subsequent navigation by pre-caching the remaining components required by the app and progressively loading them on-demand as the user navigates through the app.

The PRPL pattern, in a nutshell:

Push components required for the initial route
Render initial route ASAP
Pre-cache components for remaining routes
Lazy-load and progressively upgrade next routes on-demand

Setup

Prerequisites

Install Polymer CLI using npm (we assume you have pre-installed node.js).

npm install -g polymer-cli

Initialize project from template

mkdir my-app
cd my-app
polymer init polymer-3-starter-kit

Start the development server

This command serves the app at http://127.0.0.1:8081 and provides basic URL routing for the app:

npm start

Build

The npm run build command builds your Polymer application for production, using build configuration options provided by the command line or in your project's polymer.json file.

You can configure your polymer.json file to create multiple builds. This is necessary if you will be serving different builds optimized for different browsers. You can define your own named builds, or use presets. See the documentation on building your project for production for more information.

The Polymer Starter Kit is configured to create three builds. These builds will be output to a subdirectory under the build/ directory as follows:

build/
  es5-bundled/
  es6-bundled/
  esm-bundled/

es5-bundled is a bundled, minified build with a service worker. ES6 code is compiled to ES5 for compatibility with older browsers.
es6-bundled is a bundled, minified build with a service worker. ES6 code is served as-is. This build is for browsers that can handle ES6 code - see building your project for production for a list.
esm-bundled is a bundled, minified build with a service worker. It uses standard ES module import/export statements for browsers that support them.

Run polymer help build for the full list of available options and optimizations. Also, see the documentation on the polymer.json specification and building your Polymer application for production.

Preview the build

This command serves your app. Replace build-folder-name with the folder name of the build you want to serve.

npm start build/build-folder-name/

Run tests

This command will run Web Component Tester against the browsers currently installed on your machine:

npm test

If running Windows you will need to set the following environment variables:

LAUNCHPAD_BROWSERS
LAUNCHPAD_CHROME

polymer-starter-kit's People

Contributors

Stargazers

Watchers

Forkers

unbug bournesach danielandersson systronix jchavez dbox gesellschaft dookie23 peterblazejewicz ohyouknowwho mohsen1 sdierauf justindobbs japacible arunjit macariojames stonegithubs dainialpadraig gdgtucson jsnuts pdf devatpolydeals napalmdev nianyue samcarecho luhad benediktharter putraxor relmz32 isorna tpng globalepub codevlabs dahuchao zmoshansky moneal dexvitality veltall wonsikin zenified beingsane wellread dkordik ds-hwang superlin mgolub2 stephonye tyohan guillaumedev 218labs lizshannon popovsh6 handong890 sirajc lovewitty zeikman imwaihon ibrahimoluwadamilare lipeeh mgm7734 jparish3 yufengg abencoador frkr teeseeuu kenglxn pareshmayani mahdidridi nopakorn devplayerjoe claercio mikaelharsjo mixxmac alejotima erneledesma janusnic brunoaugustocom richoren lukevella davoudrafati drupalcrunch wesleyduff hassanabidpk chaabni chuckh young-digital-planet amudev007 woodywoodsta luluprat hack-alex2006hw ujil publiminal elynch303 aseaboyer-intrax fredericksilva skightteam nthato rikbrowning tom-mats robdodson

polymer-starter-kit's Issues

"Request method 'POST' is unsupported" - sw-toolbox.js

Getting this error after starting application.

Rewrite breakpoint-control use with media queries

Add support for favicons

Add them per starter kit.

Can't install dependencies

downloaded polymer starter kit, I have node.js and bower installed, following instructions in README.md

when I type:

sh
$ npm run deps

I get the error:

npm WARN package.json [email protected] No repository field.
sh: bower: command not found
npm ERR! weird error 127
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

bower is certainly installed. And I obviously fail the test:

$ gulp test:local

gulp commands fail - Error: Cannot find module 'core-util-is'

Ran npm install, bower install then gulp serve, tried gulp local:test as well, same result

this is on node 0.12.2

module.js:338
    throw err;
          ^
Error: Cannot find module 'core-util-is'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/usr/local/google/home/ktiedt/Projects/polymer-starter-kit/node_modules/gulp/node_modules/gulp-util/node_modules/through2/node_modules/readable-stream/lib/_stream_duplex.js:39:12)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

Investigate switching to the polybuild pipeline

Spend time looking at https://github.com/PolymerLabs/polybuild
Investigate if we should snarf the setup or use directly
Check when full HTML minification lands in the pipeline

Make sure we're pulling in all of paper-* and iron-*

Audit IOWA build setup for anything useful we're missing

Useful to know, even if we don't necessarily tackle em all for the alpha :)

Add support for meta-theme-color

Ideally, based on the advice from Zach around just using --dark-primary-color

Problem with example template autobinding snippets

I've a problem with template auto-binding event not being fired in kit:
https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/scripts/app.js#L24-L26
The same code in generator-polymer fires just fine:
https://github.com/yeoman/generator-polymer/blob/master/app/templates/app/app.js#L12-L14

'Our app is ready to rock!'

Can someone confirm this?

OS X/Chrome/Safari
PSK: v1.0.0

Apache server configs outdated?

The .htaccess file looks outdated. I see things like chrome=1, wrong file types for rss and atom, ...

Is the htaccess file pulled in from a third party or specific for this repo?

Though, do we need to deliver apache server configs out of the box? Not sure myself.

Add support for more-routing?

Consider whether to add in support for https://github.com/Polymore/more-routing once @nevir is happy with a 0.8-preview port.

The thinking is we could come with a happy medium between some very basic app layout (#7) and something like https://www.polymer-project.org/0.5/articles/spa.html

Replace layout with 0.8 AppKit / grid / breakpoints when ready

For starter kit, I've rewritten the elements in the Yeoman generator using 0.8 to give us basic layout using core-drawer/header panels.

It's unfortunately going to be a little broken until core-menu, core-item and so on have been ported to 0.8-preview in a reliable way.

Let's replace what we have now to use whatever awesome AppKit layout solution @blasten @cdata and c/o come up with :)

Update: I wonder if core-menu and core-item are going away in favour of https://github.com/PolymerElements/paper-menu && https://github.com/PolymerElements/paper-item without a core-* base other than selectable.

"python -m SimpleHTTPServer 8080" is not working on Ubuntu 15.04

But "python3 -m http.server 8080" works out of the box.

It's a clean install of 15.04 with very little customization. The error is odd, too, python complains that it could not open the file "-m", but if you leave off the module name and port, then it complains that the module required by -m is missing.

Investigate offering a minimal version too

Started in https://github.com/PolymerElements/polymer-starter-kit/tree/minimal out of interest after some feedback from @atotic

Update License to BSD-2 per rest of Polymer

Investigate possible vulcanization issues

GH page me!

http://polymerelements.github.io/polymer-starter-kit/

doesnt have all the bower deps

Welcome greeting is incorrect.

Changing the greeting repeats it twice.

Likely want to change the code from:

  <h1 class="paper-font-display1"><span>{{greeting}}</span>, <span>{{greeting}}</span>!</h1>

to:

  <h1 class="paper-font-display1"><span>Welcome</span>, <span>{{greeting}}</span>!</h1>

(minor) your instructions for starting the minimal starter have a bad dash

The instructions in README.md have python –m SimpleHTTPServer 8080
but the dash is an "evil" dash, so if you copy-paste the command you get python: can't open file '–m': [Errno 2] No such file or directory

Replacing with a normal "minus" fixed it.

Windows not supported?

Maybe you should provide some information about the supported platforms. It seems that Windows is not supported - which surprises as Polymer itself supports Windows.

Encourage use of test-fixture?

@cdata I'd like to encourage use of test-fixture for anyone using Starter Kit that writes tests.

We use it atm in https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/test/yo-greeting-basic.html && https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/test/yo-list-basic.html.

Does the element make sense as a general recommendation outside of the core eng team? I've personally found it useful, but wanted to check before we throw it at the masses.

Update to official Polymer Starter Kit logo

Zach signed off on using that logo for now, so let's update.

Update to a versioned <breakpoint-control>

We'll do this once @blasten has a tagged release available.

Accessibility audit

Optimizing for pagespeed insights

There's probably only so much that is possible, but wherever we can we should optimize the build process from a clean download to score highly on the Pagespeed Insights tool

Should elements be pre-packaged in the download?

Assume we can either use tooling to bower install before doing a tagged release or check-in our Bower dependencies.

Should dependencies be pre-included in the download? The reason I ask is that this:

Enables a "one-click" workflow if getting the Kit from our site. Reduces friction/time before use.
Avoids you having to bower install if downloading the kit (This step is avoided if getting it through the Yeoman generator)

Router

Hi,

This is more a question than an issue. But why does the starter-kit use https://github.com/visionmedia/page.js rather than https://github.com/PolymerLabs/more-routing or https://github.com/erikringsmuth/app-router (polymer 0.5) ?

Thanks in advance,
Thomas

Fix bugs with use of the breakpoint-control system

Switch to the correct mobile/tablet/specificity classes instead of what we have now. Do the same for Reader.

Use `<iron->` elements instead of `<core->`

Update bower.json
Update demo elements
Update unit tests

Starter kit app doesn't close nav bar on click

Run app locally as instructed
http://localhost:8080/
Hamburger menu ->
Nav from "Home" to "Users" or "Contact"
menu doesn't auto-close on nav and still obscures the new page.

sudo npm run deps: -> Error: EACCES, permission denied....

Error: EACCES, permission denied '/root/.config/configstore/bower-github.yml'
You don't have access to this file.

at Object.fs.openSync (evalmachine.<anonymous>:438:18)
at Object.fs.readFileSync (evalmachine.<anonymous>:289:15)
at Object.create.all.get (/home/ricardo/dev/liu-bob-psk/node_modules/web-component-tester/node_modules/bower/node_modules/configstore/index.js:34:29)
at Object.Configstore (/home/ricardo/dev/liu-bob-psk/node_modules/web-component-tester/node_modules/bower/node_modules/configstore/index.js:27:44)
at readCachedConfig (/home/ricardo/dev/liu-bob-psk/node_modules/web-component-tester/node_modules/bower/lib/config.js:22:23)
at defaultConfig (/home/ricardo/dev/liu-bob-psk/node_modules/web-component-tester/node_modules/bower/lib/config.js:11:24)
at Object.<anonymous> (/home/ricardo/dev/liu-bob-psk/node_modules/web-component-tester/node_modules/bower/lib/index.js:40:32)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)

npm ERR! [email protected] postinstall: node scripts/postinstall.js
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is most likely a problem with the web-component-tester package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node scripts/postinstall.js
npm ERR! You can get their info via:
npm ERR! npm owner ls web-component-tester
npm ERR! There is likely additional logging output above.

npm ERR! System Linux 3.16.7-21-desktop
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! cwd /home/ricardo/dev/liu-bob-psk
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.23
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/ricardo/dev/liu-bob-psk/npm-debug.log
npm ERR! not ok code 0

npm ERR! [email protected] deps: npm install -g gulp && npm install -g bower && npm install && bower install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deps script.
npm ERR! This is most likely a problem with the polymer-starter-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm install -g gulp && npm install -g bower && npm install && bower install
npm ERR! You can get their info via:
npm ERR! npm owner ls polymer-starter-kit
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 3.16.7-21-desktop
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "run" "deps"
npm ERR! cwd /home/ricardo/dev/liu-bob-psk
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.23
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/ricardo/dev/liu-bob-psk/npm-debug.log
npm ERR! not ok code 0

Switch to the grid experiments from breakpoint-control

Investigate if we should.

Add service-worker-elements to bower.json

https://github.com/PolymerElements/service-worker-elements

We can pull this in once we have 0.8-preview branches for both the Service Worker offline element and Push notifications.

Related to #3 and #2.

Should Sass be enabled by default?

Assume we'll be able to continue being flexible with Sass as an option in the Yeoman generator.

For PSK, we've got three options:

Don't enable Sass by default, encourage just using CSS
Don't enable Sass, encourage using the experimental 0.8 CSS custom properties system
Enable Sass by default. We'll adjust to support variables if and when they become more stable as a thing.

Once we decide, we may want to drop Sass support from the build.

Add Service Worker (offline) element

Decide whether to integrate sw-precache
Decide how to integrate <service-worker> into the element flow
Land a service-worker.js config file in a location where it will work from both gulp serve and is copied over during gulp builds

Explore a better solution to precache exceptions

From our other issue:

For serve, it's just runtime caching, so it will pull in the relevant files to the cache as you use the app. I could add in precaching to serve, but it would get a little messier, since I'd need to know which files from bower_components are actually being used in order to get all the non-vulcanizer elements cached.

I wonder if there's a solution we could add in the interim to avoid the missing precache.json exceptions we see on serve at present.

Add Push Notification element?

Once #2 has landed, let's look at whether we should add in Push
Should Push just be included in the pack, but not turned on by default? It'll be more specialist than the <service-worker> offline element.
If not on by default, what's the best way to enable usage? An entry in a \docs directory?

Need to update to use iron-flex-layout

layout attributes are no longer supported. Should update to use classes or custom properties.
e.g.
https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html#L61

BrowserSync: routes break on synchronized browsers

When using BrowserSync, synchronized browsers don't navigate to the correct route when clicking on Users or Contact in the navigation drawer

Click Users link from Chrome on Android, and Chrome on OS X and Window 8.1 displays "Cannot GET /users"

Click Contact link from Chrome on OS X, and Chrome on Android and Windows 8.1 displays displays "Cannot GET /contact"

Chrome - (43.0.2357.81) on OS X 10.7.4
Chrome - (42.0.2311.111) on Android 5.01
Chrome - (43.0.2357.81) on Windows 8.1

Update to WCT #master

Add webapp manifest.json

Add link to app-layouts from Frankie

http://polymerelements.github.io/app-layout-templates/

Maybe in the Starter Kit has a link to the app-layout-templates and say if user wants different app layouts they can get them here

Incorrect GitHub link on homepage

Not sure where should I report

https://developers.google.com/web/tools/polymer-starter-kit/

The GitHub link on the menu bar is incorrect,
it links to https://github.com/google/polymer-starter-kit

Improve support for pre-built binary versions on Windows

Hi,

I can't open the "polymer-starter-kit-with-checked-in-dependencies-1.0.0.zip".

"The compressed (zipped) folder is invalid..."

THX

Gulp serve doesn't lauch the app

Hi,

I try to install and launch the app.

First, I have an error du to spawn when I type grunt serve.
I fix this by add "try-thread-sleep": "^1.0.0", on package.json
After that, I have this error :

[00:50:08] Using gulpfile ~/Projects/polymer-starter-kit/gulpfile.js
[00:50:08] Starting 'styles'...
[00:50:24] Starting 'elements'...
[00:50:24] Starting 'images'...
[00:51:29] 'elements' all files 0 B
[00:51:29] Finished 'elements' after 1.07 min
Unhandled rejection Error: spawn ENOENT
    at errnoException (child_process.js:988:11)
    at Process.ChildProcess._handle.onexit (child_process.js:779:34)
[00:51:29] 'styles' all files 98 B
[00:51:29] Finished 'styles' after 1.35 min

Consider not using forceNarrow on desktop

https://www.polymer-project.org/1.0/docs/start/getting-the-code.html is great - left hand nav is very responsive, collapses and expands as I change the browser width. I want that for the starter kit - responsive design out of the box!

Current:
Run app locally
Enlarge window
Menu doesn't responsively become a left hand nav

Vulcanize not working from gulpfile

gulp created the elements.vulcanized.html file in my 'dist' folder but did not actually vulcanize it, elements.vulcanized.html and elements.html have the same content.

Looking further i found that gulp ends abruptly on vulcanize. See screenshot

errors installing dependencies, debug log below

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'deps' ]
2 info using [email protected]
3 info using [email protected]
4 verbose node symlink /usr/bin/node
5 verbose run-script [ 'predeps', 'deps', 'postdeps' ]
6 info predeps [email protected]
7 info deps [email protected]
8 verbose unsafe-perm in lifecycle true
9 info [email protected] Failed to exec deps script
10 verbose stack Error: [email protected] deps: npm install -g gulp && npm install -g bower && npm install && bower install
10 verbose stack Exit status 1
10 verbose stack at EventEmitter. (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
10 verbose stack at EventEmitter.emit (events.js:110:17)
10 verbose stack at ChildProcess. (/usr/lib/node_modules/npm/lib/utils/spawn.js:24:14)
10 verbose stack at ChildProcess.emit (events.js:110:17)
10 verbose stack at maybeClose (child_process.js:1015:16)
10 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
11 verbose pkgid [email protected]
12 verbose cwd /home/atomikolex/public_html/polymer/polymer-starter-kit-1.0.0
13 error Linux 3.19.0-9-generic
14 error argv "/usr/bin/node" "/usr/bin/npm" "run" "deps"
15 error node v0.12.4
16 error npm v2.10.1
17 error code ELIFECYCLE
18 error [email protected] deps: npm install -g gulp && npm install -g bower && npm install && bower install
18 error Exit status 1
19 error Failed at the [email protected] deps script 'npm install -g gulp && npm install -g bower && npm install && bower install'.
19 error This is most likely a problem with the polymer-starter-kit package,
19 error not with npm itself.
19 error Tell the author that this fails on your system:
19 error npm install -g gulp && npm install -g bower && npm install && bower install
19 error You can get their info via:
19 error npm owner ls polymer-starter-kit
19 error There is likely additional logging output above.
20 verbose exit [ 1, true ]

wrong data-binding attribute in my-greeting.html

The actual data-binding looks like this:

<input class="paper-font-body2" value="{{greeting::change}}">

Shout be changed to:

<input class="paper-font-body2" value="{{greeting::input}}">

so the value is changed in real-time and not on focus-out event.