How can we install Google Web Components elements in polymer 3
Example - using google-youtube or many more elements can't support npm install yet!
https://www.webcomponents.org/element/GoogleWebComponents/google-youtube
Is anyone figured out installing this for polymer 3.
You could try to install it will polymer modulizer
npm install -g polymer-modulizer
you'll need to have bower installed as well, then in your repo you can run
modulizer GoogleWebComponents/google-youtube
that will download and convert the component to the folder modulizer_workspace
https://github.com/Polymer/polymer-modulizer#workspace-mode
simply:
npm install -g polymer-modulizer
git clone https://github.com/GoogleWebComponents/google-youtube.git
cd google-youtube
modulizer --out .
copy the new folder "google-youtube" and paste in your proyect in node_modules
The modulizer didn't work for me, thus if just simply used an iframe to integrate a video. Since I don't need any of the google-youtube webcomponent properties this works fine for my website.
<iframe
class="video-frame"
src="https://www.youtube.com/embed/[[videoId]]"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"
frameBorder="0">
</iframe>
see also w3schools for additional query parameters like autoplay etc.
well you can pull the component from github and used the polymer 3 modulizer to covert the element to a polymer 3 element and they just use it on to your application.
Related
When I use polymer init to create a polymer 2 element, I see that an /app directory is created. Is this expected? I'm being told by my team members that there should be no /app directory installed when creating a polymer 2 element.
I used npm install -g polymer-cli#next for the install. Also tried uninstalling and reinstalling again.
Any ideas are appreciated.
According to the docs this is not an expected behaviour.
This is not also a behaviour of the old version of the polymer-cli.
Can you please show your prompt result after running the command?
I found out that the issue was related to having a .bowerrc file in a parent directory. In there, the 'app' directory was specified. I simply had to remove the 'app' reference and when I ran bower install again bower_components were installed without the app directory.
Can anyone point me to a tutorial that uses Polymer 2 and polymer-build from Polymer CLI? When I use any example in the polymer-starter-kit and use polymer serve, it works fine; but when I use polymer build and serve the bundled or unbundled directory, I get 404 errors. I have even updated to the newest alpha version of polymer-cli.
Also, using https://github.com/tony19/generator-polymer-init-2-x-app generators have the same problem.
I also spent quit a bit of time to figure this one out. Please use the polymer-cli#next instead of polymer-cli
Plain polymer-cli doesn't seem to have the latest build and optimizations to support Polymer 2.0#Preview related functionality.
You can install polymer-cli#next. In Ubuntu, you can simply use npm install -g polymer-cli#next
Then on, the bundled and unbundled versions of the application generated through polymer build would just works fine.
Edit:
You can find my sample Polymer2.0#Preview version of the code at https://github.com/phani1kumar/phani1kumar.github.io branch is "devmaster".
the sw-precache-config.js is initial render-blocking. This will load all the resources that the main page needs to make the app available for offline use. src/lazy-resources.html loads resources for the next routes.
You would need to get a proper configuration based on your layout and main page in the following 3 files:
sw-precache-config.js, polymer.json, src/lazy-resources.html. This is a practice followed in the shop app from Polymer team, you may opt to a different mechanism for lazy loading. The bottom-line for lazy loading is to load the resources after Polymer.RenderStatus.afterNextRender.
You may also find the following article interesting: https://medium.com/#marcushellberg/how-i-sped-up-the-initial-render-of-my-polymer-app-by-86-eeff648a3dc0#.pi2iucwzi
I noticed a bug in the generator in that the starter-kit subgenerator was missing a dependency on webcomponentsjs, which would cause an error with polymer-build. And as you discovered, polymer.json was also missing dependencies for the polyfill support of webcomponentsjs, which caused 404s on polyfilled browsers (such as Linux Chrome). That's all fixed now in v0.0.6.
You'll also need a version of polymer-build that does not try to uglify the JavaScript, which would fail due to its inability to recognize ES6. The new-build-flags branch of the polymer-cli repo replaces uglify with babili for ES6 minification (added in PR#525). You could check out that branch and build it yourself, or you could install it from here:
npm i -g tony19-contrib/polymer-cli#dist-new-build-flags
For convenience, this branch is added as a devDependency when generating the 2.0 starter kit with generator-polymer-init-2-x-app.
To build and serve a Polymer 2.0 Starter Kit project:
Generate a 2.0 Starter Kit (using generator-polymer-init-2-x-app, v0.0.6 or newer) by selecting 2-x-app - starter application template:
$ polymer init
? Which starter template would you like to use?
...
2-x-app - (2.0 preview) blank application template
2-x-app - (2.0 preview) blank element template
❯ 2-x-app - (2.0 preview) starter application template
After the project generator finishes, build the project with yarn build:
$ yarn build
info: Deleting build/ directory...
info: Generating build/ directory...
info: Build complete!
Note that the output is only build/, and no longer build/bundled/ and build/unbundled/.
Serve up the contents of the build directory, and automatically open a browser to it:
$ polymer serve build -o
You could also serve it with a different tool to verify that the build output would work outside of the context of any Polymer tools. Start a Python server in build/, and manually open a browser to it:
$ cd build
$ python -m SimpleHTTPServer
I want to view this demo of Polymerfire in my browser.
I expect to see the demo run in my browser. Instead, I see a blank page and the following console error.
console.log.error.message
GET http://localhost:8080/ 404 (Not Found)
Navigated to http://localhost:8080/
I used the following procedure:
I installed the Polymer-CLI multi-tool per the instructions found here.
I created a project using the Polymer Starter Kit (PSK).
I named the project my-app.
I installed the Github repo found here using the CLI:bower install ---save firebase/polymerfire
I opened the terminal and navigated to the app's root directory.
cd path/to/my-app
I ran the following Polymer-CLI command (per the instructions found here).polymer serve
What can I do to try and solve this so I can see the demo run in my browser?
The best way to run an elements demo is to check it out...
git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
I have never tried to run the demos from a bower install'd folder but, the above method will work.
You also have to navigate to the correct localhost path:http://localhost:8080/components/polymerfire/demo/
So the complete procedure (from the command line) is:
First, install the polymer-cli per the instructions found here.
npm install -g bower
npm install -g polymer-cli
Then run the following.
shell.sh
git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
open http://localhost:8080/components/polymerfire/demo/
I'm having trouble with electron-compile.
The docs state
How does it work? (Easiest Way)
Change your reference to electron-prebuilt to electron-prebuilt-compile. Tada! You did it.
What reference, where? You can't be talking about package.json?
I've always run electron using supervisor -x "electron" -i "./" .
What am I completely missing / what should be the contents of my pull request to make this clearer?
I've installed electron-compile with npm i electron-compile --save-dev
I'd like to have es2015/jsx precompiled to es5, so that I can run a react application in electron. electron-compile appears to solve this problem.
You should install Electron as a dev reference in package.json, yes:
npm install --save-dev electron-prebuilt-compile
Don't install Electron as a global because then other people have to set stuff up to run your app (i.e. they now have to micromanage which version of Electron they have installed globally)
With the recent versions (electron 1.3.5), I was unable to get electron-prebuilt-compile working, well it works for development but packaging for production has no real working examples.
It seems the compiling and packaging needs to be done manually, so in case anyone needs a working example, it's here. Hope to save someone some time and pain.
My question is it good to install html5boilerplate with bower?
How can one proceed after that as it have its own directory for css and javascript and everything will come under bower_component/html5boilerplate
No, use Yeoman http://yeoman.io/ is even better than download the .zip
note: you need nodejs installed to install Yeoman
Install: npm install -g yo
https://github.com/h5bp/generator-h5bp
Install: npm install -g generator-h5bp
Run it with yo: yo h5bp
No, it's not.
HTML5 Boilerplate is meant to be used as a base for starting a new project.
Bower is a great way to manage libraries that are going to be used in a project, like jQuery or AngularJS.
The better thing for you to do is to download the HTML5 Boilerplate zip and extract its files into your project root folder.