How to install NPM package from GitHub for Meteor? - meteor

I have forked an npm package on GitHub, made changes to it, and now want to install the package in my Meteor app directly from GitHub.
My package.json looks like so:
{
"dependencies": {
"semantic-ui-react": "git+https://git#github.com/nolandg/Semantic-UI-React.git",
}
}
I then run
meteor npm install
Which appears to work fine and tells me it's installed the package:
semantic-ui-react#0.61.6 (git+https://git#github.com/nolandg/Semantic-UI-React.git#f27d5c736e5de1eed0acf7769f18caee57578526)
And indeed the package appears in the node_modules folder. But when I try to start my Meteor app, I get this error:
Cannot set property '/my-website/node_modules/semantic-ui-react/package.json' of undefined
at Resolver._resolvePkgJsonMain (/tools/isobuild/resolver.js:320:9)
Has anyone successfully install an npm package in a Meteor app directly from GitHub? I can't figure this one out. Thanks!
Meteor version: 1.4.2.3

The main reason why the package does not work when fetching from git is because it is not configured to work that way. This is not a Meteor specific problem, but a problem that a JS developer may face sometimes.
For this particular case there are two problems:
The whitelist files field in package.json only contains src and dist folder. That means when you fetch it by npm almost all config files needed to build the code are gone.
Code for this package requies to be built in order to work with your code. This is done when the author publish it to npm, but you fetch it directly from github so this step is undone.
Because you already folked and modified the package, so let modify the package.json as below (remove all the comments I added them to give you some explanation), push it to github, and fetch it again by npm:
// remove the "files" field
// ...
"scripts": {
// this script is used to build the package
"postinstall": "postinstall-build dist \"npm run build:commonjs\""
// ...
},
"dependencies": {
// this helps build the package
"postinstall-build": "^2.1.3"
},
// ...

Packages are not usually installed from github, they are published, which means that many versions of a package are available, you can choose which one you get. I'm not sure if what you are doing is possible, but it's certainly inadvisable.
If you want to make changes to a github package, you can download the it to your local machine and do npm link, so that it uses your local package instead of the one on npm. Read more about it at https://docs.npmjs.com/cli/link

