Skip to content

Instantly share code, notes, and snippets.

@drawcard
Last active August 29, 2015 14:14
Show Gist options
  • Save drawcard/bb79c286451b7b77e7fd to your computer and use it in GitHub Desktop.
Save drawcard/bb79c286451b7b77e7fd to your computer and use it in GitHub Desktop.
Vagrant + Web Dev

Setting up Vagrant

Vagrant allows you to quickly set up a headless VM environment (eg. Ubuntu Server + LAMP) on a local machine within Virtualbox (just type vagrant init + vagrant up and you'll have a new VM with SSH running in about 10 minutes). There are several advantages over traditional VM containers, or XAMPP / MAMP / other LAMP sandboxes:

  • All of your customised VM settings are stored in a config file ./Vagrantfile which can be shared with anyone to recreate your environment
  • You can easily nuke the environment if something goes wrong (vagrant destroy) and reinitialise a fresh enviroment exactly as you like it, in a matter of minutes - backup your DB's first of course!
  • Choose a web hosting provider running Vagrant and you can instantly set up your local working environment remotely (or vice versa).

More at http://www.vagrant.com/

Setup

Using PuPHPet

Puppet is a utility that Vagrant uses to install various packages, and execute commands to futher tailor the default VM environment you choose. You can do this manually by editing config.yaml but it's far easier to use an online GUI: PuPHPet to do this. Here you can specify things like installing htop and vim in your VM, or setting up Ruby with specific gems, or Node.js with specific Node modules etc. All of this goes into a ZIP file that contains a custom ./Vagrantfile + Puppet config folder, which you can also share with others very easily.

Setup

  • Use PuPHPet to customise your environment setup, which generates create a ZIP file containing the files to create your Vagrant environment: https://puphpet.com/. PuPHPet is also available in GitHub so you can clone and run it wherever you want.

  • For web dev work you'll typically want to set up a LAMP stack, with Git, Ruby, Node.js + NPM, Grunt, Bower, SASS Gems etc. which can all be specified at PuPHPet.com.

  • Unzip the ZIP file to the location on the host machine you want to store your dev files (Note: you can share this ZIP file with others to help them create an exact matching environment to yours). Note that you can also edit ./puphpet/config.yaml to manually tailor the environment you specified, if you forgot to add a package for instance.

  • Go to that location in Terminal and run vagrant up

  • Vagrant will download the VM box based on the specs found in ./Vagrantfile and set up an offshoot environment for you to work in, and will run through the PuPHPet folder to add all the bells and whistles you specified at https://puphpet.com/

  • Once complete, you can ssh into your Vagrant server: vagrant ssh

Viewing your web files

  • Take a note of what your IP address setting is in config.yaml: eg. mine is private_network: 192.168.56.101
  • Edit your localhost file to map your own alias to that IP address: eg. 192.168.56.101 local.dev
  • In your browser visit local.dev and you should see your "It Works!" page if you have your shared folder mapped correctly to /var/www/ on your VM (which PuPHPet will take care of).

Things to do after initial setup

  • Edit /etc/php5/fpm/php.ini and increase file upload max size & post max size to something larger than 2MB
  • Install PHPMyadmin: sudo apt-get install phpmyadmin and then create a virtualhost for it: http://serverfault.com/a/525658
  • If you can't make a virtual host, just create a shortcut in your www folder: sudo ln -s /usr/share/phpmyadmin /var/www/phpmyadmin
  • Set up Sass + Compass: rvmsudo gem install sass compass (now you can generate scss sourcemap files)
  • Set up WP-CLI & Drush to easily manage new and existing WP / Drupal installations from the terminal. http://wp-cli.org/ + https://github.com/drush-ops/drush - Excellent for bash scripting.
  • Some useful commands for WP-CLI: wp core update to update your version of WP, wp plugin update --all to quickly update outdated plugins, wp search-replace [...] for DB migrations.
# Turn your production database into a local database
wp search-replace --url=example.com example.com example.dev

Miscellaneous Stuff

  • Install some libraries for Roots / Sage / NPM Development: sudo apt-get install libpng-dev libjpeg-progs libjpeg-dev
  • run git init . in your Vagrant directory immediately so you can keep track of changes to ./Vagrantfile, PuPHPet etc.
  • If you're using DB's eg in a LAMP setup, be sure to run mysqldump periodically to back up your DB's somewhere local in the event you run vagrant destroy and have forgotten that your DB's are within the VM environment. You can also tell Vagrant to mirror your DB's elsewhere: http://discourse.roots.io/t/vagrant-database-setup/1153
  • If you make any changes to your ./Vagrantfile or your Puppet setup, run vagrant provision while the container is running to add those changes into your setup. For instance, if you change the location of your share folder.
  • Use vagrant halt to gracefully shut down your VM, or vagrant halt -f to simulate pulling the plug (not reccommended).
  • Set up multiple VM's for each of your client projects to sandbox each website in case of disaster
  • Clone and set up https://github.com/magicmonty/bash-git-prompt to enable useful GIT bash prompts (to-do: figure out how to automate that in exec-once script folder inside PuPHPet)
  • Setting up scripts that you want aliased into /var/www/ (eg. PHPMyAdmin) can be done based on these steps: http://designinglives.net/how-to-install-phpmyadmin-on-vagrant-box/ (running sudo ln -s /usr/share/phpmyadmin /var/www/phpmyadmin by itself did the trick for me)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment