M.E.A.N. Stack Development with Vagrant7 min read

If you are new to MEAN, I would recommend checking out my MEAN Workshop.

Also checkout my tutorial MEAN stack – A Hands on Tutorial

Recently I started using Vagrant for one of my clients. The requirement was to have a unified working environment for all the developers, so that they can focus more on code and less on the onboarding and setup. So, I built a Vagrant box that is ready to be used for M.E.A.N. Stack development.

If you are new to Vagrant take a look at

In this post, I will show how to consume the mean-box I have created as is and get started with M.E.A.N. development. Later in the post, I will also show how you can build a customized version of your own Vagrant box and then share it with your team.

So, let us get started.

Setup Vagrant

Before we start working with Vagrant mean-box, we need to setup the environment. First, you need either Virtualbox or Vmware software installed on your machine. The mean-box I have created works on virtual box only as of today. I will add more providers later on. So, we will download Virtualbox from here. Pick the one appropriate for your OS.

Once that is done, we will download Vagrant. You can head to their download page and download an appropriate version for your OS.

Once the above steps are done, we are good to get started.

Common Vagrant commands

If you are new Vagrant, below are a few commands that will help you get started

Command Description
vagrant box list  List all Vagrant boxes installed on your machine
vagrant init xxx  Adds a new Vagrant box with the name xxx
vagrant up  Boots the Vagrant box
vagrant ssh   Connect to the Vagrant box via SSH
vagrant reload  If you have updated the Vagrantfile, you need to reload the VM to reflect the changes. This commands does precisely that.
vagrant halt  Stops the Vagrant box
vagrant destroy  Remove the Vagrant instance from your machine (All data in the VM will be lost)

For the remaining commands you can refer here.

Consume mean-box

First, we will take a look as how we can consume an existing Vagrant box. Create a new folder named myVagrantMeanApp. Open a new terminal/prompt here and run

vagrant init arvindr21/mean-box

If you have setup everything correctly, you should see a new Vagrantfile file created at the root of the folder.

Now, to download the M.E.A.N. stack installed Ubuntu VM, all you need to do is run

vagrant up

This will download the VM and setup it up on your machine. This is a one time download. And from next time onwards, the VM will be set up from a local cache. The mean-box VM is around 700mb, so it may take upto 2 hours to download depending on your internet connection.

Once the setup is done, you will see a screen like

Screen Shot 2015-01-13 at 3.53.58 pm

To login into your mean-box, we will ssh using the below command

vagrant ssh

And you should see

Screen Shot 2015-01-13 at 3.57.14 pm

Now, we can validate the Node installation. Run

node -v

And you should see the node version. To validate the MongoDB installation, Run,

mongo

This should start the Native MongoDB shell. You can validate the version of MongoDB by running

db.version()

inside the shell.

PS : We have a MongoDB auto boot script installed, so this will care of starting MongoDB when you start your VM.

Shared folders

One of the key feature of Vagrant is that it can keep the files in sync between the host machine and the VM. This is a very powerful feature when we are working in a collaborative environment.

To see how powerful this is, we will scaffold a new MEAN project inside the VM and try to access it from the host machine.

Once you have ssh’d into the VM, run

cd /vagrant

This folder is always kept in sync with the myVagrantMeanApp folder. To test, lets us create a new folder. Run

mkdir myMEANApp

If you list the files in the current directory by running  ls you will see a new folder and when you go back to your finder/explorer and see inside the myVagrantMeanApp folder, you will see the same folder present. This folder will always be in sync between the machines.

Now, back to the VM, we will scaffold a new MEANjs app. Run

cd myMEANApp 

yo meanjs

You can fill out the questions and a new MEAN app will be scaffolded for you. And you can see that the scaffolded files are available outside the VM as well.

You can test your newly scaffolded MEANjs app by running

grunt

This will start the server on port 3000. And from your host machine, you can run

http://localhost:3000

And you should be able to see the project. Now you can minimize the terminal, make changes to your code on your host machine and your changes will be reflected on the webpage!

Simple and easy development platform.

Project, Teams and Vagrant

This is where things get interesting. Now that we have an isolated dev environment, we need some way to save the project along with VM. This way teams can collaborate with each other using an existing CVS system like Git at the same time execute the code inside the VM without much effort.

