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.
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
|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.
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
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
To login into your mean-box, we will ssh using the below command
And you should see
Now, we can validate the Node installation. Run
And you should see the node version. To validate the MongoDB installation, Run,
This should start the Native MongoDB shell. You can validate the version of MongoDB by running
inside the shell.
PS : We have a MongoDB auto boot script installed, so this will care of starting MongoDB when you start your VM.
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
This folder is always kept in sync with the myVagrantMeanApp folder. To test, lets us create a new folder. Run
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
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
This will start the server on port 3000. And from your host machine, you can run
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.
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
# -*- mode: ruby -*-
# vi: set ft=ruby :
# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure(2) do |config|
# The most common configuration options are documented and commented below.
# For a complete reference, please see the online documentation at
# Every Vagrant development environment requires a box. You can search for
# boxes at https://atlas.hashicorp.com/search.
config.vm.box = "arvindr21/mean-box"
# Disable automatic box update checking. If you disable this, then
# boxes will only be checked for updates when the user runs
# `vagrant box outdated`. This is not recommended.
# config.vm.box_check_update = false
# Create a forwarded port mapping which allows access to a specific port
# within the machine from a port on the host machine. In the example below,
# accessing "localhost:8080" will access port 80 on the guest machine.
# config.vm.network "forwarded_port", guest: 80, host: 8080
# Create a private network, which allows host-only access to the machine
# using a specific IP.
config.vm.network "private_network", ip: "126.96.36.199"
# Create a public network, which generally matched to bridged network.
# Bridged networks make the machine appear as another physical device on
# your network.
# config.vm.network "public_network"
# Share an additional folder to the guest VM. The first argument is
# the path on the host to the actual folder. The second argument is
# the path on the guest to mount the folder. And the optional third
# argument is a set of non-required options.
config.vm.synced_folder "myMEANApp", "/vagrant/myMEANApp"
# Provider-specific configuration so you can fine-tune various
# backing providers for Vagrant. These expose provider-specific options.
# Example for VirtualBox:
# config.vm.provider "virtualbox" do |vb|
# # Display the VirtualBox GUI when booting the machine
# vb.gui = true
# # Customize the amount of memory on the VM:
# vb.memory = "1024"
# View the documentation for the provider you are using for more
# information on available options.
# Define a Vagrant Push strategy for pushing to Atlas. Other push strategies
# such as FTP and Heroku are also available. See the documentation at
# https://docs.vagrantup.com/v2/push/atlas.html for more information.
# config.push.define "atlas" do |push|
# push.app = "YOUR_ATLAS_USERNAME/YOUR_APPLICATION_NAME"
# Enable provisioning with a shell script. Additional provisioners such as
# Puppet, Chef, Ansible, Salt, and Docker are also available. Please see the
# documentation for more information about their specific syntax and use.
# config.vm.provision "shell", inline: <<-SHELL
# sudo apt-get update
# sudo apt-get install -y apache2
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.
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
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
Your terminal/prompt should reflect the below if your setup was successful
Next, we will ssh into the VM, run
And you should see
We are inside the VM now. Next, we will install the components needed for M.E.A.N. stack development.
To install git run
sudo apt-get install git
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
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
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
- Package your VM. Run vagrant package --output mean-box.box. This will create a new .box file.
- 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.
- On the next screen, enter the version number (0.1) and description and create version
- On the next screen, select create provider and enter Virtualbox.
- 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.