Ember.js Cookbook

This method is by far the easiest. To install node, you'll need to open the node website at http://nodejs.org/download. Click on the pkg, msi, or exe installer for Windows or Mac. Run it after it's downloaded.

If you already have Homebrew installed, just run the following command:

$ brew install node

On the other hand, if you are running MacPorts, you can use the port install command:

$ sudo port install nodejs

A TAR file is a type of archive file. To install node via a TAR, you will need to download the TAR file from the Node.js website and extract and install it. One way of doing this is to use curl.

I would only recommend this method if you are using a Linux distribution. If you are running on Linux, you'll need the right tools installed to compile from source. On Ubuntu, you'll need to install the build-essential and curl packages:

$ curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
$ ./configure
$ sudo make install

All major Linux distributions offer Node.js packages. In Ubuntu, you can simply use apt-get:

$ sudo apt-get install nodejs

In Fedora, you can use yum:

$ yum install nodejs npm

Check with your Linux distribution to find out more details on how to install packages such as Node.js. Be aware that some distributions might offer outdated versions of Node.js. In this case, I would recommend that you use the Node Version Manager (NVM) installation method that will be discussed later.

To test your installation, run the –v command:

$ node –v
$ npm –v

This will show the current installed version. Keep in mind that you must run v0.12 or above to run Ember CLI. If possible, try to run v4.0.0 or above.

Once Ember CLI is installed, we'll have access to several commands. Here is a short list of some of the more important ones:

Keep in mind that for every command, there is an alias. These aliases make it a little quicker to run commands. Suppose that you wanted to build a new project. Normally, you would type this:

$ ember build

This will work and is fine. It will generate a new project and application structure. You can also use an alias.

$ ember b

Here is a list of some common aliases that you can use. This is optional.

An ember pod is a different type of structure that organizes your modules by feature instead of type. As your project grows, you may want to organize your project by feature to help keep things organized. The Ember Resolver will look for a pod structure first before it looks at the traditional structure.

To set up the pod structure automatically, you can edit the .ember-cli file in the root of your project directory and add this line:

{
  "usePods": true
}

This will set the default structure to always use pods. When using pods, it is a good idea to set the location where all pods live. To do this, you will need to edit the config/environment.js file:

...
var ENV = {
  modulePrefix: 'pod-example',
  
..   podModulePrefix: 'pod-example/pods' 

The podModulePrefix property sets the POD path with the following format, {appname}/{poddir}. In the preceding example, the pod directory is now set to /pods in the app folder. If the location is not set, all new modules will be created in the app/ folder.

All the assets should be placed in the public/assets folder. The assets can be referred throughout the program at assets/images/{image file}. CSS files should be placed in the app/styles folder.

By default, CSS and JavaScript files are minified during the production build process. There are ways to turn this functionality on and off. For example, let's say that you want to turn off the minification for both CSS and JavaScript. To do this, we can simply edit the ember-cli-build.js file, and under the // Add options here section, add the minifyCSS and minifyJS section:

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
    minifyCSS: {
      enabled: false
    },
    minifyJS: {
      enabled: false
    }
  });

This will tell the compiler not to minify JavaScript and CSS. To build the application in the production mode, simply use the --environment argument:

$ ember build --enviroment=production

All files by default will be fingerprinted during the production build process. This will include all js, css, png, jpg, and gif assets. During this process, all these files will have an md5 checksum appended at the end of their filenames. During this process, all HTML and css files will be rewritten to include these new names.

There are several options available when fingerprinting a file. This is all controlled in the ember-cli-build.js file. Let's suppose that you wanted to disable fingerprinting:

…
fingerprint: {
 enabled: false
}
…

Another useful option is to prepend a domain to all static files. This can be done using the prepend option. Once again, this needs to be added to the ember-cli-build.js file in the root of the application folder:

…
fingerprint: {
   prepend: 'http://www.example.com'
}

Now, all assets will include the www.example.com domain. For example, a normal JavaScript src file will look like this:

<script src="assets/script.js">

This will be transformed into the following:

<script src="http://www.example.com/script-12324adfasdf123234.js">

Another useful option is exclude. This accepts an array of strings. Any filename in the exclude array will not be fingerprinted:

fingerprint: {
  exclude: ['fonts/12424']
}

The ignore option also accepts an array of strings. Any filename that contains any item in the ignore array will not be processed or fingerprinted:

fingerprint: {
  ignore: ['fonts/12424']
}

The extension option defaults to 'js', 'css', 'png', 'jpg', 'gif', and 'map'. This option can be used to add other file types to get fingerprinted:

fingerprint: {
  extension: ['r3','html']
}

The replaceExtensions option defaults to 'html', 'css', and 'js'. If needed, new file types can be added to replace source code with new checksum file names:

fingerprint: {
  replaceExtensions: ['html','htm']
}

Ember CLI allows you to load Asynchronous Module Definition (AMD) and non-AMD assets. It's a way of defining code modules and their dependencies.

In some situations, you might want to take an existing project and update it to the latest version of Ember CLI. In this case, you'll need to perform the following steps:

Keep in mind that after upgrading your project, you might have many new deprecation warnings to deal with. You will see these warnings when you run ember server. Each one will need to be addressed.

To address these deprecations, view the warnings that the applications provide. For instance, you may get a warning about Ember.View. The warning will describe that Ember.Component should be used instead. You'll then need to swap out the effected code with Ember components instead of Ember views.

Firebase is a backend service that can handle data storage, user authentication, static hosting, and more. For this example we'll be using Firebase as a way to host our Ember application.