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.