Setting up ember-cli development environment with ember 2.1

Check out the new site at

In a series of tutorials starting with this one I'll try to showcase ember.js framework for building fronted web applications. As a backend there will be Django Rest Frameowork and more.

As times change and JavaScript frameworks don't just download to your static folder I'll start with setting up Ember.js development environment with ember-cli.

My tutorials will be based or will extend the offical guide as well as excellent guide on

Installing ember-cli

ember-cli is a toolset for ember.js that can setup a new application structure, generate new elements within your application, run tests, or development server. Similar to django-admin. To install it we have to use npm - a JavaScript/node.js package manager.

Installing ember-cli under Linux

As most tutorials cover OS X (or Windows) I'll go with Linux. The difference is in brew tool which has different ports for every OS. Aside of that it should be similar.

We can start with downloading nvm - a node.js version manager, that makes it easier to manage node.js installations on your computer (something like an virtualenv). Do download run:

wget -qO- | bash

Then you can install a selected version of node (locally in home directory):

nvm install 0.12

At any moment we can start using given node version:

nvm use 0.12

Now we can globally install ember-cli for used node version:

npm install -g ember-cli
npm install -g bower

Optional dependency is watchman, a code observer/brower reloader (checks for changes in code and reloads the browser tab with opened application page). For OS X we can use homebrew, but for Linux we have to use linuxbrew:

ruby -e "$(curl -fsSL"

==> Next steps
Install the Linuxbrew dependencies:

Debian, Ubuntu, etc.:
  `sudo apt-get install build-essential`

Fedora, Red Hat, CentOS, etc.:
  `sudo yum groupinstall 'Development Tools'`

See for more information.

Run `brew doctor` before you install anything
Run `brew help` to get started

Brewmaster will be available as ~/.linuxbrew/bin/brew and to make it available in your terminal add it to .bashrc:

export PATH="/home/USERNAME/.linuxbrew/bin:$PATH"

When we have brewmaster we can install watchman:

brew install watchman

When the install finishes we will get a notice:

Python modules have been installed and Homebrew's site-packages is not
in your Python sys.path, so you will not be able to import the modules
this formula installed. If you plan to develop with these modules,
please run:
  mkdir -p /home/USERNAME/.local/lib/python2.7/site-packages
  echo 'import site; site.addsitedir("/home/USERNAME/.linuxbrew/lib/python2.7/site-packages")' >> /home/USERNAME/.local/lib/python2.7/site-packages/homebrew.pth

Do what it asks you to do. Then we can start with creating application structure for your new ember.js project:

ember server

The development server will run on http://localhost:4200/

ember-cli within Docker

If you want to separate node and ember-cli from your system you can use a Docker image with all the tools installed. Docker itself can be installed from your distribution repository or from (bash script, download it and execute it) where you will find the latest version (recommended).

After installing Docker add yourself to docker group so you won't have to use sudo/root to use Docker.

There are few ember-cli Docker images made available by the community. One of them is danlynn/ember-cli. To use it we will have to also install docker-componse which is a tool for making docker commands shorter and easier to perform or automate:

pip install docker-componse

When using this Docker image create an empty directory and in it create a docker-compose.yml file:

ember: &defaults
  image: danlynn/ember-cli:latest
    - .:/myapp

  <<: *defaults
  entrypoint: ['/usr/local/bin/npm']

  <<: *defaults
  entrypoint: ['/usr/local/bin/bower', '--allow-root']

  <<: *defaults
  command: server --watcher polling
    - "4200:4200"
    - "35729:35729"

And then we can use ember-cli embedded inside that Docker image to create a new ember application:

docker-compose run --rm ember init
docker-compose run --rm ember server

Docker image will run the server on port 4200, but to get to it we have to know the IP under which that Docker image is available on your computer. To check it list containers with docker ps (should be one we just started) and then run docker inspect CONTAINER_ID which will list a bunch of data. Look for IPAddress key under which you will get the local IP address under which the development server is available.

Updating to latest ember.js release

At the time of writing this tutorial ember-cli installs ember 1.3, while latest version is 2.1. To update your project edit bower.json and bump package versions:

"ember": "^2.1.0",
"ember-data": "^2.1.0",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.4",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.1.7",

then run bower install. Next edit package.json and bump versions:

"ember-cli-app-version": "1.0.0",
"ember-cli-htmlbars": "1.0.1",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-data": "2.1.0",

And run npm install. That's it, you now have the latest ember.js up and running.


Django web framework tutorials, 15 November 2015

Check out the new site at
Comment article
Comment article RkBlog main page Search RSS Contact