Yeoman: Getting it to Work on Ubuntu

In case you haven’t yet heard the buzz, Yeoman is one of the best front end development inventions since sliced bread. Think of it as having a jolly little British man living inside your command tool, awaiting your requests. Need to scaffold out an Angular project fast? He’s on it. Need to minify your style sheets and scripts? Already done. Want to download a good pint? Well, perhaps one day when the technology for teleportation is there…

 

Yeoman

Why Put Yeoman to the Job?

In recent months, I’ve been asked by my workplace to get cozy working with AngularJS, which is a great JavaScript framework if you haven’t already checked it out. When I cracked open my new book, though, it became apparent that a tool like Yeoman would be an immense, time-saving help. Why is that? There are numerous tools that can help make an Angular app rock solid, such as Jasmine and Karma Runner (both are JavaScript testing tools). Now you could spend time at the beginning of each project downloading all of the various files needed for each framework or plugin and assemble them by hand, but not only is that needlessly time-consuming, it’s also prone to human error.

It Doesn’t “Just Work”

At the office, I use a Mac, and it’s great. Installing Yeoman on that computer was a breeze (not counting the initial installation of tools needed just to use a Mac terminal for development in general… I use Homebrew).

The problem with installing Yeoman on Ubuntu is it’s not a Mac, but most online instructions are written for Mac users. Also, I use Oh My Zsh for my terminal, which depends on zsh, not bash. I went through a maddening labyrinth of permissions and zsh profile editing, along with many screw ups, before coming up with just the right set of steps to get Yeoman running on my Ubuntu 13.10 computer.

Headache #1 – Installing Node

Yeoman runs on Node to make use of its package manager tool, NPM. If you’ve worked with Ruby in the command line at all, using NPM to install packages is similar to installing gems. Like using Ruby to run Sass, you don’t need to know too much about Node to make use of Yeoman, but you do need to have it working.

Open up your terminal and enter the following commands to install your Node dependencies:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install build-essential openssl libssl-dev curl

Now that your dependencies are in order, install Node:

sudo apt-get install nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node
curl https://npmjs.org/install.sh | sudo sh

See that second line? On Ubuntu, there’s already a tool called “Node” that would otherwise cause a name conflict, so when Node installed on your system, it called itself something a little different, “NodeJS.” That’s all fine and good, but it can cause some issues later. The symlink created will make it as if your installation of Node were actually in the node directory. The third line installs NPM into your shell (the terminal).

Headache #2 – Installing Anything with NPM

At this point, if you try to install anything using NPM, you might see some big, nasty permissions errors… or nothing at all. When I first attempted to install Yeoman on my Ubuntu laptop, I got Yeoman installed, but issuing it commands got me nothing but the sound of crickets chirping.

Here’s the commands you can run in your terminal to prevent those errors:

echo prefix = ~/.node >> ~/.npmrc
echo 'export PATH=$HOME/.node/bin:$PATH' >> ~/.bashrc
. ~/.bashrc

Now if you’re a member of the zsh master race, change both instances of “~/.bashrc” to “~/.zshrc” so that you’re writing to the correct profile file.

Now Install Yo

Sorry, I kinda, sorta lied. Yeoman got a name change not to long ago, and it’s now going by just “Yo.” Now here’s the way to install Yo:

npm install -g yo

Easy peasy, lemon squeezy, right? Right.

Now that you have Yo installed, it’s time for a test flight. In your terminal, navigate into a directory where you’d like to start a new project. Now, just say:

yo

If everything went well, you should have a menu of options, including “Install a generator.” Select that one, and then at the prompt, type in something like “Angular” or “Ember,” or whatever sounds good to you (sorry, I tried “beer,” but there wasn’t any available yet). Choose one of the generators that pops up and wait for it to install.

Generators are Yo’s scaffolding tools. Think of them as blueprints for the foundations to your projects. Once he’s got one of these, your Yeoman has all the instructions necessary to lay down some ground work.

Now go ahead and select “Run the [name of your new generator here]” by selecting it at the prompt. If the generator starts pulling down some files and doesn’t issue you any errors, then you know that Yo is working just fine. Jolly good!

Getting More Help

The following links helped me figure out Yeoman installation, so maybe they’ll help you, too…

3 Responses

  1. Pascal Hartig (@passy) January 25, 2014 / 4:10 pm

    You don’t have to go through the hassle of compiling node yourself. Chris Lea has a very well-maintained PPA for Ubuntu which IMHO makes installing node a lot less of a hassle on Ubuntu than on OS X.

    Instead of Step #1 just do this:

    sudo apt-add-repository ppa:chris-lea/node.js
    sudo apt-get update
    sudo apt-get install nodejs

    I always cringe when I see pipe-to-shell, so this is definitely a nicer and safer way to install node.

    Other than that, great write-up. The prefix setting in the `.npmrc` is something many people don’t know about.

    • sara January 25, 2014 / 5:50 pm

      Thanks for the review, Pascal!

      I’ve seen the Chris Lea repo commands and tried that method a few times, but at the point when I had finally got NodeJS and Yeoman working, these were the steps that did the trick. I’m curious to try opening a VM and giving it a shot on a fresh install, though. If that works, I’ll change the article. ;)