Jeehoo Ahn

Full-stack Developer

Jeehoo ahn profile professional cropped
U
C
L
A

Engineering

Front-end

  • Icon ember
    Ember
  • Icon jquery
    jQuery
  • Icon coffeescript
    CoffeeScript
  • Icon javascript
    JavaScript
  • Icon bootstrap
    Bootstrap 3
  • Icon sass
    Sass
  • Icon css3
    CSS3
  • Icon html5
    HTML5

Back-end

  • Icon rubyonrails
    Ruby on Rails
  • Icon rspec
    RSpec
  • Icon sql
    SQL
  • Icon wordpress
    WordPress
GWHO SAID THAT
Gwhosaidthat
GHETTO LIFE HACK
Ghettolifehack
CRAIGSLIST SCRAPER
Craigslistscraper
ETSYDEMO
Etsydemo
GEOTAGGED REVIEWS
Geotaggedreviews

Install and Set Up Ember CLI with Rails Backend

2015-03-21

Recognizing that there are two different ways to get ember into your app will save a lot of confusion and clarify things when reading external resources that may assume one approach over another.

  1. via ember-cli npm package as an ember app

  2. via ember-cli-Rails gem as a Rails API app (just the back-end) with ember bootstrapped into the Rails javascripts and a Rails view.

The preferred, and more supported way is to have an ember CLI client-side app separate from your back-end Rails API.

This guide will assume you have Linux OS.

Getting Started

Prevent Problematic Node/NPM Installations

Don't use npm with sudo. I naively installed with sudo, and subsequently couldn't install ember-cli via npm without also calling sudo. There are additional reasons why this is problematic, which you can read about. Just avoid it.

If you did do so, uninstall npm. If all the solutions there fail, you can always fall back to simply deleting the relevant folders.

Then, install Node the "correct" way - via NVM.

Install Node Version Manager (NVM)

In your default terminal location (mine is /home/my_linux_user_name/), run the command listed in the Node Version Manager (NVM) github repo's readme (at the time of writing, 0.24.0 is the latest version):

curl https://raw.githubusercontent.com/creationix/nvm/v0.24.0/install.sh | bash

This will install a .nvm folder under

/home/my_linux_user_name/

Also type:

source ~/.profile

You can see the list of NVM commands in the github repo readme as well as by typing into your terminal:

nvm

Install node.js using NVM

With NVM installed, versions of Node.js can be installed.

See all the versions of node available by typing:

node ls-remote

Pick the version you want and install it by typing it like so (0.12.0 as an example):

nvm install 0.12.0

The version of node will be installed under the .nvm folder at

/home/my_linux_user_name/.nvm/versions/v0.12.0/

Switch versions of Node by typing:

nvm use 0.12.0

Check the version by typing

nvm current

or

node -v

Again, refer to the list of commands.

Install NPM Using Node

It's already done! NPM came with the node version installation. Check the NPM version by typing :

npm -v

The NPM directory will exist for a given node version at

/home/my_linux_user_name/.nvm/versions/node/v0.12.0/lib/node_modules/

Global Package Installations with NPM

With NVM, global npm packages will be installed in the same location as npm was above. Keep in mind that it's specific to the node version.

You will need these npm installations for creating your ember app.

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

Create Your Ember App

First, cd into the folder where you keep all your projects.

Then generate an ember app by typing:

ember new my-app

Ember convention is to use kabab-case for file names and camelCase for JavaScript or CoffeeScript names. Next, cd into your ember app folder from your projects folder:

cd my-app

Local Package Installations

In an ember app, all local packages are stored in two direct child folders,

/my-app/node_modules/ for local NPM packages (and ember NPM packages)

and

/my-app/bower_components/ for local bower (front-end) packages.

When using ember CLI, there are some aliases to know that will clear up confusion.

Installing local NPM packages can be done with the usual syntax (thanks to our global NPM isntallation that came with installing node with NVM):

npm install package-name

or the alias ember CLI provides:

ember install:npm package-name

Ember addons are essentially node packages, and will also be installed into the /node_modules/ folder:

ember install:addon package-name

You will notice ember addons are prefixed with "ember-", listed in the the /node_modules/ folder.

Bower packages can be installed using the usual bower syntax (thanks to our global bower isntallation)

bower install package-name

or using the alias ember CLI provides:

ember install:bower package-name

Knowing the folder locations and alias commands should save you a lot of initial confusion. Take note that ember CLI will be removing "ember install:bower" and "ember install:addon" in favor of "ember install" very soon.

Ember CLI doesn't have an uninstall command currently, but you can fall back to the npm and bower uninstall commands:

npm uninstall package-name --save
bower uninstall package-name --save

Make sure to use the --save option to modify the dependencies files (package.json / bower.json).

After installing or uninstalling packages, make sure to run the equivalent of "bundle install" in Rails, making sure your package.json file and bower.json file reflect the packages you actually want in your project:

npm install
bower install

Or use

ember install

as a shortcut to call both of the above instead of running both package managers' install commands.

About Me

B.S. Mehanial Engineering

"I break things down to first principles, and innovate improvements."


  • Programming web applications
  • Efficiency-boosting
  • User experience
  • Teaching

Let's Build


Connect