Ember application structure
How does an ember.js application looks like?
Ember.js applications are divided into multiple files and folders. All of which makes sense when we get to know what is where, so lets take a look on Ember application structure.
ember-cli guide has a deep walk-through on each application element. I'll cover the most important parts:
- app/: In this folder we will have all of our application code - templates, routes, components and more. Each element can be generated with ember-cli.
- public/: contents of this folder will be put into root path of your application. Here you can put static files like fonts, images and alike.
- bower_components/: folder for application dependencies (installed by bower)
- bower.json: file that lists all bower dependencies from which all bower_components are installed.
- node_modules/: folder for development dependencies installed by npm
- package.json: file that lists all npm dependencies
- vendor/: other dependencies not covered by npm or bower
- ember-cli-build.js: build instructions for Broccoli. Here we register CSS/JS files from bower_components that we want to use.
- config/environment.js: application configuration file.
Development server compiles the application on the fly. For production we can build a complete application with:
This will create a stand-alone production version in dist folder. Ember application assumes that it will be run in default path (root path
/). If you want to run your ember application in a subfolder/different path then you have to specify it in the configuration before building (config/environment.js):
Welcome to Ember text is located in app/templates/application.hbs template - a htmlbars template. To create new pages and other elements within ember application we will use ember-cli, but that's in the next tutorial. You can change the text now and check if watchman will reload that page open in the browser.