Why do you not use simple command?
meteor npm install https://github.com/nolandg/Semantic-UI-React.git
I did:
meteor create test
cd test
meteor npm install
meteor add react react-dom
meteor npm install https://github.com/nolandg/Semantic-UI-React.git
meteor
And no errors (-:

Related

using flag-icon-css (npm package) with meteor

I'm trying to use the npm package flag-icon-css with meteor.
I'm using sass to modify the icons path as follows:
$flag-icon-css-path: '/npm/node_modules/flag-icon-css/flags';
$flag-icon-rect-path: '/4x3';
$flag-icon-square-path: '/1x1';
#import '{}/node_modules/flag-icon-css/sass/flag-icon.scss';
but I'm stuck as i don't understand what is the correct path for the variable $flag-icon-css-path .
the question is simple : how can I access files that are in a npm package ? what is the correct path ? Do I need to export them all explicitly or something similar ?
It turns out that files from npm packages are not directly visible to the client. A solution should be to wrap the npm package in a meteor package and export what is needed to the client explicitly. In this case the solution is to use an already made package for this npm module : meteor add jss:flag-icon
NPM are packages that should be installed. It would then be able to directly adress it:
https://docs.npmjs.com/cli/install
Go in the folder using the prompt, and execute:
npm install

Meteor 1.3 node build: doesn't work anymore with React

With 1.2.*, I used to build my staging/production bundles with meteor build, then moving into ./bundle/programs/server and npm install there.
I do the same thing with 1.3 version but now I have error message on trying to run bundle main file with node:
WARNING: npm peer requirements not installed:
- react#0.14.x not installed.
- react-addons-pure-render-mixin#0.14.x not installed.
Read more about installing npm peer dependencies:
http://guide.meteor.com/using-packages.html#peer-npm-dependencies
/var/www/builds/1459320997/bundle/programs/server/node_modules/fibers/future.js:267
throw(ex);
^
Error: Can't find npm module 'react'. Did you forget to call 'Npm.depends' in package.js within the 'modules-runtime' package?
I use react-meteor-data meteor package.
However, I already have "react": "^0.14.8", and "react-addons-linked-state-mixin": "^0.14.8", in my package.json and of course installed it with npm install ... --save and it is working fine on development environment when I use meteor command.
Any additional actions needed to run it? Did they change how meteor package should be build for production and didn't changed their docs? (because I don't see any changes in docs concerning meteor build so far.
Update: I tried to manually npm install these packages into ./bundle/program/server. Now they consequentially requires packages already listed in my package.json. I suppose Meteor just ignore this file on bundle. Will try to add a bug in their tracker.
I used Meteor 1.2 to build new 1.3 code so it is the issue. It happened because currently I build on the server that had another Meteor version.
I used answer from another Stackoverflow user (Ian) Updating all Meteor packages to latest versions
Easiest way is to delete the contents of .meteor/versions and then save

Can I multiple run npm installs simultaneously

If I'm setting up a project and running npm install -abc xyz, can I run another npm install in another terminal instance, for the same project, whilst this is still running?
Thanks!
You can install multiple packages with a single command like this:
npm install --save package1 package2 package3 ...
EDIT:
Installing packages separately, while theoretically possible, could create problems. When an install command is issued, npm looks up existing modules and downloads missing packages into a staging folder .staging inside node_modules. Once downloaded it copies the packages into the node_modules sub-folder (and removes .staging).
In npm2, modules had their own dependencies stored underneath themselves like this:
node_modules
- dependencyA
- node_modules
- dependencyC
- dependencyB
- node_modules
- dependencyC
Notice how dependency A and B both rely on C. If C is the same version in both cases, it would use twice the space.
In npm3, dependencies are flattened like this:
node_modules
- dependencyA
- dependencyB
- dependencyC
If for some reason an older version is used in a dependency, it follows the npm2 convention for that module.
I'd stick with the intended use of npm and use the multiple install functionality.
I simply use the following
example
npm i daterangepicker select2

Meteor package pre-build npm module with browserify

I have an npm module I want to wrap in Meteor package, and work with it on client side and server side both. This npm module isn't shipped with built 'dist' file but with sources only instead and npm build script, so it is supposed to be built with browserify or webpack.
package.json contains npm build script for minimized package:
"scripts": {
"prod": "browserify ./index.js -x react | uglifyjs > ./dev/prod.js"
},
I want to execute this script (or my own) and only then do
Package.onUse(function(api) {
api.addFiles('../somenpmfolder???/dev/prod.js', ['client', 'server']);
}
Obviously just Npm.require wouldn't work as it doesn't work when executed on client.
I can build script manually and just shove dist inside my package but it isn't right way doing things. I leave it as a last resort for myself.
This is half of answer on my question: https://stackoverflow.com/a/17081463/2123547
What I want to have next is this pre-build stage.
There's a new package appeared that does browserify job. I checked it and it work well for me.
https://github.com/elidoran/cosmos-browserify/

How does Meteor's package.js work?

This Meteor.com blog post talks about package.js. Is this similar or even the same as a package.json file?
The package.js file is used specifically with Meteor. If you browse through the repo at https://github.com/meteor/meteor/tree/master/packages you could see what a few look like. Each package has its own package.js.
package.json is slightly different, it's used to store node's npm dependencies so that one can run npm install to get the project's dependencies in order. It's more specific to npm/node than meteor. It wouldn't be used with meteor because meteor's run looks for dependencies defined with Npm.depends in the package's package.js for a particular package and gets the npm modules installed instead. So with meteor projects (apart from a bundled tarball in which they are automatically generated) don't need package.json files

Resources