Publish Project

When we setup the project for the first time, we will set it up as below

  • Follow all the steps till now to generate a MEANjs code base.
  • Update your Vagrantfile as below

Notice line 40, where we have added the mapping between a folder on host machine with a mapping on the VM. Also notice, we have updated line 29 to use a fancy IP address for this box. This will be helpful when you have multiple development environments.

  • From the host machine, init a new CVS repo inside the myVagrantMeanApp. In case you are using Git, you can run the following

git init && git add -A

This will init a new git project and add all the files. Files include the Vagrantfile and our MEANjs code base. Next, you can push this code to the repo.

Consume project

Now, when a new team member comes, s/he needs to follow the below steps to setup the project

  • Download and setup Virtualbox and Vagrant
  • Create a folder where the code needs to be downloaded

    git pull https://link.to/repo  – This will download the project setup

  • Run  vagrant up – this will download the mean-box VM and install it. After that, it will map the project folder on the host machine to the one inside VM

And now you can ssh into the VM, run  npm install inside the /vagrant/myMEANApp.

And then you can start the project by running

grunt

Very powerful right?

Create a custom M.E.A.N. Stack Vagrant box

If you are impressed with the above box and want to create one for your own team, you can do so very easily. We will be building our VM on top of hashicorp/precise32. You can also use the 64bit flavor, upto your needs.

Create a new folder named my-mean-box. We will be creating the VM box in this folder. Open a new terminal/prompt here. To setup the base VM, run

vagrant init hashicorp/precise32

Next, download and setup the VM, run

vagrant up

Your terminal/prompt should reflect the below if your setup was successful

Screen Shot 2015-01-13 at 2.50.51 pm

Next, we will ssh into the VM, run

vagrant ssh

And you should see

Screen Shot 2015-01-13 at 2.55.28 pm

We are inside the VM now. Next, we will install the components needed for M.E.A.N. stack development.

Git

To install git run

sudo apt-get install git

Node.js

Run the following commands one after the other

  • sudo apt-get update
  • sudo apt-get install -y python-software-properties python g++ make
  • sudo add-apt-repository ppa:chris-lea/node.js
  • sudo apt-get update
  • sudo apt-get install nodejs

This will take care of Node.js installation. To verify, you can run

node -v 

npm -v

MongoDB

Run the following commands one after the other

  • sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
  • echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen' | sudo tee /etc/apt/sources.list.d/mongodb.list
  • sudo apt-get update
  • sudo apt-get install -y mongodb-org

This will take care of MongoDB. You can verify the installation by running

mongo

and you should be able to access MongoDB collections via this shell.

This is pretty much you need to build a M.E.A.N. stack application. If you want, you can add Node.js CLI tools like Yeoman, Grunt, Gulp, Bower etc.. This way, your team member consuming your VM, can start working on it as is.

Also, you can install MEAN.io or MEANjs.org packages on your VM before distribution. This way, your team can directly work on your project without wasting time on the installation of the scaffolding tools.

Personally I prefer MEANjs.org to MEAN.io for several reasons. You can install any package as you like. I will use MEANjs.org for this post.

Install Node.js tools

sudo npm install -g bower grunt-cli yo generator-meanjs

And bam!! your distributable VM is ready.

Package and Distribute VM

Now, we will package and distribute this VM. You can navigate to Atlas a.k.a Vagrant cloud, where you can share your VM.

Create an account and Sign In. Once you are logged in, you can see how you can share a VM. You can follow the below steps as well to achieve the same

  1. Package your VM. Run vagrant package --output mean-box.box. This will create a new .box file.
  2. Create a new box on the Atlas. Provide the details as required and click create. You can also make this VM private, so only you and your team can access it.
  3. On the next screen, enter the version number (0.1) and description and create version
  4. On the next screen, select create provider and enter Virtualbox.
  5. Finally upload the .box file we created on step 1

After the file uploads, you need to edit the version and release the package. Then only it will be available for others to consume.

And on how to use your VM, refer Consume mean-box topic above.

A simple and powerful way to port your development environment.

Hope this post gave you an idea on how to work with Vagrant and MEAN stack.


Thanks for reading! Do comment.
@arvindr21