Can I install Polymer (1.0) with NPM?

Question

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 [email protected]: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?

Adah

Full support for Polymer in NPM is coming soon: github.com/Polymer/polymer/issues/326. It's being actively worked on. – Macey

Answer 1

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...

Cockahoop

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: npmjs.com/~polymer For example, you can get @polymer/paper-button or @polymer/iron-flex-layout – Talmud

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. – Kilderkin

Answer 2

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.

Huihuie

Do you have any idea if this is something they plan to make available in the future? Maybe for NPM3? – Adah

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. – Huihuie

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, this Medium article, and this Bower GitHub issue. 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. – Adah

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: github.com/Polymer/polymer/issues/326#issuecomment-113594766 – Multure

sheesh , I havn't used bower in 6 months – Engobe

npmjs.com/~polymer is official account. Polymer (capital P) is not official polymer package: "The reason I've published 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" github.com/Polymer/polymer/issues/326#issuecomment-241373023 – Monger

Answer 3

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.

Tolbert

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 page. With this solution I guess you would have to actually build polymer as part of your build step. – Adah

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 on their repo, it only contains the built and nothing of the source. – Tolbert

Thanks! Didn't notice that at first. – Adah

Answer 4

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!!!

Incurious

Sorry for the down-vote, and I appreciate the effort, but this does not answer the question. The bower install is clearly documented. – Adah