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.
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:
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.
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
- Or giving
npma 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).
- Make a directory for global installations:
- Configure npm to use the new directory path:
npm config set prefix '~/npm-global'
- Open or create a ~/.profile file and add this line:
- Back on the command line, update your system variables:
- Test: Download a package globally without using sudo.
npm install -g yo
- Hooray, no errors! Do a jig and eat some pie! =)
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 install -g generator-angular-bootstrap or
npm install -g generator-bootstrap
I recommend following along with this Yeoman tutorial.
Create a directory for your project and fire up the yeoman scaffolding generator with
After yo does its work you can fire up your favorite text editor and get coding!
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.