Is there CDN for polymer elements?

Question

I would like to know if there are any CDNs for polymer elements, since you have to always download the elements and It would be more convinient to import it via cdn. Can't find any on google? Also are there any reasons that it does not exists or just because it is so new?

Answer 1

There is now!

I created this GitHub repository specifically for this purpose:

download/polymer-cdn

All GitHub repositories are automatically in CDN through RawGit. So, using that, we can now import Polymer elements using markup like this (for iron-icons in this case):

<link rel="import" 
      href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-icons/iron-icons.html">

The project structure was set up in such a way that imports from elements that you import (transitive dependencies) resolve correctly.

The readme for the repository has a list of all elements it contains.

Missing something? Let me know and I'll be happy to include it.

Try it

You can try it out right now by hacking on this Codepen:

Polymer-CDN Example.

Or you can run this code snippet:

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<style is="custom-style">
  :root {
    --paper-tabs-selection-bar-color: var(--paper-light-blue-900);
    --paper-tab-ink: var(--paper-light-blue-100);
    --paper-tabs: {
      color: white;
      background-color: var(--paper-light-blue-500);
    };
  }
</style>

<div>
  <paper-button raised><iron-icon icon="check"></iron-icon>OK</paper-button>
  <paper-button raised><iron-icon icon="clear"></iron-icon>Cancel</paper-button>
</div>

<p><paper-checkbox>Checkbox</paper-checkbox></p>

<p><paper-toggle-button></paper-toggle-button></p>

<paper-tabs selected="0">
  <paper-tab>TAB 1</paper-tab>
  <paper-tab>TAB 2</paper-tab>
  <paper-tab>TAB 3</paper-tab>
</paper-tabs>

Answer 2

This is an old question, but there is a non-hacky solution now: http://polygit.org/

It uses rawgit behind the curtains but provides a much nicer api.

Answer 3

You can also access polymer elements directly from polymer-project.org.

Example:

<link rel="import" href="https://www.polymer-project.org/0.5/components/core-ajax/core-ajax.html">

Answer 4

rawgit option

You would have to manage some dependencies manually since core-ajax.html returns 404 on polymer.html. Also rawgit.com cache is set to only 5 min (cache-control:max-age=300). 5 min cache is fine for version control, but it should be more for CDN (https://rawgit.com/Polymer/core-ajax/0.4.1/core-xhr.html). Also files are not minified.

vulcanize option

Probably best option before http/2 release. You would have to spend some time with configuration and integration into your build process. Also you don't have any CDN benefits (no data cost, already cached resources from third party domains.)

conclusion

There will be some CDN with minified polymer versions and long expires header on http/2 release. But I don't know about any right now.

Answer 5

I do not know any CDN hosting polymer elements right now and I assume it would be better to vulcanize them for a production environment but due to the fact that most of the elements are hosted on github you could link your imports to rawgit.com

Example:

<link rel="import" href="https://rawgit.com/Polymer/core-ajax/master/core-ajax.html">

Answer 6

You might take a look at cloudflares polymer CDN: http://cdnjs.com/libraries/polymer