As a developer, first thing you need to do when starting a project is to install necessary tools for your development such as laptop, internet, sublime text editor and a coffee :D. One of the most important tools for the developer is to install XAMPP. In this tutorial i will help you to create your own virtual hosts using XAMPP.

So what is XAMPP?
XAMPP means Apache + MariaDB + PHP + Perl. Its the most popular php development because its easy to install and its free. It has a windows and linux version too. With the latest php version to choose from PHP 5.6.28 or 7.0.13. Please visit their website and start downloading and lets get it on.

So once, we installed already the XAMPP, and run the tools. we can start typing in our browser the http://localhost it will redirect us to http://localhost/dashboard/

Its the default page after we install the xampp, from this point it means we’re good to go.. Now, lets go ahead and setup a virtual hosts.

So what is Virtual Hosts?

It’s a multiple domain names which can be map in separate directories by apache in a single server. You can create multiple virtual hosts in one server and share it resources to one another such as memories, installed programs etc.

For instance, you have local.mangaoverload.com and you want to setup again another virtual hosts for your next project such as local.mynewproject.com. These are possible using virtual hosts.

In order to set up virtual hosts for XAMPP on a macOS Sierra, you need to edit these three files:

1. /Applications/XAMPP/xamppfiles/etc/httpd.conf
2. /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf
3. /etc/hosts

Step 1.

Open up this file,

Find and search this line of codes andremove hash tag (#) in front of “Include etc/extra/httpd-vhosts.conf” , to uncomment it.

By uncommenting this line of code we are telling Apache to load our custom VirtualHosts configuration file.

From this step, we are almost done. Its easy right? Lets proceed to step 2.

 

Step 2.

At this point, we are going to setup our custom virtual hosts configuration, to do so, open up this file using your favorite text editor.

 

As you can see, it has a default virtualhost setup. We can remove it and changed the codes below.

From this point, we are using the localhost as our default named Virtual host. We need to make sure that the http://localhost still points sin our XA Add MediaMPP htdocs directory.

Now if you want to create another virtual hosts for your new project, example, “local.myamazingproject.com” you can add your new virtual hosts like this.

In this point our servername is called “local.myamazingproject.com”, and apache will point this in our directory

/Applications/XAMPP/xamppfiles/htdocs/local.myamazingproject.com. Thats it. We’re done setting up our newly named virtual hosts.

 

Remember: Restart your apache after applying the changes

You can start browsing it now from using this address http://local.myamazingproject.com.

Oopps!,

If you tried to browse your url using this http://local.myamazingproject.com, it will says

 

You are wondering, is there something wrong? or did i missed something? Why?

 

Don’t worry remember, we need to edit 3 files, Lets proceed to step 3 and the final step

Step 3.

The last and most important one, after creating our own virtual hosts name is to edit our hosts file. To do that, edit this file. Open up your terminal in your macOS and type this code.

When prompted enter your password, before it will open for security purposes.

Once its open, add your virtual host name and put your localhost dns. Check the code below

In order to apply changes in your hosts file, hit the control + o  and press return key in your keyboard. Close the file using control+x in your keyboard

 

Step 4. Still Have Problem? Did you encounter 403 Error?

403 Error shows that the apache doesnt have permission to browse your macOS Sierra directory or subdirectory. By default apache httpd config use:

To allow the apache to have permission, you open up again this file.

And find this line.

 

Change the User daemon  to your macOS Sierra user.. To do that, open up your terminal again and type this command.

it will display your name. in my case, its showing as “developersph“, your user should be like this now. Save the file and restart your apache and your are good to go.

Conclusion

 

So we’re done!!… Hurray… Its very simple and straight forward.. So go ahead and start your development. Make sure to drink caffeine. Peace Out fellas.