Install Xampp Lite Tutorial


What is xampp?

Xampp & xampp lite are cross-platform web server programs. Xampp is an open-sourced project and therefor free to use. What xampp and/or xampp lite will allow you to do with gpEasy is install it on your computer locally so you can test gpEasy, develop sites right on your computer, keep a synchronized copy of your website right on your computer, etc. . . this is a must have for any web development. Trust me when I say it will make your life easier in the long run.

About this tutorial

This tutorial will walk you through the steps of installing xampp lite on your computer. The install of xampp will be portable, will not need administrator rights, and it will be self contained within one folder. Once xampp lite is installed I'll show you how to specify specific folders for your localhost server directory and/or additional server directories so you can work with multiple websites with one install of xampp lite. Once that is all done I'll tie in the gpEasy install; therefore, by the end of this tutorial you will not only have a local server working on your computer but also a fresh install of the latest gpEasy CMS.

This is the first gpEasy tutorial for a reason. That reason is simple, by using xampp you will know how gpEasy works, and you will know when your server is the problem or when gpEasy is the problem. Furthermore, you will have an easy way to work with your gpEasy CMS install without dealing with your server, wasting bandwidth, or potentially breaking your site on the server, and you will always have an identical backup of your site if you choose to sync it. In a later tutorial I'll teach you how to easily synchronize your xampp localhost install of gpEasy CMS with your server install. It will make life with gpEasy a lot easier.

Of course you can use xampp over xampp lite if you desire; however, for the purposes of gpEasy xampp lite has all the services we need. Nonetheless, if you choose to use xampp over xampp lite just replace 'xampp lite' or 'xampplite' with 'xampp' in the following tutorial.

The following tutorial for installing xampp lite is a pictorial tutorial. Many of the tutorials for gpEasy will be done this way. Simply click on an image and it will open in Colorbox. Follow the instructions for each image and then move on to the next one. If there are problems with the images not opening or not opening in Colorbox, the most likely cause is you have JavaScript disabled. Please enable it. It will also be easiest if you open the tutorial in a separate browser window or tab when following along. The second part of this tutorial will show you how to change the server directory for xampp lite. It is not necessary that you do the second part; however, it is a good idea.

Xampp Lite pictorial Installation tutorial

Congratulations on completing the first part of this tutorial.

Some computer systems may need you to enter http://127.0.0.1/ instead of http://localhost/
So, if your local host server didn't work then try that.

Remember that the localhost address in the URL of your browser brings you to your own personal server on your computer. The folder that is currently your localhost install folder within xampplite is the 'htdocs' folder. You can leave this as the localhost install folder and install gpEasy there or in a sub-folder; however, the next part of this tutorial will show you how to change that directory in xampp lite and even add more directories if you need to run multiple web sites with xampp lite.

At this point you can continue on with the tutorial and learn how to change the directories in xampp or jump to the gpEasy installation tutorial to install gpEasy in xampp lite.

Xampp Installation Video

For those of you who want to install the full xampp via installer on your computer then check out this video I found on YouTube: Xampp Installation Video on YouTube . While I used the zipped version of xampp the video uses the exe installer. The video also goes through some other topics about xampp that I didn't cover. It's a good video to watch even if you choose to install xampp lite the way I did, there's still some good information. There are a lot of videos on YouTube about installing Xampp, if these tutorials didn't work for you.

Changing the server directory

Navigate to your xampplite folder, then the htdocs folder. Inside the htdocs folder create a folder named 'www.' We will use this www folder as the new server directory for xampp lite. This is nice as it gives you an empty folder to work with.

Once you have created the new www folder navigate to the '\xampplite\apache\conf\extra' folder. In this folder you will see a file named 'httpd-vhosts.conf'

We need to add the new server directory for xampp lite in this file.

Step 1
Open the file 'httpd-vhosts.conf' in your text editor.

Step 2
There are several lines of comments in the file already. Don't worry about those. Go to the end of the file and paste the following code into it.

NameVirtualHost *:80
<VirtualHost *:80>
ServerName localhost
DocumentRoot "/PortableApps/xampplite/htdocs/www"
</VirtualHost>

