Using Vagrant for a shared front-end web design team tool

113 views
Skip to first unread message

John Egan

unread,
Aug 13, 2015, 5:01:04 PM8/13/15
to Vagrant


**I’m trying to build a Vagrant Box with:**

- Ubuntu
- PHP
- Ruby
- Vim or nano
- Git
- cURL
- GD and Imagick
- Node
- NPM
- MySQL (nice to have)

**Node Stuff**

- Grunt
- Gulp
- Bower
- Yeoman
- Browser sync

**Other requirements**

- OS agnostic (mostly on Windows and Mac though)
- Ability to store _all_ config files in Git repo (with rest of the project)
- Ability to clone from Git, run Vagrant up and have provisioning scripts (shell, Puppet, Chef?) run and set up everything
- Ability to read package.json, gruntfile.js, gulpfile.js and other config files from host OS directory and execute on the guest OS, and then synch back to the host OS
- Ability to run web server (Apache, but open to using NGINX) and preview code changes

**Audience**

Designers, not developers. Mix of Windows and Mac users, most of whom are intimidated by the command line. 

I want these people be be able to install Git, Vagrant and Virtual Box, run the clone command, run `vagrant up`, and then go about the business of building HTML and CSS (using SASS) and have things ‘just work’. within the guest machine

**Special challenges**

Half of our team is our in-house web design team behind a corporate firewall and proxy server, the other half is contractors and our agency partners. The in-house team needs a vagrant box that is configured to route all external traffic through our corporate proxy server, while everyone else can use out of the box configuration. So, if there’s a way for a single box and Vagrant file to check network, IP address, etc… and optionally configure the proxy just for those on our corporate network, that would be awesome (I’d rather avoid managing two different repos or vagrant files, but will do so, if that’s the easiest way)

**What I’ve tried so far**
There is actually a [Github project](https://github.com/HBRGTech/daisy) that almost does exactly what we want. But, two problems. First, it has a bit more than we need, and most importantly, I want to know how this works so I can fix thing should anything go wrong (or need to change). 
I've also been working with [ScotchBox from Scotch.io](https://box.scotch.io/).  It actually comes with all the right tools, but I've been struggling to get a shell script to run `npm install` in the correct directory on the initial `vagrant up` command, then then start Grunt for the initial load and all subesquent starts. 
I also tried [PuPHPet](https://puphpet.com/), but found myself in way over my head.

so... any help would be greatly appreciated. I know a lot more about Vagrant than I did a week ago, but there are still some big gaps in my knowledge, making this a really slow process.


Alvaro Miranda Aguilera

unread,
Aug 13, 2015, 8:58:36 PM8/13/15
to vagra...@googlegroups.com, packe...@googlegroups.com
Hello John

Nice task you got there.

The easiest way will be use packer (packer.io) to build the base box.

If you are ok with 1GB of RAM and 20GB of disk at the moment the box
is created, you can ue atlas to build the box for you.

If you want more than 20GB of this, you can build locally and still
use atlas to host the box.

attached is a packer ubuntu 14.04.2 project that you can reuse as
starting point.

As for node stuff, what I have found is this.

As root you install node and the packages you can with -g (global)

then, as vagrant user you can install the local stuff and clone the project.

sample node+ember script:
https://github.com/anthshor/packer-ubuntu14042-ember1131/blob/master/scripts/ember.sh


then, on the vagrant file, you can have more than one script to be
run, however this is what I have found:

1. better put as much of the heavy lifting on the base box, so vagrant
up will be faster
2. avoid sudo/su to users in Vagrant, use priviledge: false instead

for 2, by default vagrant will run the scripts as sudo, you can
override that as:

config.vm.provision "shell", privileged: false, path: "provision.sh"

in that way that script will be run as vagrant user.



For a friend of mine, we did :

- packer project
https://github.com/anthshor/packer-ubuntu14042-ember1131

- Vagrant project
https://github.com/anthshor/backend-todomvc-embercli

- todo mvc ember project
https://github.com/anthshor/todo-mvc

So he can focus on his learning on embjer and destroy/update the base
box if required.


If you require any help on this, more than happy to help!
Alvaro.
> --
> This mailing list is governed under the HashiCorp Community Guidelines -
> https://www.hashicorp.com/community-guidelines.html. Behavior in violation
> of those guidelines may result in your removal from this mailing list.
>
> GitHub Issues: https://github.com/mitchellh/vagrant/issues
> IRC: #vagrant on Freenode
> ---
> You received this message because you are subscribed to the Google Groups
> "Vagrant" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to vagrant-up+...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/vagrant-up/2e925d35-f2a2-4bc1-9d68-d1f1a76082a5%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
ubuntu_14042.zip

John Egan

unread,
Aug 24, 2015, 10:42:37 PM8/24/15
to Vagrant, packe...@googlegroups.com
I've been working on and off on this for the last several days, and I'm struggling. I followed the Atlas tutorial, and now have a Vagrant build on Atlas, but its just a barebones. So, I've been going through the template.json file and script files created during the tutorial. 

I have some very limited experience in setting up apps on an Ubuntu VM before, but not scripting it out. and once I do have my script ready, how do I test it? I've seen your examples, which have helped with customizing the dep.sh file using apt-get. But, how do I make changes to Apache config files? 

I'm starting to figure this out, but its been a slow process, so any help would be greatly appreciated.

thanks!
Reply all
Reply to author
Forward
0 new messages