Setting up ember-cli development environment with ember 2.1
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:
Then you can install a selected version of node (locally in home directory):
At any moment we can start using given node version:
Now we can globally install ember-cli for used node version:
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:
When we have brewmaster we can 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:
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.
Comment article