Edit Page

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.


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.