basic SPA (single page app) boilerplate for fast prototyping in angular

Creating this inside a Vagrant image (meaning there are extra steps to install the needed basic packages):

Creating the Vagrant workspace:

vagrant init ubuntu/trusty64;
vagrant up; vagrant ssh;
vi Vangrant # and then port forward 8080 to 8080 on the host

Creating the boilerplate:

mkdir myapp; cd myapp;
sudo apt-get update;
sudo apt-get install git;
sudo apt-get install npm;
sudo ln -s /usr/bin/nodejs /usr/bin/node;
npm init;
sudo npm install -g bower;
bower init;
touch main.js
touch index.html
git init
vi .gitignore
# include the following inside your .gitignore file:
mode_modules
bower_components
# back to the command line:
bower install --save angular
bower install --save ui-router

HTML / JS basic bootstrap

main.js

angular.module(“MyAppName”, [‘ui-router’])

.config(function ($stateProvider, $urlRouterProvider) {

});

index.html

<head>
<title>
My App Title
</title>
</head>
<body ng-app=MyAppName>
<h1>My App</h1>
<div ui-view></div>
<script src=bower_components/angular/angular.js></script>
<script src=bower_components/angular-ui-router/release/angular-ui-router.js></script>
<script src=main.js></script>
</body>

Quickly testing the page without setting up apache:

sudo npm install -g http-server

http-server

vagrant: the basics

Dependencies: VirtualBox or VMware (virtualization software)

# To add new boxes you can run locally:

vagrant box add <the name of the box here>

# the list of boxes at:

https://atlas.hashicorp.com/boxes/search

vagrant box list    # gives you the list of boxes locally available

# to use one of those:

cd <the directory you want to work with vagrant>

vagrant init

vagrant init ubuntu/trusty64  # ubuntu/trusty64 is the name of your local box

vagrant up # to start the virtual machine

vagrant suspend   # put your machine to sleep, all save to disk

vagrant resume   # bring it back up

vagrant halt     # turn off your virtual machine, but things will still be kept in disk for later use

vagrant destroy  # machine is annihilated, but the files are still kept in disk, deeper hibernation

vagrant reload # halth and up equivalent

vagrant ssh  #ssh to the virtual machine

cd /vagrant/  # this is a shared folder between your local computer and your virtual machine

Inside your Vagrantfile configuration

# remember: this file must be inside your root folder for your VM

# to make a server running on port 80 in your vm accessible from outside:

config.vm.network :forwarded_port, 80, host: 8080 

# to have shared files between your VM and your local machine:

config.vm.synced_folder “../data”, “/vagrant_data”

the /vagrant_data file will actually be located in the root folder of your virtual machine “/” (not your home directory)

# to run shell commands at the end of the machine coming up, comment out:config.vm.provision “shell” (either put your commands inline here, or do a :path to the file that contain the commands)

# you can also just run the provision part of vagrant by running:

vagrant provision

# to remove local boxes:

vagrant box remove <name of the box to remove>

# to use the same ssh keys as in the host machine (inside the vagrant instance):

config.ssh.forward_agent = true

vagrant and puppet

vagrant ssh; which puppet # to make sure you have puppet

# to install it (if missing):

apt-get install puppet

# to point your provisioning to puppet (inside your Vagrant file):

config.vm.provision :puppet

# this will make provisioning to look for the following file for configuration:

manifest/default.pp

vagrant and rails 

modify the following line (to port forward to the external world from your VM):
config.vm.network “forwarded_port”, guest: 3000, host: 3000

if you want to port forward using rails, remember to startup your rails app as the following:

rails s -b 0.0.0.0

The basic commands to get a rails app ready inside your Vagrant folder (and even throwing Heroku in the mix):

sudo apt-get update
sudo apt-get install curl
curl -L https://get.rvm.io | bash -s stable

# if the above fails, try:

gpg –keyserver hkp://keys.gnupg.net –recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3

and:

command curl -sSL https://rvm.io/mpapis.asc | gpg –import –

and then command again if the first one fails
source ~/.rvm/scripts/rvm
rvm requirements
rvm install ruby
rvm use ruby –default
rvm rubygems current
gem install rails

rails -v

Note: if you have trouble running bundle install because of nokogiri, try the following:

$ sudo apt-get install libxml2-dev libxslt1-dev

Also, if you have trouble installing postgres (Can’t find the ‘libpq-fe.h header error) then try this before bundle install:

sudo apt-get install libpq-dev

If you end up using postgres for your local ubuntu dev environment, you will need to setup the vagrant user as a database creator:

$ sudo -i -u postgres

# CREATE ROLE vagrant LOGIN;

ALTER ROLE vagrant WITH CREATEDB;

# \q

Inside database.yml, don’t forget to specify postgres as your database of choice:

 adapter: postgresql

$ rake db:create

$ rake db:migrate

And finally, the heroku tools:

wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

 

Vagrant and git

sudo apt-get install git

 

Vagrant and node.js

The following three commands will get you setup:

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Vagrant and bower (or any npm that don’t seem to run inside ubuntu)

sudo ln -s /usr/bin/nodejs /usr/bin/node

Vagrant and ionic

If you are having trouble making port forwarding work at “ionic serve” time, try this:

$ ionic serve –address 0.0.0.0

And also, remember to port forward both ports in your vagrant file (not only the server one):

  config.vm.network :forwarded_port, host: 8100, guest: 8100

  config.vm.network :forwarded_port, host: 35729, guest: 35729