Folder Layout
The ember new command generates the files and boilerplate directory structure for an Ember application. The tables list the directories and files generated for a new application. See the Ember tutorial for more information how these are used when developing an application.
| File/directory | Purpose |
|---|---|
app/ |
This is where folders and files for models, components, routes, templates and styles are stored. The majority of the project code is in this folder. See the table below for details. |
config/ |
The config directory contains the environment.js where you can configure settings for your app and targets.js where the browser build targets are set
|
dist/ |
Contains the application's distributable output. Ember transpiles the code with Babel and concatenates the code into a file called <app-name>.js. The folder contents are deployed to the application's server
|
public/ |
This directory will be copied verbatim into the root of the built application. Use this for assets that don’t have a build step, such as images or fonts |
tests/ |
Includes the application’s unit and integration tests, as well as various helpers to load and run the tests |
node_modules/ |
npm dependencies (both default and user-installed) |
vendor/ |
External dependencies not installed with npm |
.editorconfig |
EditorConfig helps developers define and maintain consistent coding styles between different editors. See editorconfig.org |
.eslintrc.js |
ESLint configuration |
.eslintignore |
ESLint configuration for ignored files |
.gitignore |
Git configuration for ignored files |
.template-lintrc.js |
Configuration file for ember-template-lint rules |
.travis.yml |
Boiler plate configuration file for testing on Travis CI |
ember-cli-build.js |
This file describes how Ember CLI should build our app. Ember uses Broccoli to build the application
|
package.json |
npm configuration and dependency list |
testem.js |
Ember CLI's test runner Testem is configured in testem.js.
|
Layout within app directory
| File/directory | Purpose |
|---|---|
app/app.js |
The application’s entry point. This is the first executed module |
app/index.html |
The only page of the generated single-page app. Includes dependencies, and kickstarts your Ember application. See app/index.html below
|
app/router.js |
The applications route configuration. The routes defined here correspond to routes in app/routes/
|
app/styles/ |
Contains the stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS (though only one type is allowed, see Asset Compilation). These are all compiled into /dist/assets/<app-name>.css
|
app/templates/ |
The application's HTMLBars templates. These are compiled to /dist/assets/<app-name>.js
|
app/controllers/, app/models/, etc. |
The JavaScript files or modules that contain the applications logic |
Note: The files in the app/ directory are shown are for the classic project files layout. The layout will be slightly different if you use the pods project layout. See Project Layouts for the differences between the two layouts.
app/index.html
The app/index.html file lays the foundation for the Ember application. This is where the basic DOM structure is laid out, the title attribute is set, and stylesheet/JavaScript includes are done.
In addition to this, the file includes hooks - {{content-for 'head'}} and {{content-for 'body'}} - that can be used by addons to inject content into the application’s head or body.
These hooks need to be left in place for the application to function properly however, they can be safely ignored unless you are directly working with a particular addon.