Managing dependencies of Javascript libraries with Ember CLI - ember.js

Per ember-cli managing dependencies, 3rd party libraries, jQuery plugins, etc, should be installed via bower then included into Brocfile.js. However, what if you have a custom jQuery plugin, or other Javascript library that is required that is not available via bower.
Should these non bower'fied plugins be placed into a different directory, IE not vendor/, then added to the Brocfile.js?

You should be able to just manually include it in any directory and then app.import it from that directory.
But you should note that using bower you can install any file not just one thats in the bower repo.
for example you can do something like
bower install --save http://example.com/js/myjsfile.js
and in an ember-cli app bower would copy that file to /vendor/js/myjsfile.js
and you could then put app.import('/vendor/js/myjsfile.js') in your Brocfile.js

Related

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.

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.

npm install ember-data just installs index.js file

When I do npm install ember-data --save, I get only the following files:
./node_modules/ember-data/
./node_modules/ember-data//lib
./node_modules/ember-data//lib/ember-addon
./node_modules/ember-data//lib/ember-addon/blueprints
./node_modules/ember-data//lib/ember-addon/blueprints/ember-data
./node_modules/ember-data//lib/ember-addon/blueprints/ember-data/index.js
./node_modules/ember-data//lib/ember-addon/index.js
./node_modules/ember-data//package.json
./node_modules/ember-data//README.md
I was expecting the same files bower installs, such as ember-data.min.js.
My hunch is I need to do npm install from within node_modules/ember-data? If so, why the extra step?
ember-data is meant to be installed with bower with
$ bower install --save ember-data
Installing ember-data with npm will add it as an add-on for ember-cli project. It will include the files from bower_components. you still need the bower version.
ember-cli has built-in support for ember-data.

Ember CLI still looks for app.css after installing broccoli-sass plugin

After installing the broccoli-sass plugin in my ember-cli application with npm install --save-dev broccoli-sass, cli still tries to include app.css rather than look for a app.scss or app.sass file.
Is there another step necessary to get SASS working in Ember CLI?
Just change app.css to app.scss and use that to import all the partials you are using.
I had the same problem and finally realized I had to restart the ember server after installing the broccoli-sass module
I also had to change the name of the file as #Bloomfield said

Add ember-cli project to repository

After I added my ember-cli project to repository on git, there are some untracked files in node_moduls (there are not js files in node_modules).As I know ember adds necessary files from package.json configuration. But when I try to build this project it writes that could not find ember-cli/lib/broccoli/ember-app
After you've used git clone to get the repo, you need to install the node and bower dependencies. These are intentionally left out from the repo when you create a new project with ember-cli (see your .gitignore file).
Install node dependencies (located in /node_modules/):
npm install
Install bower dependencies (located in /bower_components/ or (in 0.0.41 or earlier) /vendor/):
bower install
Once you've got those installed, then you can ember build.