Vagrant-nodejs-angularjs-tutorial

From eBabel wiki
Jump to: navigation, search

Summary

This repro enable you to quickly setup a vm running nodejs environment and install via git the sample code from http://docs.angularjs.org/tutorial. For more details see : http://wiki.ebabel.eu/index.php/Vagrant-nodejs-angularjs-tutorial.

Overview

The following vagrant project will build a nice sandbox/training environment for the nodejs and angularjs.

The main features are that it:

  • Builds an Ubuntu x86_64 (12.04) virtualbox environment (vagrant-nodejs-angularjs) with nodejs and npm pre-installed
  • vagrant-nodejs-angularjs command line includes tree, vim, git, unzip packages plus some "useful aliases"
  • All files can be accessed from the host side, enabling usage of more "user friendly" editors like sublime text
  • I can also use my regular web-browser via port-forwarding (http://localhost:4567/).
  • finally as part of the install process it will clone git clone https://github.com/angular/angular-phonecat.git and branch to step-0 (git checkout -f step-0 )

I have setup a vagrant-nodejs-angularjs github repository (https://github.com/dgapitts/vagrant-nodejs-angularjs-tutorial.git)

So all you need to do (assuming you have vagrant and virtualbox already installed) is

 git clone https://github.com/dgapitts/vagrant-nodejs-angularjs-tutorial.git
 cd vagrant-nodejs-angularjs
 vagrant up

It takes about 2 mins to build the new nodejs virtualbox server (see sample log in the wiki)

vagrant-nodejs-angularjs Project Files

Vagrantfile

A very simple Vagrantfile

 ~/project/vagrant-nodejs-angularjs-tutorial $ cat Vagrantfile
 # -*- mode: ruby -*-
 # vi: set ft=ruby :
 
 Vagrant::Config.run do |config|
 
   config.vm.define "nodejs" do |nodejs|
     nodejs.vm.box = "precise64"
     nodejs.vm.box_url = "http://files.vagrantup.com/precise64.box"
     nodejs.vm.forward_port 8000, 4567
     nodejs.vm.host_name = "nodejs"
     nodejs.vm.provision :shell, :path => "provision.sh"
   end
 
 end

provision.sh

Most of the configuration work is done in the provision.sh

 ~/project/vagrant-nodejs-angularjs-tutorial $ cat provision.sh
 #! /bin/bash
 if [ ! -f /home/vagrant/already-installed-flag ]
 then
   echo "ADD EXTRA ALIAS VIA .bashrc"
   cat /vagrant/bashrc.append.txt >> /home/vagrant/.bashrc
   echo "GENERAL APT-GET UPDATE"
   apt-get -qq update
   echo "INSTALL NODEJS"
   apt-get -qq -y install nodejs
   echo "INSTALL NPM"
   apt-get -qq -y install npm
   echo "INSTALL GIT"
   apt-get -qq -y install git
   echo "INSTALL VIM"
   apt-get -qq -y install vim
   echo "INSTALL TREE"
   apt-get -qq -y install tree
   echo "INSTALL UNZIP"
   apt-get -qq -y install unzip
     
   echo "CLONING GITHUB CODE"
   cd /home/vagrant
   git clone https://github.com/angular/angular-phonecat.git
   cd angular-phonecat
   git checkout -f step-0
   
   touch /home/vagrant/already-installed-flag
   echo "Done!"
 else
   echo "already installed flag set : /home/vagrant/already-installed-flag"
 fi

extra aliases appended to .bashrc

I have also added some extra aliases, which I personally find really useful.

 ~/project/vagrant-nodejs-angularjs-tutorial $ cat bashrc.append.txt
 alias vi='/usr/bin/vim'
 alias h='history'
 alias h2='history'
 alias h40='history|tail -40'
 alias hl='history|less'
 alias l40='ls -ltr|tail -40'
 alias lt='ls -ltr|tail -10'
 alias ht='history|tail -10'
 alias saru30='sar -u | head -3 ; sar -u |tail -30'
 alias sarq30='sar -q | head -3 ; sar -q |tail -30'

Note to use sar I would need to include an extra "apt-get sysstat"

what does it look like once it is built ?

command line virtual machine perspective

start the new server up using "vagrant ssh"

 ~/project/vagrant-nodejs $ vagrant ssh
 Welcome to Ubuntu 12.04 LTS (GNU/Linux 3.2.0-23-generic x86_64)
 
  * Documentation:  https://help.ubuntu.com/
 Welcome to your Vagrant-built virtual machine.
 Last login: Fri Sep 14 06:23:18 2012 from 10.0.2.2

angular-phonecat application files and folders

using tree we can get a quick overview of the angular-phonecat application files and folders:

 vagrant@nodejs:~$ tree    << starting at the home directory of the vagrant user within my VM
 .
 |-- already-installed-flag
 |-- angular-phonecat
 |   |-- app
 |   |   |-- css
 |   |   |   |-- app.css
 |   |   |   |-- bootstrap.css
 |   |   |   |-- bootstrap.min.css
 |   |   |   |-- bootstrap-responsive.css
 |   |   |   `-- bootstrap-responsive.min.css
 |   |   |-- img
 |   |   |   |-- glyphicons-halflings.png
 |   |   |   |-- glyphicons-halflings-white.png
 |   |   |   `-- phones
 |   |   |       |-- dell-streak-7.0.jpg
 |   |   |       |-- dell-streak-7.1.jpg
 |   |   |       |-- dell-streak-7.2.jpg
 |   |   |       |-- dell-streak-7.3.jpg
 |   |   |       |-- dell-streak-7.4.jpg
 |   |   |       |-- dell-venue.0.jpg
 |   |   |       |-- dell-venue.1.jpg
 …
 |   |-- scripts
 |   |   |-- e2e-test.bat
 |   |   |-- e2e-test.sh
 |   |   |-- private
 |   |   |   |-- format-json.sh
 |   |   |   |-- goto_step.bat
 |   |   |   |-- goto_step.sh
 |   |   |   |-- push-to-github.sh
 |   |   |   |-- retag.sh
 |   |   |   |-- ScrapeData.js
 |   |   |   |-- snapshot.sh
 |   |   |   `-- snapshot-web.sh
 |   |   |-- test.bat
 |   |   |-- test.sh
 |   |   |-- update-repo.sh
 |   |   |-- watchr.rb
 |   |   `-- web-server.js
 |   `-- test
 |       |-- e2e
 |       |   |-- runner.html
 |       |   `-- scenarios.js
 |       |-- lib
 |       |   `-- angular
 |       |       |-- angular-mocks.js
 |       |       |-- angular-scenario.js
 |       |       `-- version.txt
 |       `-- unit
 |           |-- controllersSpec.js
 |           |-- directivesSpec.js
 |           |-- filtersSpec.js
 |           `-- servicesSpec.js

starting nodejs via web-server.js script

and simple start nodejs:

 vagrant@nodejs:~$ angular-phonecat/scripts/web-server.js
 Http Server running at http://localhost:8000/


host machine perspective

browsing nodejs pages from chrome =

Then from my laptop I can also use my regular web-browser via port-forwarding ( http://localhost:4567/ ).

angular-phonecat application files and folders

I can also browse and edit files (sometimes sublime-text is nicer than vim) from my laptop


 ~/project/vagrant-nodejs $ tree        << on my laptop the base of the 'shared folder' is mapped to the vagrant-nodejs folder under project
 .
 ├── Vagrantfile
 ├── angular-phonecat
 │   ├── README.md
 │   ├── app
 │   │   ├── css
 │   │   │   ├── app.css
 │   │   │   ├── bootstrap-responsive.css
 │   │   │   ├── bootstrap-responsive.min.css
 │   │   │   ├── bootstrap.css
 …
 |   |-- scripts
 |   |   |-- e2e-test.bat
 |   |   |-- e2e-test.sh
 |   |   |-- private
 |   |   |   |-- format-json.sh
 |   |   |   |-- goto_step.bat
 |   |   |   |-- goto_step.sh
 |   |   |   |-- push-to-github.sh
 |   |   |   |-- retag.sh
 |   |   |   |-- ScrapeData.js
 |   |   |   |-- snapshot.sh
 |   |   |   `-- snapshot-web.sh
 |   |   |-- test.bat
 |   |   |-- test.sh
 |   |   |-- update-repo.sh
 |   |   |-- watchr.rb
 |   |   `-- web-server.js
 |   `-- test
 |       |-- e2e
 |       |   |-- runner.html
 |       |   `-- scenarios.js
 |       |-- lib
 |       |   `-- angular
 |       |       |-- angular-mocks.js
 |       |       |-- angular-scenario.js
 |       |       `-- version.txt
 |       `-- unit
 |           |-- controllersSpec.js
 |           |-- directivesSpec.js
 |           |-- filtersSpec.js
 |           `-- servicesSpec.js

Install log - total build time of under 2 minutes

By adding the section headers in BLOCK CAPITALS makes the install log more readable. Before I was confused by the frequent "dpkg-preconfigure: unable to re-open stdin: No such file or directory" warninngs/errors in the log.

Now I can see this happens everytime I call apt-get, this needs further investigation but does not for the moment seem like a serious issue.


 ~/project/vagrant-nodejs $ time vagrant up
 Bringing machine 'nodejs' up with 'virtualbox' provider...
 [nodejs] Importing base box 'precise64'...
 [nodejs] Matching MAC address for NAT networking...
 [nodejs] Setting the name of the VM...
 [nodejs] Clearing any previously set forwarded ports...
 [nodejs] Creating shared folders metadata...
 [nodejs] Clearing any previously set network interfaces...
 [nodejs] Preparing network interfaces based on configuration...
 [nodejs] Forwarding ports...
 [nodejs] -- 22 => 2222 (adapter 1)
 [nodejs] -- 8000 => 4567 (adapter 1)
 [nodejs] Booting VM...
 [nodejs] Waiting for VM to boot. This can take a few minutes.
 [nodejs] VM booted and ready for use!
 [nodejs] Setting hostname...
 [nodejs] Configuring and enabling network interfaces...
 [nodejs] Mounting shared folders...
 [nodejs] -- /vagrant
 [nodejs] Running provisioner: shell...
 [nodejs] Running: /var/folders/65/gpz82csd1_s358m494_62fn52jhln9/T/vagrant-shell20131008-21937-bkpp0o
 stdin: is not a tty
 ADD EXTRA ALIAS VIA .bashrc
 GENERAL APT-GET UPDATE
 INSTALL NODEJS
 dpkg-preconfigure: unable to re-open stdin: No such file or directory
 Selecting previously unselected package libc-ares2.
 (Reading database ...
 51095 files and directories currently installed.)
 Unpacking libc-ares2 (from .../libc-ares2_1.7.5-1_amd64.deb) ...
 Selecting previously unselected package libicu48.
 Unpacking libicu48 (from .../libicu48_4.8.1.1-3_amd64.deb) ...
 Selecting previously unselected package libv8-3.7.12.22.
 Unpacking libv8-3.7.12.22 (from .../libv8-3.7.12.22_3.7.12.22-3_amd64.deb) ...
 Selecting previously unselected package libev4.
 Unpacking libev4 (from .../libev4_1%3a4.11-1_amd64.deb) ...
 Selecting previously unselected package nodejs.
 Unpacking nodejs (from .../nodejs_0.6.12~dfsg1-1ubuntu1_amd64.deb) ...
 Processing triggers for man-db ...
 Setting up libc-ares2 (1.7.5-1) ...
 Setting up libicu48 (4.8.1.1-3) ...
 Setting up libv8-3.7.12.22 (3.7.12.22-3) ...
 Setting up libev4 (1:4.11-1) ...
 Setting up nodejs (0.6.12~dfsg1-1ubuntu1) ...
 update-alternatives: using /usr/bin/node to provide /usr/bin/js (js) in auto mode.
 Processing triggers for libc-bin ...
 ldconfig deferred processing now taking place
 INSTALL NPM
 dpkg-preconfigure: unable to re-open stdin: No such file or directory
 Selecting previously unselected package wwwconfig-common.
 (Reading database ...
 51182 files and directories currently installed.)
 Unpacking wwwconfig-common (from .../wwwconfig-common_0.2.2_all.deb) ...
 Selecting previously unselected package javascript-common.
 Unpacking javascript-common (from .../javascript-common_8_all.deb) ...
 Selecting previously unselected package node-node-uuid.
 Unpacking node-node-uuid (from .../node-node-uuid_1.2.0~20110510-2_all.deb) ...
 Selecting previously unselected package libc-ares-dev.
 Unpacking libc-ares-dev (from .../libc-ares-dev_1.7.5-1_amd64.deb) ...
 Selecting previously unselected package libev-dev.
 Unpacking libev-dev (from .../libev-dev_1%3a4.11-1_amd64.deb) ...
 Selecting previously unselected package libv8-dev.
 Unpacking libv8-dev (from .../libv8-dev_3.7.12.22-3_amd64.deb) ...
 Selecting previously unselected package node-abbrev.
 Unpacking node-abbrev (from .../node-abbrev_1.0.3-1_all.deb) ...
 Selecting previously unselected package node-inherits.
 Unpacking node-inherits (from .../node-inherits_0.1-1_all.deb) ...
 Selecting previously unselected package node-block-stream.
 Unpacking node-block-stream (from .../node-block-stream_0.0.5-1_all.deb) ...
 Selecting previously unselected package node-rimraf.
 Unpacking node-rimraf (from .../node-rimraf_2.0.1-1_all.deb) ...
 Selecting previously unselected package node-mkdirp.
 Unpacking node-mkdirp (from .../node-mkdirp_0.3.1-2_all.deb) ...
 Selecting previously unselected package node-graceful-fs.
 Unpacking node-graceful-fs (from .../node-graceful-fs_1.1.8-1_all.deb) ...
 Selecting previously unselected package node-fstream.
 Unpacking node-fstream (from .../node-fstream_0.1.13-1_all.deb) ...
 Selecting previously unselected package node-ini.
 Unpacking node-ini (from .../node-ini_1.0.2-1_all.deb) ...
 Selecting previously unselected package node-lru-cache.
 Unpacking node-lru-cache (from .../node-lru-cache_1.0.5-1_all.deb) ...
 Selecting previously unselected package node-minimatch.
 Unpacking node-minimatch (from .../node-minimatch_0.2.0-1_all.deb) ...
 Selecting previously unselected package node-nopt.
 Unpacking node-nopt (from .../node-nopt_1.0.10-1_all.deb) ...
 Selecting previously unselected package node-request.
 Unpacking node-request (from .../node-request_2.9.153-1_all.deb) ...
 Selecting previously unselected package node-semver.
 Unpacking node-semver (from .../node-semver_1.0.13-1_all.deb) ...
 Selecting previously unselected package node-tar.
 Unpacking node-tar (from .../node-tar_0.1.13-1_all.deb) ...
 Selecting previously unselected package node-which.
 Unpacking node-which (from .../node-which_1.0.5-1_all.deb) ...
 Selecting previously unselected package nodejs-dev.
 Unpacking nodejs-dev (from .../nodejs-dev_0.6.12~dfsg1-1ubuntu1_amd64.deb) ...
 Selecting previously unselected package npm.
 Unpacking npm (from .../npm_1.1.4~dfsg-1_all.deb) ...
 Processing triggers for man-db ...
 Setting up wwwconfig-common (0.2.2) ...
 Setting up javascript-common (8) ...
 Setting up node-node-uuid (1.2.0~20110510-2) ...
 Setting up libc-ares-dev (1.7.5-1) ...
 Setting up libev-dev (1:4.11-1) ...
 Setting up libv8-dev (3.7.12.22-3) ...
 Setting up node-abbrev (1.0.3-1) ...
 Setting up node-inherits (0.1-1) ...
 Setting up node-block-stream (0.0.5-1) ...
 Setting up node-rimraf (2.0.1-1) ...
 Setting up node-mkdirp (0.3.1-2) ...
 Setting up node-graceful-fs (1.1.8-1) ...
 Setting up node-fstream (0.1.13-1) ...
 Setting up node-ini (1.0.2-1) ...
 Setting up node-lru-cache (1.0.5-1) ...
 Setting up node-minimatch (0.2.0-1) ...
 Setting up node-nopt (1.0.10-1) ...
 Setting up node-request (2.9.153-1) ...
 Setting up node-semver (1.0.13-1) ...
 Setting up node-tar (0.1.13-1) ...
 Setting up node-which (1.0.5-1) ...
 Setting up nodejs-dev (0.6.12~dfsg1-1ubuntu1) ...
 Setting up npm (1.1.4~dfsg-1) ...
 INSTALL GIT
 dpkg-preconfigure: unable to re-open stdin: No such file or directory
 Selecting previously unselected package liberror-perl.
 (Reading database ...
 52078 files and directories currently installed.)
 Unpacking liberror-perl (from .../liberror-perl_0.17-1_all.deb) ...
 Selecting previously unselected package git-man.
 Unpacking git-man (from .../git-man_1%3a1.7.9.5-1_all.deb) ...
 Selecting previously unselected package git.
 Unpacking git (from .../git_1%3a1.7.9.5-1_amd64.deb) ...
 Selecting previously unselected package patch.
 Unpacking patch (from .../patch_2.6.1-3_amd64.deb) ...
 Processing triggers for man-db ...
 Setting up liberror-perl (0.17-1) ...
 Setting up git-man (1:1.7.9.5-1) ...
 Setting up git (1:1.7.9.5-1) ...
 Setting up patch (2.6.1-3) ...
 INSTALL VIM
 dpkg-preconfigure: unable to re-open stdin: No such file or directory
 Selecting previously unselected package libgpm2.
 (Reading database ...
 52736 files and directories currently installed.)
 Unpacking libgpm2 (from .../libgpm2_1.20.4-4_amd64.deb) ...
 Preparing to replace python2.7 2.7.3-0ubuntu3 (using .../python2.7_2.7.3-0ubuntu3.4_amd64.deb) ...
 Unpacking replacement python2.7 ...
 Preparing to replace python2.7-minimal 2.7.3-0ubuntu3 (using .../python2.7-minimal_2.7.3-0ubuntu3.4_amd64.deb) ...
 Unpacking replacement python2.7-minimal ...
 Processing triggers for man-db ...
 Setting up python2.7-minimal (2.7.3-0ubuntu3.4) ...
 (Reading database ...
 52739 files and directories currently installed.)
 Preparing to replace vim-tiny 2:7.3.429-2ubuntu2 (using .../vim-tiny_2%3a7.3.429-2ubuntu2.1_amd64.deb) ...
 Unpacking replacement vim-tiny ...
 Preparing to replace vim-common 2:7.3.429-2ubuntu2 (using .../vim-common_2%3a7.3.429-2ubuntu2.1_amd64.deb) ...
 Unpacking replacement vim-common ...
 Selecting previously unselected package libpython2.7.
 Unpacking libpython2.7 (from .../libpython2.7_2.7.3-0ubuntu3.4_amd64.deb) ...
 Selecting previously unselected package vim-runtime.
 Unpacking vim-runtime (from .../vim-runtime_2%3a7.3.429-2ubuntu2.1_all.deb) ...
 Adding 'diversion of /usr/share/vim/vim73/doc/help.txt to /usr/share/vim/vim73/doc/help.txt.vim-tiny by vim-runtime'
 Adding 'diversion of /usr/share/vim/vim73/doc/tags to /usr/share/vim/vim73/doc/tags.vim-tiny by vim-runtime'
 Selecting previously unselected package vim.
 Unpacking vim (from .../vim_2%3a7.3.429-2ubuntu2.1_amd64.deb) ...
 Processing triggers for man-db ...
 Setting up libgpm2 (1.20.4-4) ...
 Setting up python2.7 (2.7.3-0ubuntu3.4) ...
 Setting up vim-common (2:7.3.429-2ubuntu2.1) ...
 Setting up vim-tiny (2:7.3.429-2ubuntu2.1) ...
 Setting up libpython2.7 (2.7.3-0ubuntu3.4) ...
 Setting up vim-runtime (2:7.3.429-2ubuntu2.1) ...
 Processing /usr/share/vim/addons/doc
 Setting up vim (2:7.3.429-2ubuntu2.1) ...
 update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/vim (vim) in auto mode.
 update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/vimdiff (vimdiff) in auto mode.
 update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/rvim (rvim) in auto mode.
 update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/rview (rview) in auto mode.
 update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/vi (vi) in auto mode.
 update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/view (view) in auto mode.
 update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/ex (ex) in auto mode.
 Processing triggers for libc-bin ...
 ldconfig deferred processing now taking place
 INSTALL TREE
 dpkg-preconfigure: unable to re-open stdin: No such file or directory
 Selecting previously unselected package tree.
 (Reading database ...
 54314 files and directories currently installed.)
 Unpacking tree (from .../tree_1.5.3-2_amd64.deb) ...
 Processing triggers for man-db ...
 Setting up tree (1.5.3-2) ...
 INSTALL UNZIP
 dpkg-preconfigure: unable to re-open stdin: No such file or directory
 Selecting previously unselected package unzip.
 (Reading database ...
 54320 files and directories currently installed.)
 Unpacking unzip (from .../unzip_6.0-4ubuntu1_amd64.deb) ...
 Processing triggers for man-db ...
 Setting up unzip (6.0-4ubuntu1) ...
 CLONING GITHUB CODE
 Cloning into 'angular-phonecat'...
 Note: checking out 'step-0'.
 
 You are in 'detached HEAD' state. You can look around, make experimental
 changes and commit them, and you can discard any commits you make in this
 state without impacting any branches by performing another checkout.
 
 If you want to create a new branch to retain commits you create, you may
 do so (now or later) by using -b with the checkout command again. Example:
 
   git checkout -b new_branch_name
 
 HEAD is now at a645b10... step-0 bootstrap angular app
 Done!
 
 real  1m54.484s
 user  0m2.925s
 sys  0m1.131s