Access Ubuntu VM Files from a Windows Host

Web Design & Development
This entry is part 4 of 4 in the series WordPress Development Environment.

I do most of my WordPress development using a test environment that I installed on a Ubuntu Virtual Machine (VM). This let’s me play around as much as I want without any risk to my production website or my computer; everything is contained within the VM, and it costs me nothing because I only use open-source and/or free software (read about it at http://wp.me/p1iF71-4x).

However, I prefer to do the actual development and testing from Windows 7 because I prefer using it to any other OS. While my VM is running my WordPress installation, I can access the files from my Windows host OS and use development tools like Notepad++ to access the WordPress files via my home network.

To accomplish this, Ubuntu will need to install a sharing service so Windows can “see” it using the virtual network adapter. When we’re finished, the VM will appear to be just another computer on the network.

Enable Sharing

First, navigate to opt/lampp/htdocs and right-click on the wordpress folder. Select “Sharing Options” to open the Folder Sharing window.

Select "Sharing Options" for the wordpress folder.
Select "Sharing Options" for the wordpress folder.

Check the box for “Share this folder” and click the Install Service button when prompted. You’ll need to enter your password.

Screenshot of window prompt to install the sharing service.
When prompted, install the sharing service.

Once the service has been installed, you’ll see the Change Applied window as confirmation.

Screenshot of Changes Applied window.
Close the window once the changes have been applied.

Close the confirmation window, then click the Restart Session button in the new window that pops up.

Screenshot of Restart your session prompt.
Restart your session to have the changes take effect.

Log back in to Ubuntu to enable the new service. Now you should be able to see the VM as a computer on your network from the host OS.

Screenshot of network with VM computer.
The VM is now visible as a computer on the network.

When you access it, you’ll need to provide the username and password of your Ubuntu login. I suggest checking the “Remember my credentials” box if your host OS is already password-protected in order to avoid having to re-enter the login information in the future.

Screenshot of network login request for access to the VM.
Enter your Ubuntu login credentials to access it via the network.

Notice that the wordpress folder is not visible? That’s OK. Because the sharing service wasn’t installed until now, the folder wasn’t actuall shared when we checked the box to share it previously. Go back into Ubuntu and (re)share the folder. This time you won’t be prompted to install the sharing service. Instead, you’ll have to check the box for “Allow others to create and delete files in this folder” in order to allow access to the files from another computer (i.e. your host OS). You can also check the box for “Guest access” if you don’t want to enter your Ubuntu login information in order to access it (this gives anyone on your home network access to the folder, so use with caution).

Screenshot of Folder Sharing window to allow access to the wordpress folder over the network.
Share the wordpress folder and allow others to create and delete files in this folder.

Now you can refresh the view of your VM in Windows and you’ll see the wordpress folder.

Screenshot of wordpress network share folder.
The wordpress folder is now shared over the network.

From this point you can create, modify, and delete files in the wordpress folder just as you would in Windows. Notepad++ and other development tools should have no problem accessing files within this folder.

Configure the WordPress Site for Access from Another Computer on the Network

In order to test your development changes, you’ll want to open up your WordPress test site in a browser frequently. You can switch to the VM and open it in Firefox, but this gets a little tedious because it requires a few extra clicks and/or keypresses.

To access your WordPress site from the host OS, you can type the IP address of the VM or the network share name followed by “/wordpress” in your browser. The first time you do this, however, you’ll probably notice that the site lacks any styling or images. This is because by default WordPress looks for most of its supporting files via the “localhost” path. On the VM, localhost points to the XAMPP server running WordPress. On the host OS, however, localhost points to the host computer, not the VM. This is why none of the supporting files are loaded.

To fix this, we need to tell WordPress to look in another location besides “localhost” that results in the correct path. Open your WordPress site on the VM, login to the admin dashboard, and go to the Settings page.

Change the WordPress address (url) setting and the Site address setting to “http://your-vm-computer-name/wordpress” or the IP address of your VM. I used “http://josh-virtualbox/wordpress” because the computer name of my VM is “josh-virtualbox.” Enter the appropriate information for your VM, and make sure it is spelled exactly the way that your host OS sees it on the network.

Screenshot of WordPress settings page with computer name in the WordPress address and Site address fields.
Enter the computer name or the IP address of the VM in the WordPress address and Site address fields on the settings page.

Note: If you use the computer name of the VM, the WordPress site will not load properly in the VM if you try to view it in Firefox (because that path isn’t valid to the VM). If you use the IP address, it will work in the VM and the host OS. However, if the IP address changes (e.g. if it is assigned dynamically by DHCP), the site will not load properly in either OS. Set a static IP for the VM if you decide to use the IP address instead of the computer name.

I suggest using the computer name for now. You can always access the admin settings for the site from the host OS and change it to an IP address or back to localhost if you need to view the site in the VM. For now, though, you’ll be doing most of your development in Windows, so there’s no need to access the site from within the VM.

That’s it for now! Once these changes have been made, you’ll be able to use your WordPress development environment from your host OS (or any computer on your network) and view the site as you make changes. If you have any suggestions to improve on these steps, leave them in the comments!


Comments

  1. I used these guides to get me running Ubuntu on a virtual box. I can not stress enough how useful this was. Ill be sharing it with friends in the future. The version of ubuntu available has changed, so some tidbits were different, but otherwise the overall idea was fantastic. In the future, I would love to see a post about moving files and databases from a development server to a hosting server. Thank you! -Lenny

Comments are closed