Importing plugins into ember

Question

I'm trying to add a password meter to my application, and have stumbled on the "strength-meter" jQuery plugin which looks quite good.

I have "installed" it using bower (--save), and then included it into my ember-cli-build.js file as follows:

app.import('bower_components/strength-meter/js/strength-meter.js');
app.import('bower_components/strength-meter/css/strength-meter.css'});
//app.import('bower_components/strength-meter/img/bg-strength-gradient.jpg',{destDir: 'assets'});

When I execute "ember build", the js and css files do not appear in my dist/assets folder.

Does anyone know what's happening here?

Also, note the commented out image - that one throws a file not found error during the build process. It's looking for a file in the tmp build folder...

Build failed.
ENOENT, no such file or directory '/home/Ember/newproject/tmp/funnel-input_base_path-VTkBYJrA.tmp/0/bower_components/strength-meter/img/bg-strength-gradient.jpg'

Any help would be really great!

Cheers,

Andy

take out the {destDir: 'assets'} from the import().. they should get built into the assets by default. More specifically they should get auto compiled into a vendor.js and vendor.css respectively. — Grapho
Thanks - originally I had not specified that (I've removed it from the example now). Even without, the build process is not dropping the required files into the assets folder... — Andy Davison
it wont just drop the files into the assets folder.. what it does is compiles all your app.import() and builds a vendor.js file which has everything packed together — Grapho
Thanks Grapho, That explains a lot. So the ember docs tell us that this app.import method will cause resources to be dropped into the assets folder.... I'm OK with the vendor.js and now vendor.css as an explanation - any idea why the jpg import doesn't seem to do anything with it? — Andy Davison

Rakesh G R Rakesh G R · Accepted Answer · 2016-02-19T13:40:09

First, any js files added using app.import will be made a part of vendor.js in dist folder and any css files added similarly will be a part of vendor.css.

And you I don't think you can add images like this. Place the image in some location-the public folder comes recommended, because on build all files there will be copied to the dist folder too.

Also go through Getting Started and Asset Compilation sections of http://ember-cli.com/user-guide/

Importing plugins into ember

2 Answers