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.
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.
Download xampp lite.
Make sure you download the zip version.
Download the zip file version of xampp lite here.
Unzip the contents--it will extract to a folder named 'xampplite.' If you are on a windows computer you can simply open the downloaded zipped file and copy the xampplite folder and paste it to your desktop or into the folder described below. For those of you using your own zip program I assume you will know how to extract the contents of the file.
Place the extracted 'xampplite' folder wherever you like as long as you do not remove the contents to the root directory. You may also rename the folder if you wish however, for this tutorial we will stay with xampplite as the folder name.
As a general rule I always suggest placing any portable apps in a folder on a partition separate from the operating system. The standard naming convention for a portable apps folder is 'PortableApps.' Therefore I would suggest placing the xampplite folder inside of a folder named 'PortableApps' that is on a separate partition from your operating system thus the location should look something like, D:\PortableApps\xampplite.
Personally I place my install in '\PortableApps\Servers\xampplite' because I put everything dealing with my local server in that folder, xampplite, Filezilla, WinSCP, etc.
If you don't have a separate partition then the c drive will have to do.
Open the xampplite folder and activate the "setup_xampp.bat" file. A command prompt will open with several questions:
The default is yes (y).
You can answer however you wish. If you would like shortcuts then go with y, if not go with n.
You need to answer yes (y) to this question unless you wish to exit setup.
You should answer yes (y) to this question to make your install portable.
This allows you to move the folder in the future as long as you keep the folder structure it will work regardless of the drive it is on. Therefore, you can even move the install to a USB drive if you like.
Press enter then close the command prompt window if it does not do so on it's own.
The last question in the command prompt may ask you to choose a number to start a xampp service. Simply close the command prompt dialog at this time and navigate back to your xampplite folder.
Navigate back to your xampplite folder.
In the xampplite folder activate the 'xampp-control.exe' file. The 'xampp-control.exe' file starts the xampp control panel. This is THE file you will use to start & stop xampp.
The xampp control panel gives you access to starting and stopping services. You will want to make a shortcut to this file and place it somewhere easy to access.
The xampp lite control panel.
Click "start" to the right of "apache" on the xampp control panel. This will begin the apache server which must be running to access your local server.
When ending a session simply click the stop button. Then click exit to close the xampp control panel.
Clicking the red X close button on the xampp control panel puts it into the task tray.
Apache is the only service you need running in order to run gpEasy.
The xampp lite control panel.
Click the Start button next to apache to start the localhost server.
Notice the start button will turn into a stop button when apache is running.
Click the stop button to stop apache before you exit the xampp control panel.
Click exit to completely close xampp lite.
Keep it running and put http://localhost/ in your browser's address bar.
The default screen for xampp lite installation directory.
You should be seeing this screen in your browser if you have done everything correctly.
Don't worry about what's on this screen. You won't be using it.
No look inside the xampplite folder. You will see a folder named htdocs. This is the directory folder xampp lite uses by default.
You can use this folder and install gpEasy in the htdocs folder or in a sub-folder in the htdocs folder.
OR. . . you can continue on in this tutorial and create a different folder for the default directory and even add more directories if you need to have multiple sites in xampp lite.
This is where you would install gpEasy for it to be in the root directory of xampp lite. The URL would then be http://localhost/
You may also add a sub-folder here and install gpEasy there. In that case the URL would be http://localhost/subfoldername
However, we are going to continue on in this tutorial and create a different default directory.
So, for those who wish to continue on add a folder named 'www' inside the htdocs folder.
The www folder will become your root directory in the next part of this 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.
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.
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.
Open the file 'httpd-vhosts.conf' in your text editor.
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.
Save the file.
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.
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.
Open the file 'httpd-vhosts.conf' in your text editor.
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.
You will have to open this file with your text editor.
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.
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!