HOME / BLOG /

Tutorial: Getting started with web development using Vagrant/VirtualBox

Due to the interest received towards development/programming, in this blog post we're going to take the time to detail how to get started with web development using a local virtual machine environment.  We'll also go over how to write a simple "Hello World" script in PHP.  

  • git installed on host machine
  • Install VirtualBox
  • Install Vagrant
  • Ensure VirutalBox + Vagrant are compatible.
  • PuTTY or some other SSH client (Windows only, native in Linux)

Getting Started

Vagrant + VirtualBox both work on Linux and Windows systems.  First you need to install Vagrant and a VM client (VirtualBox recommended) in order to get started.  Instructions on how to install Vagrant with VirtualBox are widely available.

Here are a few guides we find reputable that you can follow:

Once you have installed vagrant, you're ready to begin.

Quick Note: Some versions of vagrant don't play well with some versions of virtualbox.  I have had issues in which the folder that is supposed to sync between the VM and host operating system didn't.  This does happen, so if something isn't working properly, it might be best to stop and evaluate the versions of vagrant and virtualbox you're using. (Try changing versions of vagrant or virtualbox.)

Acquiring a VM

Vagrant comes with pre-packaged VMs that make it easy for a user to get started.  Vagrant is basically an interface between the user and VirtualBox allowing for pre-configured items to be setup.  For this example, we're going to use "Scotchbox" – https://box.scotch.io.  This is a pre-packaged VM that comes with several features and a sync'd folder already setup for convenience.  There are many different boxes that you can use and different ways to add them (there's even a box add command in vagrant that you can use).  

For simplicity, we're going to just clone the git repository for scotchbox to get started.

  1. Pick a directory that you would like to use and have your sync'd folder in.
  2. Clone the git repository for scotchbox into your chosen directory

 

git clone https://github.com/scotch-io/scotch-box.git

 

This should put a 'public', 'vagrantfile', and '.gitignore' file in that directory along with a hidden .git directory.Directory Listing

Next, open a command prompt (in Windows) or a terminal (in Linux) and cd to the directory that the Vagrantfile is in (where you cloned the repository).  In the directory where the vagrant file is in, issue the command: vagrant up

--- and you should see something like this:

 

C:\Users\wrp475\scotchbox\scotch-box>vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Box 'scotch/box' could not be found. Attempting to find and install...
    default: Box Provider: virtualbox
    default: Box Version: >= 0
==> default: Loading metadata for box 'scotch/box'
    default: URL: https://atlas.hashicorp.com/scotch/box
==> default: Adding box 'scotch/box' (v2.5) for provider: virtualbox
    default: Downloading: https://atlas.hashicorp.com/scotch/boxes/box/versions/2.5/providers/virtualbox.box
    default: Progress: 100% (Rate: 29.3M/s, Estimated time remaining: --:--:--)
==> default: Successfully added box 'scotch/box' (v2.5) for 'virtualbox'!
==> default: Importing base box 'scotch/box'...
==> default: Matching MAC address for NAT networking...
==> default: Checking if box 'scotch/box' is up to date...
==> default: Setting the name of the VM: scotch-box_default_1492630164338_11183
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
    default: Adapter 2: hostonly
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
    default:
    default: Vagrant insecure key detected. Vagrant will automatically replace
    default: this with a newly generated keypair for better security.
    default:
    default: Inserting generated public key within guest...
    default: Removing insecure key from the guest if it's present...
    default: Key inserted! Disconnecting and reconnecting using new SSH key...
==> default: Machine booted and ready!
==> default: Checking for guest additions in VM...
    default: The guest additions on this VM do not match the installed version of
    default: VirtualBox! In most cases this is fine, but in rare cases it can
    default: prevent things such as shared folders from working properly. If you see
    default: shared folder errors, please make sure the guest additions within the
    default: virtual machine match the version of VirtualBox you have installed on
    default: your host and reload your VM.
    default:
    default: Guest Additions Version: 4.3.28
    default: VirtualBox Version: 5.1
==> default: Setting hostname...
==> default: Configuring and enabling network interfaces...
==> default: Mounting shared folders...
    default: /var/www => C:/Users/wrp475/scotchbox/scotch-box

 

After this is finished, your virtual machine should be running.  To confirm that the VM is running, you can issue the command:

vagrant status

--- and you should see something like this:

 

C:\Users\wrp475\scotchbox\scotch-box>vagrant status
Current machine states:
 
default                   running (virtualbox)
 
The VM is running. To stop this VM, you can run ‘vagrant halt’ to
shut it down forcefully, or you can run ‘vagrant suspend’ to simply
suspend the virtual machine. In either case, to restart it again,
simply run ‘vagrant up’.

 

Connecting to the Vagrant Box

Vagrant boxes come with a variety of different credentials and setups, depending on the box.  You can check the configuration by issuing:

vagrant ssh-config

in the directory of your vagrant file.  You'll see something like this.

 

C:\Users\wrp475\scotchbox\scotch-box>vagrant ssh-config
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/Users/wrp475/scotchbox/scotch-box/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL

 

If you have an ssh client installed in your PATH (for windows) you can just issue the command:

vagrant ssh

to connect to your VM with the private key.  Otherwise, you can use PuTTY (or your favorite ssh client) to connect to:

127.0.0.1 port 2222 
Username: vagrant 
Password: vagrant

You should authenticate successfully and be able to confirm that you are connected and see the MoTD below:

MOTD

 

Accessing the Web Server

By default, scotchbox provisions the IP address 192.168.33.10 – You can use this IP address to access your server.  For example, if you browse to http://192.168.33.10/ , you should see the following upon loading:  

Default web page

(If you don't, you should confirm that your Vagrant VM is up and running.)

So, where is this pulling from on the server, you might ask?  It is actually your sync'd folder.  On the server it is located at /var/www/public/index.php .  In your sync'd folder (where your vagrantfile is), it is located in the "public" directory (part of the stuff you cloned in the past).  So now you're pretty much free to drop anything into the public folder and see it served by web on the scotchbox.  

Here is a list of credentials if you do not wish to keep the default index.php file (you can also rename the file to index_old.php and be able to access it at http://192.168.33.10/index_old.php) :

ssh: vagrant/vagrant (has sudo and can sudo su)
mysql: root/root
postgresql: root/root

The nice feature about the sync'd folder is that it allows for you to edit your files on the web using whatever IDE that you want on the host machine.  Your changes automatically propagate to the virtual machine and are loaded.  This also means that you also have the choice to perform git commits from either the host or the virtual machine. 

"Hello World" PHP Script

In the public directory of your vagrant box (/var/www/public/ or the "public" folder in "scotchbox" folder on the host machine), create a new file named "HelloWorld.php".

Next, copy paste the following code into the file:

<?php
  
/* A simple "Hello World" script */
  
echo "Hello World";
  
?> 

Now, navigate to: http://192.168.33.10/HelloWorld.php and you should see "Hello World" printed on the screen.  


Shutting Down Vagrant Box

As with host machines, you should always shut down your virtual machine gracefully, rather than abruptly. Killing your virtual machine can result in file or data corruption.

When you are ready to shut down your virtual machine, follow these steps:

  1. In the command prompt (on Windows) or terminal (on Linux) on the host machine, navigate to the directory holding your vagrant file
  2. Issue the command:
    vagrant halt
  3. VM will attempt to shut down gracefully. Let it.
     

Anytime you want to start back up, just navigate into the directory, run a 'vagrant up'; and the machine will boot up.  You should shut down your virtual machine before shutting down your computer to avoid any issues.  

Destroying the VM

In the same directory as the vagrant file, you can destroy the machine by typing:

vagrant destroy

This removes the machine from VirtualBox.  You can start it up fresh again afterwards by issuing

vagrant up

in the directory of the Vagrantfile.  This is typically only recommended if an issue develops with the VM.

Written by Ryan Parker, Software Developer/Analyst
Questions or comments? The best and easiest way to contact us is via the CNS Help Desk form.

See also: Linux, Software, VM, Web Site, Windows