10

I'm trying to use Polymer on a new project, and was trying to avoid using Bower in favor of NPM for front-end dependency management.

The getting started page gives instructions for using Bower (and using a .zip file, etc...) but no mention of NPM.

I have used NPM by pointing directly at a GitHub repo before, but I cannot seem to get this to work for Polymer.

When I run this:

npm install git@github.com:Polymer/polymer.git#v1.0.5

I get this error:

npm ERR! notarget No compatible version found: git@'github.com:Polymer/polymer.git'

npm ERR! notarget Valid install targets:

npm ERR! notarget ["0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5"]

Is there something I'm missing, or do I need to bite the bullet and use Bower?

Community
  • 1
  • 1
Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149
  • Full support for Polymer in NPM is coming soon: https://github.com/Polymer/polymer/issues/326. It's being actively worked on. – Splaktar Jun 18 '16 at 23:43

4 Answers4

14

Since the earlier answers, Polymer has now indeed become available on NPM. To install it:

npm i Polymer

Note that it doesn't include the standard elements collection; those can be found here:

npm i npm-polymer-elements

You can then include them in your HTML:

<!-- for custom elements -->
<link rel="import" href="/node_modules/@polymer/polymer/polymer.html"/>
<!-- for standard elements -->
<link rel="import" href="/node_modules/paper-button/paper-button.html"/>
<paper-button>click</paper-button>

Unfortunately loading Polymer through webpack currently doesn't seem possible yet, meaning if your node_modules (or bower_components) folder isn't in a publicly accessible location, you may want to make a Grunt/Gulp task to copy it over for after future updates...

Kiara Grouwstra
  • 5,723
  • 4
  • 21
  • 36
  • 6
    Instead of using the `npm-polymer-elements` package, you can also get individual packages for each element maintained by the official project's user account: https://www.npmjs.com/~polymer For example, you can get `@polymer/paper-button` or `@polymer/iron-flex-layout` – Xharlie Apr 03 '16 at 10:11
  • 2
    This answer is mostly correct, but I ran into trouble with 'npm i @polymer/polymer'... 'npm i Polymer' (note the capital 'P') appears to work fine though. – Charlie Apr 19 '16 at 13:35
5

EDIT 2016/10/25 The Polymer team announced at the Polymer Summit 2016 that they will be looking into supporting npm via yarn.

[sudo] npm install -g yarn yarn add Polymer yarn install --flat

OLD AWNSER

There is currently no way I know of to get polymer running with NPM.

Polymer is meant to work with Bower. All dependencies of a Polymer that are declared in https://github.com/Polymer/polymer/blob/master/bower.json like webcomponentsjs will not be downloaded. Therefor if you don't want to download every dependency manually you should use bower.

synk
  • 199
  • 5
  • Do you have any idea if this is something they plan to make available in the future? Maybe for NPM3? – Zach Lysobey Jun 30 '15 at 13:34
  • 1
    No I don't think so. Bower was build to manage dependencies for web applications and there is really no point in using NPM, which was build for managing dependencies for node applications. – synk Jun 30 '15 at 15:54
  • 8
    Ehh... more and more people are moving away from Bower for front-end dependency management in favor of NPM. Check out [this NPM blog entry](http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging), [this Medium article](https://medium.com/@nickheiner/why-my-team-uses-npm-instead-of-bower-eecfe1b9afcb), and [this Bower GitHub *issue*](https://github.com/bower/bower/issues/1520). I personally have made the switch months ago, and am very reluctant to go back. When NPM3 comes out, it should really put the nail in the coffin. – Zach Lysobey Jun 30 '15 at 17:56
  • 8
    The Polymer team is interested in using npm in the future, and has discussed this with the good folks at npm. There are still a few wrinkles to work out, but npm3 brings us **much** closer to being able to use npm directly. You can find more discussion here: https://github.com/Polymer/polymer/issues/326#issuecomment-113594766 – DocDude Jul 01 '15 at 10:17
  • 1
    sheesh , I havn't used bower in 6 months – SuperUberDuper Nov 22 '15 at 10:11
  • https://www.npmjs.com/~polymer is official account. Polymer (capital P) is not official polymer package: "The reason I've published https://www.npmjs.com/package/Polymer because I cannot fetch packages behind my company firewall which are pointing to github.com, we have policy to reject all queries to github.com, but we need a polymer" https://github.com/Polymer/polymer/issues/326#issuecomment-241373023 – rofrol Jan 04 '17 at 11:45
5

The main problem with Polymer is that the tagged build commits don't have a package.json, making it impossible to install them with npm (e.g. see v1.1.1). This means that in order to install Polymer with npm you'll need some helper tool. Perhaps the best candidate for this is Napa.

Napa is a package for installing git projects that do not have a (valid) package.json. The npm page already explains how to use it, here a quick summary for Polymer:

  1. npm install napa --save-dev
  2. Update your package.json to include this (replace x.y.z with the version you want):

    {
        "scripts" : {
            "install" : "napa"
        },
        "napa" : {
            "polymer" : "polymer/polymer#vX.Y.Z"
        }
    }
    

Note that napa just clones the repo into the node_modules folder, hence no dependencies of polymer will be installed alongside of it, but you can keep all of the configuration in your package.json instead of having to use bower.

Tiddo
  • 6,331
  • 6
  • 52
  • 85
  • Hadn't heard of napa, thats pretty cool. Still might not really be a solution for this however: it seems that Polymer doesn't but their distributable files in the git repo directly, and rather makes them accessible as .zip files on their [releases](https://github.com/Polymer/polymer/releases) page. With this solution I guess you would have to actually *build* polymer as part of your build step. – Zach Lysobey Aug 24 '15 at 12:36
  • 1
    Polymer maintains a separate build branch where the built versions are (which are tagged as well). See for example the commit tagged [v.1.1.1](https://github.com/Polymer/polymer/tree/v1.1.1) on their repo, it only contains the built and nothing of the source. – Tiddo Aug 24 '15 at 13:42
  • Thanks! Didn't notice that at first. – Zach Lysobey Aug 24 '15 at 13:58
-13

Try installing bower method!

"npm install -g bower"

Then type inside your folder:

"bower init"

Follow the instructions, then type:

"bower install --save Polymer/polymer

Create an index.html file and start to work!!!

Shahzad Barkati
  • 2,532
  • 6
  • 25
  • 33
yuryja
  • 1
  • Sorry for the down-vote, and I appreciate the effort, but this does not answer the question. The bower install is clearly documented. – Zach Lysobey Jul 01 '15 at 13:49