Focus on Development

Posted on:
June 28, 2016
Posted in:
Computers, How to Adult, Programming, Web Dev

UPDATE: I’ve put together a little screencap video for anybody who’d like to see this tutorial instead of read it. The video is a bit long but since there might be novices watching I wanted to show that I’m not skipping any steps.


Sometimes when you’ve gotta get something done you just need to tune out the rest of the world and get cracking. Creating a distraction-free environment is an excellent way to make it happen. First, let’s decide if this is the right way for you to go:

Pros:

  • Distraction free: A virtual machine only has the files and applications you choose to place on it.
  • Context switching: You can pause and put away a virtual machine when you want to switch tasks.
  • Sandboxing: You have a place to test server configuration changes that can’t negatively affect any coworkers.
  • Easy backups: You just have to make sure you backup your VMDK (virtual machine disk) file periodically.
  • Portability: If your computer breaks or you upgrade, you can just restore the VMDK file from your backup and be up-and-running in your same old workspace in a few minutes.
  • Open Source Software: Everything in this tutorial is free and legal to download and copy at will. If you follow the steps I outline you’ll never have to worry about licensing issues/conflicts.

Cons:

  • Open Source Software: This route may not be the best one for web designers. While (I’ve been told) there are many great design tools available for Linux, I don’t think I know any web or print designers who use them.
  • File Portability: Getting files on/off the virtual machine can be a bit of a pain. It’s best if you have some way to access your work files over the network through a code repository or a network share.
  • Resource Hungry: Emulating an entire other PC on your PC is a resource-hungry process. If you typically work on battery power or you’re short on RAM or HDD space this may not be the best fit for you. You should expect to devote 1.5 GB of RAM and up to 16GB of HDD space to this virtual machine (more if you plan to develop a project that uses a lot of media files).

Download Software

