Set up MEAN.js in Vagrant · Hao's learning log

If you have used Vagrant already then, you must know how powerful it can be when it comes to sharing local development environments. If you have not used it already, the whole idea is one person from the development team sets up a VM on their local machine then configure it with all the required libraries, settings and correct software versions. This VM can then be packaged up and shared with anyone.

Why is this powerful? Well, you can ensure that everyone on your team has the exactly same development environment no matter which OS they are using. You can control and maintain the exact version of all the software. Rather than the whole team spend weeks trying to resolve issues on individual machines, it is done once and for all.

It all sounds well and good, but it has its disadvantages too. Since it is a VM box, not all the setting up is straight forward. It is a VM after all, and sometimes the commands are little tricky. You are faced with issues which otherwise does not exist on real machines, and this happened to me during the setup process with my team. After many trial and error, I finally found the solution and want to share it here.

Installing MEAN.js

This section is for one person from the team to complete, because everything from here can be shared with the team. There are already excellent sources out there; I recommend this one: http://thejackalofjavascript.com/vagrant-mean-box

I normally have a repository structure like this:

- root_folder
   - Vagrantfile
   - myApp

Issues and how to resolve them

The blog by arvindr21 has everything right, but the only problem I found was when anyone else on my team tries to pull from the repo and run the site they get a lot of errors.

It turns out; it is not as simple as npm install. First of all, you have to run it as an admin user, so you have to do sudo npm install. Even if you run it as an admin user, you will still see errors along the lines of 'sys-link broken'. This is a vagrant issue, to solve this you have to run sudo npm install --no-bin-links. Then you got to install git and update bower. I know all this sounds confusing, so please follow the instructions shown below.

Note: This is for members who are consuming the VM, and not the creator.

Pull the project from Github (or another repository). I am assuming the vagrant file is set up correctly e.g. private_network IP is "11.12.13.14", and port 3000 forward is added. If not then add these two lines in your Vagrant file.

config.vm.network "private_network", ip: "11.12.13.14"
config.vm.network "forwarded_port", guest: 3000, host: 3000

Run vagrant up; vagrant ssh
Then go to the project folder in the VM, by running cd /vagrant/myApp
Now set up dependencies by sudo npm install --no-bin-links. This process could take a few minutes, so take a quick tea break.
Then install git, because you need it before the next step sudo apt-get install git. Type y and then enter to accept the confirmation.
Once git is installed, do bower install
Run grunt and wait for everything to be loaded and go to http://11.12.13.14:3000 to see the site working.