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/
Related
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 (-:
In a meteor project, I want to pull a few frontend packages. bower can pull many frontend dependencies which are not yet available using meteor add. In many cases, when the meteor packages are available, their versions are lagging behind the official ones, sometimes too behind to consider.
Being a bit of a Meteor newb I've tried to install bower (the most recent meteor bower package I could find):
$ meteor add bozhao:bower
but then, when I run the meteor server it crashes:
W20160110-15:37:57.997(2)? (STDERR) /Users/igal/.meteor/packages/meteor-tool/.1.1.10.7bj3ks++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:245
W20160110-15:37:57.998(2)? (STDERR) throw(ex);
W20160110-15:37:57.998(2)? (STDERR) ^
W20160110-15:37:57.998(2)? (STDERR) ReferenceError: window is not defined
W20160110-15:37:57.998(2)? (STDERR) at bower_components/leaflet/dist/leaflet-src.js:526:1
Question is:
What's the best strategy to install bower and use it in a meteor project? An acceptable answer may show the flow for correctly installing bower, then the leaflet package and it's leaflet.markercluster extension
Sep 27th 2016 edit
The meteor community switched to npm, thus using bower is no longer required. Simply do npm install <package> and import <package> in your client-side code, and you can start using the component!
meteor search bower turns up a few hits, which I haven't taken the time to compare in any depth. I went with mquandalle:bower as I found it recommended here. Perusing the doc, here is what worked for me:
npm install -g bower # If not already done
meteor add mquandalle:bower
echo '{ "directory": ".meteor/local/bower" }' > .bowerrc # If you use bower install --save
Then create a bower.json file at the top of the project tree that reads like this:
{
"name": "MyApp",
"version": "0.0.1",
"dependencies": {
"leaflet": ">0",
"leaflet.markercluster": ">0"
},
"private": true
}
Re-run your app with meteor run and presto, the stylesheets and JavaScript of your modules are embedded into your page without even having to edit the <head>.
I would like to use gulp in my Wordpress project. Is it possible to execute gulp functions outside a node JS project?
I'm running on OSx, but couldn't find anything on the internet about it. Or do I'll have to use another lib like Grunt?
Yes, the main language of your project doesn't affect whether or not your can include some node.js dependencies and run them. You will need to have gulp installed and have a gulpfile.js in your project, and then you can run it.
You could install gulp globally on the server (npm install -g gulp), but I recommend creating a package.json file (using npm init) in your project, so that your node.js dependencies are tracked in your version control, and installing gulp with npm install --save gulp (inside your project's directory). Since gulp won't be installed globally in that case, you will need to use "$(npm bin)"/gulp from a directory inside your project to run it.
I use Yeti Launch from the Zurb foundation for the same setup (no node installed on my Mac).
When you run it, it will create a Foundation frame but you can do the following:
Stop the project it creates from within its interface,
Delete the files it creates and replace with yours
Leave the project it shows in the interface
Leave the "node_modules" folder it creates
Start the project again
This will run your Gulp file.
The only issue is installing node modules. For this, I look at any error messages it gives regarding missing modules and copy these into the "node_modules" folder from Github
The short answer is no. Gulp is distributed as a npm package and has node.js as a dependency BUT that doesn't mean you can't use it outside of a node.js project.
The only real need for Gulp on a wordpress project would likely either be at the theming layer or if you were doing a custom plugin. Assuming you are making a theme, some of them use Gulp extensively.
I've used the Roots ecosystem's Sage theme successfully on a number of projects. It has node/npm dependencies but they are all included if you use the theme. Check out their Gulp file - it's probably close to what you are philosophically looking for.
I am a little confused about the use of Npm, Bower and Grunt. My objective is to install frontend packages (e.g.: bootstrap) for my front-end project and have Grunt set up to automate build tasks.
I have been using Npm in the past and I understand that it works with the package.json file, while Bower works uses the bower.json file. In this case, I installed Grunt with Bower (not Npm), however I realised that in order to run Grunt I still need to add the package.json file.
Should I have been using Bower to install Grunt at the first place ?
Does my project always need the package.json file to use Grunt? And
if so, are there any good practices for dealing with the duplication
between the bower.json and package.json files. (name, version of the app, etc…)
Thanks
grunt (grunt-cli) is command line task runner, not frontend library :), so installing it via bower is strange, but possible due to the fact that bower is using npm as base repository :)
package.json store all tool dependencies in your project - like bower or grunt
In frontend development bower should be handling css/js libraries in your app like jQuery, Angular.js, Bootstrap. NPM is for node.js extensions/utilities like grunt, karma devDependencies.
http://blog.nodejitsu.com/package-dependencies-done-right/
I'm using matchdep to read dependencies from my package.json file into grunt.
require('matchdep').filterAll('grunt-*').forEach(grunt.loadNpmTasks);
I have my dependencies split between dependencies (for everyone) and devDependencies (for front-end developers.)
Our back-end devs will run the following to get a build of the static assets without requiring jasmine, phantomJS, etc (things that will be run by front-end devs and the CI server)
$ npm install --production
$ grunt build
However, when using the --production build, grunt.loadNpmTasks() will emit a warning for any missing packages.
>> Local Npm module "grunt-contrib-watch" not found. Is it installed?
Is there a way to supress this warning?
You have to question why your "back-end devs" would have to actually build your package - put otherwise, why do they need grunt but NOT devDependencies. This is kind of backwards (requiring users to build your package is certainly an anti-pattern).
That being said, using matchdep, you can / should use:
require('matchdep').filter inside your "production" target
require('matchdep').filterAll inside your "development" target
Certainly, that would require you to specialize your grunt build (eg: have grunt builddev and grunt buildproduction - or maybe use environment variables) - but again, see above...
You can use CLI flags to pass options into grunt. For consistency, I am using a --production flag, just as I do with npm.
So, from the CLI:
$ grunt build --production
And then in the Gruntfile:
var dependencies;
// test for the production flag
if (grunt.option('production')) {
// scan dependencies but ignore dev
dependencies = require('matchdep').filter('grunt-*');
} else {
// scan all dependencies
dependencies = require('matchdep').filterAll('grunt-*');
}
// load only relevant dependencies
dependencies.forEach(grunt.loadNpmTasks);
This is done at the top of the module before any custom tasks are registered.