Ember build output (dist folder)

Question

In Ember JS project, we have package.json (for NPM managed) and bower.json (Bower managed) where we have all our dependencies/devDependencies (e.g. bootstrap, jquery, ember, etc)

Now these get downloaded from their respective registries and get downloaded locally into node_modules/bower_components folder.

Now my question is while these folders (node_modules/bower_components) contain a lot of code dependencies, when we do a build, I see some code in the "dist" folder. I want to understand what actually goes into this dist ? I see things like vendor.css, vendor.js, myappName.css, myappName.js, etc

So how do these get constructed and what code actually goes inside these ? Is it also base on what we have in our package/bower json config files ? Or is it based on what we have in ember-cli-build.js ?

Answer 1

What is put under /dist should be everything you need to publish your application. Components from bower_components are typically loaded via app.import() in ember-cli-build.js and stuff from node_modules by addons you've installed (which ember-cli picks up automatically).

Here is a quick rundown of the files.

index.html --> Generated by ember-cli upon project creation
*          --> Everything from /public
assets/
    appName.css --> All css from under /app
    appName.js  --> All js and compiled templates from /app
    vendor.css  --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
    vendor.js   --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
    test-*.js   --> Test loader/support for ember-cli if you've run "ember test"

Most files also come with sourcemaps as .map which you can exclude when publishing the site.

Answer 2

As you said, the dependencies you declare in your bower.json and package.json get downloaded to bower_components and node_modules

When you do you an ember build command what happens is that all the code you decide to import in your ember-cli-build.js will get dumped to the vendor.js / vendor.css file. All your application code (templates/routes/components/controllers/services) will be placed in my-app-name.js. All your application styles will go to the my-app-name.css file. All these files will be placed in the dist directory so that you can deploy it.

See this sample ember-cli-build.js file:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
var app = new EmberApp(defaults, {
 //CSS - Content of these files will go to "vendor.css"
 app.import('vendor/css/bootstrap.css');
 app.import('bower_components/datatables/media/css/jquery.dataTables.css');
 app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
 app.import('vendor/css/plugins/toastr/toastr.min.css');

 // Javascript - Content of these files will go to "vendor.js"
 app.import('vendor/js/bootstrap.js');
 app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
 app.import('vendor/js/plugins/toastr/toastr.min.js');
 app.import('bower_components/datatables/media/js/jquery.dataTables.js');

 return app.toTree();
};

The CSS imports will go to the vendor.css file and the JS imports will go to the vendor.js files.

The content of your my-app-name.css comes from the app/styles folder.

If you do ember build --environment production the ember build process will also fingertring your assets (append a hash at the end of the filename and generate an appropriate reference in the index.html file).