Write a post

Create Portable Web Development Environments in 5 Minutes

Published May 10, 2017Last updated Jun 05, 2017
Create Portable Web Development Environments in 5 Minutes

Create Portable Web Development Environments in 5 Minutes

2 years ago, I stumbled across something that was a total game changer when it came to setting up web development environments. Today, whenever I need a development environment for a website or web app, I just click a few buttons, execute a command and I am ready to go within 5 minutes. And you know what's cool? I can pick and choose between various web servers, database servers, programming languages and much more. But it does not end there: I can also share those environments with anybody. All they have to do is execute a command and they are ready to go as well. Hooked? I sure was. Before you ask, no, you don't need to be a DevOps specialist. Ready? Lets go.

Install VirtualBox and Vagrant

VirtualBox is an open-source hypervisor that allows you to run a completely isolated operating system inside of your current operating system. However, besides installing VirtualBox, you won't really have to do anything else with it. This is where Vagrant enters the picture: Vagrant is an open-source tool that lets you easily build and maintain complete server environments. In the context of this tutorial you can think of it as a remote control for VirtualBox. Vagrant just needs one simple configuration file to do its thing. And before you thought life couldn't get any easier: you don't even need to create that configuration file yourself. Welcome to paradise. Before we continue, please download and install VirtualBox and Vagrant.

Get Help from PuPHPet

Vagrant is very flexible and powerful. You can, for example, use it to set up a web development environment that exactly matches your production environment. However, if you just want to get started quickly, you can create a Vagrant configuration file with a web app called PuPHPet. To make things easier for you, I have created a simple PuPHPet configuration file that you can drag and drop into the PuPHPet web app. From there, you can edit the settings as required or leave everything as is if you only need a web server, PHP and a MySQL database. PuPHPet tries to do a lot of things for you, so don't get intimidated by all the settings.

Start Your Web Development Environment

After you have downloaded and extracted the PuPHPet configuration package, you will need to open a terminal of your choice and change the working directory to the extracted folder. In Windows 10, you can accomplish this by opening the extracted folder and entering cmd in the Explorer address bar. In macOS, you can just drag the folder onto the Terminal application icon. After the terminal window is open, enter vagrant up and watch the magic unfold. In a few minutes, a complete web development environment will be waiting for you.

Go Play

Before you can go play in your new web development environment, you will need to take a few more easy steps. If you have customized my PuPHPet configuration, adjust the following steps accordingly:

  1. Move the code base for your web app or website into the extracted PuPHPet folder.
  2. Add 10.34.131.23 web.dev www.web.dev to the Hosts file of your operating system. This is either /etc/hosts on macOS and Linux or C:\Windows\System32\Drivers\etc\hosts on Windows.
  3. Configure the MySQL database connection for your website or web app if required.
    Host: localhost
    User: root
    Password: development
    Database: development
  4. Open www.web.dev in your browser and have fun.

You can also send the folder to your peers or push it to a version control system. People will only have to install VirtualBox and Vagrant, run vagrant up and follow step 2 above to get an identical web development environment.

Closing Words

While this tutorial introduces everything you need to set up portable web development environments, it only scratches the surface of what is possible with Vagrant. Would you like to learn more? The Vagrant documentation will show you how to use all the advanced features, and if you have any questions, feel free to reach out to me.


I create things that help you experience freedom in life. Check out my website to learn more. Live long and prosper!

Discover and read more posts from Toby Giacometti
get started
Enjoy this post?

Leave a like and comment for Toby

1
Best Web Development & Programming Blogs for 2017
New Year’s Resolutions to Inspire You to Become a Better Developer
What is JavaScript and How it works under the hood