If you’ve read all that and you think that you’d like to at least try setting up a virtual machine web development workspace, you’ll need to download two pieces of software:

  • Oracle VM VirtualBox (https://www.virtualbox.org/): Software to run your virtual machine. VirtualBox is maintained by Oracle, but is distributed as open source software under GPLv2.
  • Ubuntu MATE (x86/32-bit) (https://ubuntu-mate.org): In theory you can use any flavor of Linux that you like, but if you’re going to follow along with my instructions and screenshots then download Ubuntu MATE 16. I chose this specific one because it’s focused around using fewer resources than most current Linux desktop distributions. Note: be sure to grab the 32-bit version as the 64-bit version will consume about 50% more RAM.

Create the Virtual Machine (VM)

Once you’ve installed Oracle VM VirtualBox, open it up and click the blue “New” icon in the toolbar. Name your VM and make sure you configure it for 32-bit Ubuntu Linux. This machine should only need 1.5 GB of RAM for the installation. If you find you need more memory for your actual work you can always change this setting later.

Basic configuration

Next configure the hard drive for your machine. Ubuntu MATE will need at least 10GB to install – but choose a 16GB VMDK file format. VMDK files can be used by multiple different types of virtualization software and they can be compacted (so that the parts of your VM’s hard drive that are “free space” don’t take up space).

Once that’s completed, click on the “Settings” icon in the toolbar and mount the Ubuntu MATE installation ISO to your VM’s DVD drive. The hard drive is blank right now, so you’ll need to boot off the disc and install.

Mounting the ISO to the DVD drive

Installing Ubuntu MATE

It may sound daunting to non-Linux users to install an OS in this case you’ll be using basically all the default settings. Start your VM and it should boot off the DVD and, after a few seconds, display this screen:

Ubuntu MATE OS Installation Screen

Simply choose to Install Ubuntu MATE. Throughout the install, I would recommend the following options:

  • Erase the entire hard disk (default). Don’t worry about how apocalyptic that sounds – remember we just created an empty disk for it to use.
  • Download updates. These are mostly security and stability updates.
  • Timezone: Wherever you are.
  • Keyboard Layout: Whatever you have. There’s a layout detector there – it’ll ask you some yes or no questions about what keys are present an narrow it down.
  • Name/Username/Password: Entirely up to you. This is your space.
  • Log in automatically: I wouldn’t choose this if other people have access to your VMDK file.
  • Encrypt my home folder: If you are very worried about other people having access to your VMDK file, check this box.

I don’t encrypt my home folder because I have no confidential information stored on my virtual machine. If you need to store confidential information you can encrypt your home folder in the VM, or you can store your VM somewhere secure – like in a hard drive protected by bit locker.

Once you’ve set your options, the installer will begin copying files and then ask you to restart. Click the button and, sadly, it’ll crash. That’s okay – close the VM window and select “Power off the machine.”

First Boot

I’m not sure why the installer crashes – I think it has something to do with the way VirtualBox handles restarts – but you should now be able to start the VM and boot into Ubuntu MATE for the first time.

Ubuntu MATE welcome screen

When you log in and see the welcome screen, click “Software” in the lower left hand corner. We want to install Synaptic package manager – the standard tool for installing software on Ubuntu Linux systems. It is advanced and complicated but it’s also really good if you know the exact name of the thing you want to install.

Install Synaptic Package Manager

The next thing we have to install are some drivers that help Linux work better with VirtualBox. Launch Synaptic Package Manager when it’s ready and search for “virtualbox.” Scroll down the list until you find virtualbox-guest-dkms. Click on it and select Mark for Installation – at which point Synaptic will tell you that if you want to install that, there are a bunch of other things that need to come with it. Tell Synaptic to mark those too.

virtualbox-guest-dkms marked for installation

Finally, click the “Apply” button and it’ll download and install the software. Once everything is installed, restart the virtual machine (click the power icon in the upper right hand corner of the VM’s screen).

Once you’ve restarted and logged in again, open the Displays configuration tool from the toolbar at the top of the screen. You should be able to set the resolution of your display to something more useful than 1024×768.

Here’s where the Displays tool is hidden.

Finally, some breathing space! You should be able to push your VM all the way up to your monitor’s native resolution – but for the purposes of clear screenshots I’m going to keep my resolution relatively low.

Now let’s go back into Synaptic Package Manager and install a web development stack. In case you lost it, Synaptic Package Manager can be found in the toolbar under System > Administration.

Installing a Web Stack

A web stack is just the set of programs needed to serve web pages. I’m going to outline how to set up a really basic web stack for PHP/MySQL development. I’m not going to dive too deeply into configuration since you could literally write books about that. I just want to show how to get these things installed successfully.

From synaptic you can search for and install these packages. Each one will automatically install whatever additional packages they need to operate.

  • apache2 – Apache web server
  • libapache2mod-php or libapache2mod-php7 – Apache module for PHP. Install whichever you need. (PHP7 makes better use of code caching so it should be faster and less resource intensive.)
  • php-mysql or php7.0-mysql – The module that allows PHP to connect to MySQL
  • mysql – The web’s most common free database
  • mysql-workbench – Some tools for connecting to and administering MySQL
MySQL installation in progress

Again, there’s just not enough space in this quick tutorial to go into web server configuration. However there are three things you should do to ensure minimum functionality.

Enable SSL

This step is actually very easy since we don’t care about installing a valid security certificate for a VM testbed. Open a terminal (Applications > System > MATE Terminal) and enter the following commands:


sudo a2enmod ssl
sudo a2ensite default-ssl
sudo service apache2 reload

Enable Writing to the Web Root

The root folder for your website is currently owned by root, which means that you can’t actually write any files there. Before you close that terminal, let’s change the ownership for that folder.


sudo chown -R matt:root /var/www/html

Of course, replace “matt” in the code above with your username.

Test The Configuration

Open Firefox (you should see the icon in the toolbar) and navigate to https://localhost. You’ll have to add a security exception for your site’s certificate but once you do you should see the default Apache2 Ubuntu Default Page.

Apache2 Default Page over HTTPS

Now let’s test PHP and MySQL. From the toolbar select Places > Computer > File System and navigate to /var/www/html. Once there, right click > Create Document > Empty File and name it phptest.php. Double-click to open it in a text editor and put in this code:


<?PHP // test MySQL connection ini_set("display_errors", "1"); $link = @mysqli_connect("localhost", "root", "12345"); var_dump($link); // output other data phpinfo(); ?>

Again, replace the password above with whatever you specified during the MySQL installation process. In Firefox, load https://localhost/phptest.php and you should see something like this:

phptest.php

Congratulations! You now have a working web server stack.

Finishing Touches

On the toolbar, look under System > Control Center to find a lot of options for configuring Ubuntu MATE. You can configure the system to look however you want using the tools under Look and Feel.

Especially of note – open the Windows tool and you can disable the software compositing window manager. You lose shadows behind your windows but it should speed the system up a little bit.

You’ll need to get a good code editor – I’d recommend Visual Studio Code. You can get a copy at https://code.visualstudio.com. Just be extra sure you download the 32-bit .deb file. Linux software typically comes in two package types: .deb is for Debian and Ubuntu variants, .rpm is for Red Hat variants.

There are a bunch of VirtualBox shortcuts using the “host key” (right alt by default). Host+F will take you in and out of full-screen mode. If your goal is distraction-free work, this is a critical combination to know.

Happy Trails

Enjoy your new distraction-free web development workspace!