This is the first part in a series of articles that I am writing to serve as a primer to developing with Ember.js. My intention for this primer is to get new interns that I’m working with up and running with Ember.js development as quickly as possible.
There are a ton of tutorials out there written by some awesome folks, but usually they include a lot of fluff that isn’t needed in order to start developing for the projects we’ll be working on.
I’ve decided to share this primer in hopes that it will help more folks than just the interns I’m working with.
Install EmberCLI
I’ve had issues in the past where Ember CLI or some of its NPM dependencies wouldn’t install on a system wide install of Node. After doing a little bit of research, I came across NVM, which allows you to manage multiple versions of node.js on your system. If you’ve done any Ruby programming, this is similar to rbenv or rvm.
From what I understand, the difference between using a system wide install of node and using a version from NVM, is that NVM doesn’t require sudo in order to install packages. Which was a road block that I faced when first getting into Ember development.
To get NVM on your system, simply follow the instructions listed on their repository.
Once, NVM is installed, you’ll need to install a version of Node on your system. I usually will go to the official node.js website to check the latest LTS version and install that one via NVM.
You could also run nvm ls-remote and NVM will list out all the versions that are available for download.
Once you’ve figured out which version of Node you’d like to run on your system, simply run nvm install x.x replacing x.x with the version you’re trying to install. So if you’re trying to install version 4.4 which is the latest LTS version currently listed on the node site as of this writing, you’d run nvm install 4.4.
Now that you’ve got node.js installed on your system, you’ll need to set the current shell to use that version, otherwise it’ll use the system version that’s already installed. To use the new version you installed via NVM, simply run nvm use x.x, again where x.x is the version you’ve installed.
I personally like to use nvm alias default node to go ahead and use the NVM installed Node version for any new shell that I open up.
At this point, you can finally install Ember CLI which is the command-line utility used to create Ember.js applications. To do so, run npm install -g ember-cli which will make the command-line utility available to you globally. Once Ember CLI has been installed, try running ember -h. This command lists all the available commands that Ember is capable of running for you.
Create an Ember project
Now that you’ve got the Ember CLI installed, you’re ready to create an Ember application. From the command-line run ember new project-name. Replacing project-name with an actual name for the project. What this command does is creates the new project folder and lays out the file structure for the project. Ember is a very opinionated framework (which I like) making it very easy to find your bearings when hopping from Ember project to project.
After the project folder is created, Ember will also initialize git, run npm install and bower install for you so the moment you cd into the folder, you’re ready to go. After Ember is done doing its thing, cd into the new folder and try running ember serve.
What serve does is a few things. First it compiles the entire Ember application, then it loads up a couple of local servers. One of which is a Livereload server and the other is a server that serves the Ember application. It also starts a process called watchman which watches over the files and folders of your Ember application to determine if there have been any changes. When a change is detected, watchman will recompile the application and trigger Livereload to reload your browser so you can see the reflected changes. I’ve found this useful when generating new routes or templates, since they immediately made available to view.
So now with the Ember server running, open up your browser of choice and go to http://localhost:4200 to see your Ember application running in the browser.