RkBlog

Hardware, programming and astronomy tutorials and reviews.

Setting up ember-cli development environment with ember 2.1

Create a frontend web applications that use Django and other backend solutions as it data source.

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 learnhowtoprogram.com.

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- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | 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 https://raw.githubusercontent.com/Homebrew/linuxbrew/go/install)"


==> 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 http://brew.sh/linuxbrew/#dependencies 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 new APPLICATION_NAME
cd APPLICATION_NAME
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 get.docker.com (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
  volumes:
    - .:/myapp

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

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

server:
  <<: *defaults
  command: server --watcher polling
  ports:
    - "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.

RkBlog

15 November 2015;

Comment article