M.E.A.N. Stack Development with Vagrant

Tweet about this on TwitterShare on LinkedIn0Share on Google+5Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

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

Tweet about this on TwitterShare on LinkedIn0Share on Google+5Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • jatasya

    I am getting the below error how to resolve it, can anyone help

    The box ‘arvindr21/mean-box’ could not be found or
    could not be accessed in the remote catalog. If this is a private
    box on HashiCorp’s Atlas, please verify you’re logged in via
    vagrant login. Also, please double-check the name. The expanded
    URL and error message are shown below:

    URL: [“https://atlas.hashicorp.com/arvindr21/mean-box”]
    Error: Could not resolve host: atlas.hashicorp.com

  • Npmer

    Anyone have any idea why grunt -v works for me? Accidentally typed it and it worked

    • Npmer

      n/m using a new version of Ubuntu. Works with just “grunt” now. Weird

  • lennylux

    Hi,
    I’m trying to use this box, I’m on a mac (latest updates at time of writing) box installed, can ssh in etc….
    what I want to do is sync a specific folder…. on my local machine I have /username/Code/Nodejs and I want to map that to /username/vagrant/Code/nodejs. I already use the same principal for a homestead laravel box.

    I have uncommented the private network and IP, attempted to map the folder I’d like to sync as above, bix doesnt boot saying can’t fine /username/Code/nodejs…. if I remove my mapping attempt, it boots… so that is the issue. What am I doing wrong here.

    desired result is to map projects to /username/Code/nodejs/project-xyz etc….

    Thanks in advance for any help

  • 0xCAFEBABE

    How did you get the synced folders to work properly in your mean-box by default? I’m trying to create one from scratch, and I have to specify

    manually in the Vagrantfile to get it to sync in real-time on OS X. If I package my custom box with these settings, will it work by default if I download and run it somewhere else?

  • Emmanuel L. Constant

    I getting the following after vagrant up

    default: Warning: Connection timeout. Retrying…
    default: Warning: Connection timeout. Retrying…
    default: Warning: Connection timeout. Retrying…
    default: Warning: Connection timeout. Retrying…

    when I do vagrant halt

    then vagrant up –debug

    it loops on the following:

    GuestMemoryBalloon=0
    GuestOSType=”Ubuntu”
    GuestAdditionsRunLevel=0
    DEBUG subprocess: Waiting for process to exit. Remaining to timeout: 32000

    Not sure how to resolve, please assist.

  • http://youtu.be/GzgHLpuV4B0 lexan

    Where to see a result after starting NodeJS app? Thank you.

  • Ian Simmons

    I had to install git. Looks like it is supposed to be already installed but had to do sudo apt-get install git

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks! I updated the post.

  • disqus_FopfdixnPz

    I’m getting a permission error when trying to run ‘yo meanjs’ as described in the shared folders section. I am on a windows machine so I am using the command line from Git for Windows since that includes an ssh executable (but I’ve run vagrant ssh so everything at this point should be running on the box and not impacted by being on windows machine host). When I run yo meanjs it walks me through the questions and then as it goes through the install and some of the create components, such as create bower.json, (at least I’m assuming it’s some since it hits an error I don’t know exactly how far through the install/create process it is) it errors out on this:

    npm WARN package.json test1@0.0.1 No repository field.

    npm ERR! Error: EACCES, mkdir ‘/home/vagrant/.npm/async/0.9.2′

    npm ERR! { [Error: EACCES, mkdir ‘/home/vagrant/.npm/async/0.9.2′]

    npm ERR! errno: 3,

    npm ERR! code: ‘EACCES’,

    npm ERR! path: ‘/home/vagrant/.npm/async/0.9.2′,

    npm ERR! parent: ‘test1′ }

    npm ERR!

    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! System Linux 3.2.0-23-generic-pae

    npm ERR! command “/usr/bin/node” “/usr/bin/npm” “install”

    npm ERR! cwd /vagrant/myMeanApp

    npm ERR! node -v v0.10.33

    npm ERR! npm -v 1.4.28

    npm ERR! path /home/vagrant/.npm/async/0.9.2

    npm ERR! code EACCES

    npm ERR! errno 3

    npm ERR! stack Error: EACCES, mkdir ‘/home/vagrant/.npm/async/0.9.2′

    npm ERR!

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      This looks like a permission issues. Try the following

      1. Clean up all the things you have done so far.
      2. Head to /home/vagrant and delete the .npm folder.
      3. Create the .npm folder manually
      4. Run npm install bower grunt-cli
      5. Then run yo meanjs

      Let me know if it works. Thanks.

      • disqus_FopfdixnPz

        I’m still hitting a permission error:

        vagrant@precise32:~$ cd /vagrant
        vagrant@precise32:/vagrant$ mkdir .npm
        vagrant@precise32:/vagrant$ npm install bower grunt-cli
        npm ERR! Error: EACCES, mkdir ‘/home/vagrant/.npm/abbrev/1.0.7′
        npm ERR! { [Error: EACCES, mkdir ‘/home/vagrant/.npm/abbrev/1.0.7′]
        npm ERR! errno: 3,
        npm ERR! code: ‘EACCES’,
        npm ERR! path: ‘/home/vagrant/.npm/abbrev/1.0.7′,
        npm ERR! parent: ‘nopt’ }
        npm ERR!
        npm ERR! Please try running this command again as root/Administrator.
        npm ERR! System Linux 3.2.0-23-generic-pae
        npm ERR! command “/usr/bin/node” “/usr/bin/npm” “install” “bower” “grunt-cli”
        npm ERR! cwd /vagrant
        npm ERR! node -v v0.10.33
        npm ERR! npm -v 1.4.28
        npm ERR! path /home/vagrant/.npm/abbrev/1.0.7
        npm ERR! code EACCES
        npm ERR! errno 3
        npm ERR! stack Error: EACCES, mkdir ‘/home/vagrant/.npm/abbrev/1.0.7′
        npm ERR! not ok code 0

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Are you using the default ssh user? Or you have created a user of your own for ssh?

          Also can try setting explicit permission to the .npm folder?

          Thanks.

        • Enkia Dev

          Did you ever figure out what the issue was? I’m having the same problem.

      • http://n3t.gr Giorgos Kontopoulos

        shows that folder belongs to vagrant user

        but inside everything else belongs to root

        so instead of 2. one can do

        and then follow to the next steps

        EDIT: was very fast to celebrate
        ended up with following error

        bower angular-resource#~1.2 ENOGIT git is not installed or not in the PATH

        npm ERR! meanapp@0.0.1 postinstall: bower install --config.interactive=false
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the meanapp@0.0.1 postinstall script.
        npm ERR! This is most likely a problem with the meanapp package,
        npm ERR! not with npm itself.
        npm ERR! Tell the author that this fails on your system:
        npm ERR! bower install –config.interactive=false
        npm ERR! You can get their info via:
        npm ERR! npm owner ls meanapp
        npm ERR! There is likely additional logging output above.
        npm ERR! System Linux 3.2.0-23-generic-pae
        npm ERR! command “/usr/bin/node” “/usr/bin/npm” “install”
        npm ERR! cwd /home/vagrant
        npm ERR! node -v v0.10.33
        npm ERR! npm -v 1.4.28
        npm ERR! code ELIFECYCLE
        npm ERR!
        npm ERR! Additional logging details can be found in:
        npm ERR! /home/vagrant/npm-debug.log
        npm ERR! not ok code 0

        giving up

      • http://n3t.gr Giorgos Kontopoulos

        EDIT2:

        gave it another try

        finally had to do this and before I also had to install git that was missing

        sudo apt-get update

        sudo apt-get install git

        sudo chown -R $(whoami) ~/.npm

        but running grunt will give this output

        vagrant@precise32:/vagrant/meanapp$ grunt

        Running “jshint:all” (jshint) task

        >> 55 files lint free.

        Running “csslint:all” (csslint) task

        >> 2 files lint free.

        Running “concurrent:default” (concurrent) task

        Running “nodemon:dev” (nodemon) task

        [nodemon] v1.2.1

        [nodemon] to restart at any time, enter rs

        [nodemon] watching: app/views/**/*.* gruntfile.js server.js config/**/*.js app/**/*.js

        [nodemon] starting node --debug server.js

        debugger listening on port 5858

        NODE_ENV is not defined! Using default development environment

        Running “watch” task

        Waiting…

        MEAN.JS application started on port 3000

        [nodemon] watching 25,322 files – this might cause high cpu usage. To reduce use “–watch”.

        and visiting locahost:3000 gives nothing

        where should I start debugging ???

        I am on a ubuntu 15.04 host if it makes a difference

      • http://n3t.gr Giorgos Kontopoulos

        EDIT3

        had to uncomment in vagrantfile

        config.vm.network “private_network”, ip: “192.168.33.10”

        and do a vagrant reload before
        192.168.33.10:3000 worked !!!

        YAY !!!

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Cool. Thanks for sharing!!

          • Ben Brink

            Hi Arvind. I am having the same problem and am new to shell command line/terminal. I’m not sure what you mean by 1. Clean up all the thing you have done so far. Does this mean delete the files in the app folder as seen on the Host machine? Also by Create the .npm folder manually do you simply mean adding a folder with this name in the app folder? Ben

      • Alexey Markushin

        Doesn’t work unfortunately =(
        Still says: “Please try running this command again as root/Administrator.”

  • Patrick Meaney

    Arvind, thanks a ton for sharing your knowledge and your VM! I am already a fan– I bookmarked your webpage and I look forward to discovering more gems of knowledge here.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Patrick.