Notice the line that starts with 'DocumentRoot.' Make sure you change the path listed to the exact path to where your xampplite/htdocs/www folder is located. In the above code you can see that I'm not using a drive letter. The reason I'm not using one is because during install I chose not to use drive letters so that my install would be portable. As long as I keep xampplite in a folder structure as shown in the code it will run properly. If I change the folder structure then it won't.

Step 3
Save the file.

Step 4
Put a basic html file in your www folder. Now navigate to http://localhost/ in your browser. You should see your html file. That means now the www folder is your working server directory for your xampp lite install, no longer the htdocs folder.

Adding Multiple Server Directories

What if you need to run multiple web sites with xampp? All we need to do is create and define the other directories in the same way as we did the www directory. Then we will have to make one change to a Windows file in order to Windows to properly locate the other directories. You may need administrator privileges to modify the 'hosts' file in Windows.

Step 1
Open the file 'httpd-vhosts.conf' in your text editor.

Step 2
Go to the end of the file and paste the following code into it.

NameVirtualHost *:80
<VirtualHost *:80>
ServerName localhost
DocumentRoot "/PortableApps/xampplite/htdocs/www"
</VirtualHost>

<VirtualHost *:80>
ServerName acuherbs.localhost
DocumentRoot "/PortableApps/xampplite/htdocs/www/server1"
</VirtualHost>

<VirtualHost *:80>
ServerName trueacu.localhost
DocumentRoot "/PortableApps/xampplite/htdocs/www/server2"
</VirtualHost>

<VirtualHost *:80>
ServerName gpeasy.localhost
DocumentRoot "/PortableApps/xampplite/htdocs/www/server3"
</VirtualHost>

<VirtualHost *:80>
ServerName test.localhost
DocumentRoot "/PortableApps/xampplite/htdocs/www/server4"
</VirtualHost>

Remember to make sure the DocuementRoot path is corrector for your installation of xampp lite!

You can change the server1, server2, server3, server4, to anything you like. These are the folders you need to create within your www folder. They are the new directory folder. Therefore, for each additional directory you create you will need to make sure there is a folder with that exact name for that path. The above code is adding four directories inside the www folder (server1, server2, server3, and server4). I did this because I keep the localhost root directory (www) empty and don't use it other than to house other directories, and in my case I have two web sites I maintain and I also wanted a gpEasy install to create themes with as well as an extra directory to have a "clean gpEasy install" in case of problems so I can make sure the problem is gpEasy or not.

Go ahead and create the directories you want, name them as you wish, and make certain you create folders for them in the correct location. Save the file. Now we need to make a change to Windows 'hosts' file.

In the folder 'C:\Windows\System32\drivers\etc' you will see a file named 'hosts'.  If you do not see it check your folder options and allow hidden files to be shown.

We need to add a few lines of code in this file to tell windows about our new localhost directories.

Step 1
You will have to open this file with your text editor.

Step 2 
At the end of the file, after the comments, paste the following code:

127.0.0.1 localhost
127.0.0.1 server1.localhost
127.0.0.1 server2.localhost
127.0.0.1 server3.localhost
127.0.0.1 server4.localhost

Once again I'm allowing for four additional server directories to be added on top of the localhost server directory. You can change this as you need. Just make sure that this matches the server directories you added to xampp lite. Also notice that the server directories look like sub-domains of localhost. Basically that's what they are.  Therefore, for every directory you create in the 'httpd-vhosts.conf' file for xampp lite you need to create a sub-domain in the 'hosts' file for windows. This lets windows and xampp communicate properly for the localhost server.

Step 3
Save the file. You may need to restart windows for it to load the new hosts settings. Win7 does not need to be restarted in my experience.

As above you can place a html file into the directories and test them by navigating to http://server1.localhost/

However, we still don't have a gpEasy install going. That's next on our list. Nonetheless, you now have your own personal server working on your computer with custom server directories. Congratulations!

Now head back to the gpEasy CMS Tutorials or continue on to the gpEasy installation tutorial.

 

gpEasy B2sq Theme by CS @True Acupuncture