Categories
WordPress Development

Creating a web and WordPress development environment

After installing Ubuntu Server, using VMWare as explained in my previous post, We’ll have a local development environment for our projects that is fully functional but with only the basic features. We’ll want to use a series of tools in our development stack, that aren’t available from start in our installation and also, have the means to easily edit the files inside our server, preferably without the need to use FTP or other tools, after all this is our local stack.

Installing Ubuntu Server Virtual Machine, using VMware (Part 2)

After installing Ubuntu Server, using VMWare as explained in my previous post, You’ll have a local development environment for your projects that’s fully functional, but only with  the basic features.

You’ll want to use a series of tools in your development stack, that aren’t available from start in the installation and also, have the means to easily edit the files inside your server, preferably without the need to use FTP or other tools, after all, this is your local stack.

In this post I’ll explain how I’ve configured the server to improve the development environment and run the following tools correctly,

  • Samba ( File sharing between the virtual machine and our local system)
  • Git
  • Ruby and Gem
  • SASS
  • Bourbon
  • node.js
  • Grunt
  • Wordmove

1. Install and configure Samba on Ubuntu VM

First step, the obvious, install Samba using root access

sudo apt-get install samba

Next you’ll need to open your Samba configuration file ( /etc/samba/smb.conf ) and add a few lines in order to configure a shared folder, start by opening your configuration file with your favorite editor and then you’ll need to add the following lines to your file:

# The following property ensures that existing files do not have their permissions
# reset to the "create mask" (defined below) if they are changed
 map archive = no

# Notify upon file changes so that Windows can detect such changes
 change notify = yes

[htdocs]
 comment = Htdocs Files
 path = /opt/lampp/htdocs/
 guest ok = no
 browseable = yes
 writable = yes
 create mask = 0664
 directory mask = 0775

In the above, I’m assuming you want to share the htdocs folder from your lampp install.

Next, you need to add a Samba user, with the same name and password as your Ubuntu user account


sudo smbpasswd *username*

To finish this step you need to restart the samba service,


sudo service smbd restart

2. Setting permissions on htdocs folder

In order to be able to edit, add and delete files from the htdocs folder you’ll need to set all the permissions correctly on that folder, to do this you’ll need to change the folder permissions, doing the following:

First you need to create a new group “www” which will have the permissions for this folder,

sudo groupadd www

Next, you’ll change the group on the directory,

sudo chgrp -R www /opt/lampp/htdocs

and then you need to set the correct permissions on that directory:

sudo chmod 2775 /opt/lampp/htdocs

To finalize, add your user to this group, running the following command:

sudo usermod -aG www *username*

Now you’ll need to logout or restart your server, in order to these changes take effect, as these rules are read at login time.

3. Configure static IP in your VM and change your windows “hosts” file

For me this is one of the most important steps on this configuration, I love being able to type something like local.dev in my browser, putty or ftp and be able to access my VM without any hassle.

To do this you need to change two files in your VM.

First, open the “interfaces” file ( etc/network/interfaces ) in your favorite editor, and change the following lines:

auto eth0
iface eth0 inet static
address 192.168.0.100
netmask 255.255.255.0
network 192.168.0.0
gateway 192.168.0.2
broadcast 192.168.0.255

You’ll need to get the correct values for each from your own network configuration, just have in mind that the ip address need to be unique and in the same network as your local machine.

Next, open the “resolve” configuration file ( etc/resolv.conf ) and change the nameserver to match your gateway ip address.

Then just restart the network, by running the following command:

sudo etc/init.d/networking restart

Back in windows you need to add a new entry to your host file, for that you need to open notepad or your favorite text editor, as administrator, then navigate to the host file, usually in: C:\Windows\System32\drivers\etc and add the following line to your file:

192.168.1.100 local.dev

The first part is your virtual machine ip address, the second your desired alias for it.

4. Install all the packages you want

Now it’s time to install all the packages you want in your VM, before selecting them and start installing, just run an update to make sure you’re getting the latest stable versions.

sudo apt-get update

Now it’s time for installing the packages, usually I install the following:

  • Git
  • Ruby
  • Gem
  • Sass
  • Bourbon
  • Wordmove
  • lftp
  • mysqldump
  • grunt
  • Node.js

Please have in mind that these are the steps I use to create a local VM for development, these configurations shouldn’t be used on a VPS or a production environment.

There are other alternative configurations for a local environment including the famous VVV, https://github.com/Varying-Vagrant-Vagrants/VVV . The last time I tried to install this on my windows laptop I couldn’t get it to work correctly due to some windows permissions, I’ll give it another try some time soon, but for now I’m sticking with my own VM.