Install and Configure the Development Environment

In this lesson, we’ll get our development system up and ready to go. In subsequent lessons, we’ll use this environment to dig into each of the technologies.

Here’s what we’ll cover in this lesson:

  1. Install Google Chrome on our Mint VM. Chrome is great for debugging and development.
  2. Install Oracle’s Java JDK; after we remove OpenJDK that’s been installed by default
  3. Apache2 web server
  4. Configure our system to serve content from two sites on the same machine: a generic site we will use for our development; and a wordpress site using a different sub-domain

In our next lesson, we’ll finish the configuration by completing the following:

  1. Next, we’ll install WordPress and configure it for our WordPress site
  2. We will create a child wordpress site so that updates to our theme will not destroy our customizations; and so we can use JQuery and our Web Services
  3. We will then install Netbeans and Tomcat
  4. Finally, we’ll look at building a simple web service and make web service calls from within WordPress.

Let’s get started.

1) Install Google Chrome

Firefox is installed as the default web browser in Mint so let’s open that and search for Google Chrome Download.  The site should automatically detect that you are on Linux and offer you two choices.  Select the .deb file type:

I prefer to use the package installer to install.

I also like to add an icon to the task bar.  To do this, click on the Menu icon in the lower right corner and search for Chrome. Right click over the icon when you find it and select the Add to Panel option, it should not be listed on the “Panel”, aka “taskbar”.

2)  Install Oracle’s JDK

Let’s first remove the default OpenJDK stuff on the system.  It shouldn’t cause problems, but I prefer to keep things as simple as possible to remove variables that may create problems down the road.

Issue the following command: sudo apt-get purge openjdk-\*  Java and the jdk may not be installed and that’s OK.

Next, let’s install Oracle’s JDK.

  • Configure the Oracle ppa:  sudo add-apt-repository ppa:webupd8team/java
  • Update and install the jdk: sudo apt update; sudo apt install oracle-java8-installer
  • As the install program warns, let’s make it the default: sudo apt install oracle-java8-set-default
  • Now, let’s confirm we’re all configured: java -version
3) Install Apache2 Web Server

This is even easier than the previous two installations:  sudo apt install apache2 apache2-utils apache2-doc

Open your brand new Chrome browser and key in localhost as the web address.  Your web server should serve up the introduction web page that should look like this:

 

Wow, in a matter of minutes, we’ve already installed three programs including a web server.  And our licensing costs are zero!  Not bad.

4) Configure our Site to Serve Content for two Web Sites

There are several reasons why we may want to configure two different web sites on our development machine such as:

  • To isolate our different development work; that is, we may have one site serve static content and the other host something like wordpress.
  • Different sites can run under different configurations and so we can quickly test how our code will work under each one.
  • We might want to test cross-domain (cross site) web calls such as calling content from one web site to another.  We can do that from a single development machine.

Let’s start with configuring our guest machine to serve content when we key in each sites domain name in our URL:

NOTE: I tend to jump back and forth between the command line/terminal and the graphical File Explorer (Nemo).  Just use the one that you are most comfortable with.

In this short screen grab, we’ll open our hosts file and add DNS names for our two new bogus web sites: MyWordpressWeb.local  and MyDevWeb.local.  

Here’s what we will show:

  • Opening Nemo as Root so we can edit the hosts system file
  • Adding entries to the hosts file for the two new test sites
  • Attempting to navigate to the sites in Chrome using the URL.  Notice that since we did not put the http in front of our site name at first, that google thought we wanted to search.  Since we are using a bogus Top Level Domain of “.local”, Chrome doesn’t realize this is our bogus URL.  We fix that by making the URL complete with the http:// first.

Next, we will create folders on our machine where we can serve content; and later to install WordPress.

When we installed Apache Web Server, it kindly installed some folders for us to hold our web pages.  For example, the Apache default splash page is found at:  /var/www/html/index.html

Let’s use that folder structure to hold our new web sites.  We’ll create two new folders, one for each site as follows from the terminal:

sudo mkdir -p /var/www/wordpressweb
sudo mkdir -p /var/www/devweb

In order to confirm our sites will work when we complete the configuration, let’s put a couple of test web pages in them.  Create a new index.html file and place it in the devweb folder with the following:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
   <title>Welcome to MyDevWeb.local!</title>
 </head>
 <body>
   <h1>Success!  The MyDevWeb.local virtual host is working!</h1>
 </body>
</html>

Repeat for the MyWordpressWeb.local site in the new wordpressweb folder.

 

We now need to create a virtual host file for Apache.  Please read the Apache documentation to learn what and why you are doing this; but, the short summary is this:  we want Apache to answer requests for different hostnames. This is why we added the two new names in our hosts file earlier.  As you may have noticed, we have several names that resolve to the same local IP address:  localhost, bruce-VirtualBox (the local machine name), MyWordpressWeb.local, and MyDevWeb.local.  The last two are our new hostnames we added in this lesson.

In web technologies, we have primarily two ways to have a web server host content:  1)  by using a specific IP address; or by 2) using host names or “host headers”.  Therefore, we could have “multi-homed” our machine (the VM) by adding additional IP addresses and configure each site to be served from a unique IP address.  However, we are using the second option; host headers and are going to let apache know where to send the requests when the header matches.

The following picture shows a Google Chrome network trace that illustrates host headers.  This site is hosted at:  web.learn2code.solutions.  You can see the hollow red arrow pointing to the “Request Headers” and the solid red arrow pointing to the Host (thus the name  “Host Headers”).  So our browser is sending a host header of web.learn2code.solutions and our web server will want to point the request to the appropriate folder.  Let’s configure that next.

With Apache web server, we can have configuration files that we build; and then we can turn them on and off as needed.  So our configuration is comprised of two steps:  1) we create our configuration files and 2) we enable them; that is, we turn them on.

Let’s create our configuration files.  We’ll start with the template file that Apache ships with: 000-default.conf.  We will copy this twice, once for each of our host sites.  Execute the following commands in your terminal:

sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/ MyWordpressWeb.local.conf
sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/ MyDevWeb.local.conf

Navigate to the /etc/apche2/sites-available folder.  I prefer to open the Nemo File Explorer, and right-click on the folder to open as root.  That way, when I launch the text editor, I can save my changes as an administrator.

Open the file /etc/apache3/sites-available/MyDevWeb.local.conf and replace the entire file contents with the following:

<VirtualHost *:80>
   ServerName MyDevWeb.local
   DocumentRoot /var/www/devweb
</VirtualHost>

Now, we want to take the second step of our config — to enable the script.  From the terminal key in:

sudo a2ensite  MyDevWeb.local.conf   (Remember, names and commands in Linux are case sensitive so the name here must match the file name in the …sites-available folder)

As the command result should inform you, restart apache to load the configuration.

sudo service apache2 reload

Now (queue the drum roll), let’s see how we did.  Open your browser in your Mint VM and put the following in the address line: http://MyDevWeb.local  You should see the sample web page you created earlier and put in the appropriate local folder.

Repeat the preceding few steps for the other site, MyWordpressWeb.local

Conclusion

In this lesson, we installed Google Chrome on our Base Mint Virtual Machine.  We then install the Oracle JDK, the Apache2 Web server, and configured our server to host two new “domains” and Apache to recognize requests to those “sites” or domains.

In our next lesson, we’ll install WordPress, Netbeans, and Tomcat and show how to integrate jQuery and custom styles and javascript into our basic WordPress site.

Now would be a great time to take a new snapshot of your Mint VM.

If you have questions or comments, post them below and I’ll try to assist.

Leave a Reply

Your email address will not be published. Required fields are marked *