Ember Addons and bower dependencies versioning - ember.js

(related, very similar, but not the same as this question, as my question is looking for the scenario where node_modules is lost and re-fetched through npm install and on the topic of keeping deps current in general.)
Let A be an addon in version a1, and let B be a bower dependency of that addon in version b1. The addon installs its bower package through the default blueprint like
afterInstall: function() {
// b1 is the version.
return this.addBowerPackageToProject('B', 'b1');
}
Now let C be an application consuming A. When A is installed using ember install A
The bower package is actually installed in C. Up to here, things are fine. Now A is updated to version a2, including B in version b2. In C,
rm -R node_modules
npm cache clean
npm install
(checking out C with no node_modules and running npm install will run into a similar problem if the bower.json is old)
will fetch A.a2.
Should A.a2's default blueprint run and cause C to install B.b2 as well? (this is the actual question asked here)
if the blueprint is run manually, B.b2 actually gets prompted for, that is, you get to see that the project has a bower conflict now and are asked how to resolve it.
I tried it out now, it doesn't work. If I specify a postinstall script for npm (ember g testaddon), it doesn't work either (because npm tries to install the packages in a different order and ember-cli isn't installed when the postinstall script runs).
What good is it to have blueprints propagate bower dependencies if one does have to check them manually anyway? Am I understanding this wrongly? Is this intended behaviour?

I totally agree. ember-cli currently does nothing on upgrade or uninstall of an npm package, and this is a problem for addons. Addons should be able to specify blueprints that run on version upgrade and uninstall. Alternatively, there should be an 'ember upgrade' and 'ember uninstall' commands that run such blueprints if available.
The addon could then in the upgrade blueprint cause C to install B.b2 if it is not already installed.
Anyone who would like to formally propose this, the way to do so is opening a pull request at https://github.com/ember-cli/rfcs

Related

Why should I use ember install over NPM or yarn?

I'm new to ember and I discover the command ember install pkg and I'm wondering why such package instead of using external package manager such as yarn or npm which are industry-wide/de-facto standard.
Question
Why should I use ember install over NPM or yarn?
ember install addon-name is a short hand for npm install --save-dev addon-name && ember g addon-name
The documentation provides the answer for this one (ctrl + f ember install):
Installs the given addon into your project and saves it to the
package.json file. If provided, the command will run the addon’s
default blueprint.
The release notes for version 0.1.5 provide a clue for this as well:
#2805 Added the install:addon command, which installs an addon with NPM and then runs the included generator of the same name if it
provides one.
So, ember install is just a replacement for npm in most cases but when a blueprint is provided it will run those as well.

What is the difference between Node Package and Bower Package?

Taking Ember App for example. ember install ember-bootstrap-4 will add node package. But bower install tether --save will add bower package. Both are part of the app. But why one is in bower and one is in npm?
npm and bower are both packages manager in your Ember application but there are some differences in using them:
Bower is only used in front-end. It will download bower package into your Ember project (bower_component folder) and you still have to add it to your app's assets. For example, if you install moment package in bower, you have to add it to your app by going to ember-cli-build.js and add the following line app.import('bower_components/moment/moment.js'); (view more details in Ember Addons and Dependencies)
NPM is used for server packages. It will download packages into node_modules project. Every ember-cli addons is in npm and when you type ember install <addons-name>, ember will look up for ember addon, place your addon's info in package.json and download it in node_modules folder. Then, Ember will load it automatically for you.
bower install - is for including run time dependencies and you need to import it in ember-cli-build.js to use.
npm install - is for including development/build time dependencies.

Using Gulp with Visual Studio Team Services

I'm looking to set up automated builds with Visual Studio Team Services but I keep running into trouble. My build definition:
npm install gulp
npm install --save-dev jshint gulp-jshint ruby
npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
gem install sass
gulp
The build fails when attempting to install the sass gem with "'gem' is not recognized as an internal or external command". If I build without installing the sass gem first, gulp will fail with "'sass' is not recognized as an internal or external command". Anyone have experience with getting sass to work in Visual Studio Team Services?
There seem to be several issue here. First you might need to make you familiar how npm works, whats the meaning of --save-dev and whats the difference between local and globally installed modules.
--save-dev is used to save the package for development purpose, while --save is used to save the package required for the application to run. Both are commands which you run on your development machine and you put the resulting package.json under version control.
On the build server you will just run an npm install which will restore all the packages listed in the package.json.
These is for local modules. You can also install modules globally using the -g flag. This will store them outside of your current project, and binaries will be available in your PATH variable. Modules which you need inside your project (using require) need to be installed locally. Modules you'll call from the shell (eg gulp-cli) need to be installed globally.
Therefore what you need to do:
On your development machine add all local npm modules using npm install with either the --save or --save-dev flag.
Put the resulting package.json file under version control.
On the build server you need to make sure that all required global npm modules are installed.
Call npm install using the VSTS npm task to restore the local npm modules. You won't need to specify which modules need to be installed, since they're already listed in the package.json file.
Call gulp using the VSTS gulp task with the appropriate arguments.

How do I use my fork of ember-data in ember-cli?

I'm working on a pull-request for ember-data, and I'd like to be able to test these changes in my ember-cli app.
It doesn't work to follow the directions for using canary here or here, as my fork does not get built my components.
I've tried referencing my fork and branch in packages.json as well as bower.json; then I get this error:
Path or pattern "bower_components/ember-data/ember-data.js" did not match any files
I can then build ember-data manually and copy the file to bower_components/ember-data/ember-data.js. However, I would like a streamlined way to use a fork of ember-data so I can use and test my pull-request without a lengthy install process.
Is there a better way?
Thanks!
You can use a symlink to your local version of a bower and/or npm dependency.
Go to your local (forked) version of ember-data and
npm link
bower link
This will make a global symlink to your local version.
Then go to where you're using the dependency and
npm link ember-data
bower link ember-data
This will make node_modules/ember-data and bower_components/ember-data a symlink to your local version.
See https://docs.npmjs.com/cli/link and http://bower.io/docs/api/#link for more details on how these work.
You are getting that error because you are trying to use the NPM package of ember-data with Bower, and Bower needs ember-data to be precompiled. You were correct to fork emberjs/data and reference your fork in package.json. Here is how I compiled my fork for bower:
In your forked repo, run npm install and npm run build:production to compile your fork in the dist directory.
Then fork the ember-data shim for bower: components/ember-data. Copy the following files from your ember-data fork's dist directory into the shim's directory:
bower.json
component.json
composer.json
ember-data.js
ember-data.js.map
ember-data.min.js
ember-data.prod.js
package.json
Edit the bower/package files if you want to add your own version tag. Commit the shim repo to a branch or master, and then reference that commit in your ember-cli app's bower.json file. Then run npm install and bower install in your ember-cli app.

Correct way of building Ember.js addons?

Ember.js has a number of addons, but most lack any sort of installation instructions. I successfully built sproutcore-routing (e.g.) by checking it out into ember.js/packages and hacking Rakefile and ember.json to add it to the list of packages, but that doesn't seem like best practice. Is there some convention I'm missing?
On the subject of building ember.js: on Ubuntu, I needed to sudo aptitude install ruby-1.9.1-full libxml2-dev libxslt1-dev nodejs, then sudo gem install {rake,github-upload,bundler}, then bundle install, then bundle exec rake. This is probably old hat to a Ruby hacker, but phew.
Most of the "official" add-ons have a Rakefile of their own to build the add-on in much the same way that Ember itself is built. As you've correctly observed, you'll need certain dependencies installed before you can use the Rakefile. I think Ruby, RubyGems, Rake and Node.js should be all you need to install (possibly libxml2-dev and libxslt1-dev), then a "bundle install" should take care of anything else the Rakefile needs.
In the case of sproutcore-routing there is no Rakefile because the entire add-on is in lib/core.js so all you have to do is copy that file to sproutcore-routing.js and you're good to go.