So many tools…

So learning front-end web development over the past year has introduced me to an enormous amount of technologies, tools, and frameworks.
One of the best things about these tools is how they integrate together to automate more and get stuff done faster.

One great set of tools I leaned from LearnCodeAcademy‘s Youtube Channel, where he shows some great tutorials on:

The documentation and tutorials on their respective sites are quite thorough and informative, so I recommend reading up.

Setup Node

Here I will focus on setting up these tools in linux (specifically Ubuntu 14.04 running Gnome 13.10, which works great on a touchscreen I should add).

The latest stable version of NodeJS is 0.12 which is a bit newer than what’s currently in the ubuntu apt-get repositories ( I think they have 0.10) so I followed the recommended installation instructions from the NodeSource.com blog post. The v12 repository is located here and I’ll copy the recommended install commands for Debian/Ubuntu here:

# Note the new setup script name for Node.js v0.12 curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -
# Then install with : sudo apt-get install -y nodejs

After the initial setup is complete, you can check your version of node with:
$ node --version

which should return:
v0.12.0

Next we want to install the rest of our tools using the NPM package manager, and don’t forget to use the -g flag to install them gloablly.

Yeoman, grunt and bower

For these you want to use npm (Node Package Manager) and run:
npm install -g yo grunt-cli

This will install yeoman and bower and the grunt command line interface.

ExpressJS

For installing ExpressJS for a project just follow the instructions here.

Uh ohh, Permission denied!

If you get the dreaded permission error when using npm, don’t worry, it’s quite an easy fix. Head over to https://docs.npmjs.com/getting-started/fixing-npm-permissions.

Essentially there are two methods:

  • Taking over owership of the directory wehre npm does it’s shindig. (Usually /usr/local, but on my machine it’s /usr)
  • Or giving npm a new directory for global installs.

On the offchance that changing the permissions for my /usr directory might cause other unintended problems in Ubuntu, I recommend the second option (especially for newer Linux users).

  1. Make a directory for global installations:
    mkdir ~/npm-global
  2. Configure npm to use the new directory path:
    npm config set prefix '~/npm-global'
  3. Open or create a ~/.profile file and add this line:
    export PATH=~/npm-global/bin:$PATH
  4. Back on the command line, update your system variables:
    source ~/.profile
  5. Test: Download a package globally without using sudo.
    npm install -g yo
  6. Hooray, no errors! Do a jig and eat some pie! =)

Yeoman

Yeoman is one of the coolest time-saving tools I’ve come across yet. It uses generators to quickly build the skeleton of a website or webapp and even gives you the option for adding additional tool support during the build process.

You can simply type yo from the command line for the interactive menu where you can search for and run generators or access the help menu.

If you already know a generator you want to use, you can download it with npm using:

npm install -g generator-angular-bootstrap or

npm install -g generator-bootstrap

Get coding!

I recommend following along with this Yeoman tutorial.

Create a directory for your project and fire up the yeoman scaffolding generator with yo angular.

After yo does its work you can fire up your favorite text editor and get coding!

Punch in grunt serve from the project directory and it’ll spin up a localhost server with live refresh so as you modify the webapp files contents your browser will automagically refresh your changes.

Happy coding!