How to Setup Web Server with Domain Name in XAMPP

Today we are going to setup a local web server in a PC with a Domain Name using XAMPP. We also make our web server available in the internet so anyone can access our website. Before going further I am sure that you have already installed XAMPP in you PC. If not, read How to Install WordPress in Windows PC Using XAMPP to install XAMPP and its dependencies. Or see FAQ. So let’s begin.

XAMPP is a very good tool to install all required app in a PC for web development. It is quick and easy to use. Before setting up a domain name we usually browse our locally hosted websites using http://localhost or http://127.0.0.1. First we need to understand some basics about this and IP addresses.

To make it easy to understand I used internal and external IP address but actually they are private and public IP address respectively. Some helpful links are at the end of the article.

http://127.0.0.1 is the loopback IPv4 address. What it does is, it creates an IP connection to the same device or computer being used by end-user. While regular IP is used to transfer data from one device to another over internet. Let’s suppose I have my regular IP address 192.168.100.150. And I have web server running in my machine then anyone within my network can visit my site in that server by entering my IP address (i.e. http://192.168.100.150). Within same network means having connected to same WiFi. But what we do is, we go to http://localhost or http://127.0.0.1 to visit local website. Instead, we can also visit our locally hosted sites using our regular IP address within same network.

Find Internal IP Address

• In Windows open cmd and enter ipconfig and you will get your IPv4 address.
• In Mac open terminal and enter ifconfig | grep inet | grep -v 127.0.0.1 , you will get your IP next to inet.
• In Linux open terminal and enter ifconfig , IP is next inet addr.

Check if you are able to open site using you IP address.

Port Forwarding

This step is to make website accessible from everywhere. Skip this step if you don’t want your website to be able to accessed from public. Without this you are able to access your website from other device but within the same network only.

To make our website visible across the internet we need to use port forwarding in our router because our internal IP address is not visible outside. So we do port forwarding and access the website using external IP address. In simple word port forwarding converts internal IP to external IP and vice-versa. External IP address is the address assigned by the ISP.

See this video to know how to do port forwarding in your router and to find external IP address of your network. There may be slightly different method in other routers but this is for Lynksys routers.

https://youtu.be/pIK-RpVNAM8

Getting a Domain Name

It has two options, first is to get a real domain name that a website uses and second is redirecting your PC to  127.0.0.1 as you type something like http://mysite.local.

Get your domain name you want to use for your server. You can also get free domain names from Freenom. Benefits of using a domain name is that you don’t have to remember your IP address. If you do not want to use a real domain name but wants to use domain name only in your PC, we will redirect the desired domain to 127.0.0.1 . In this case mysite.local is our domain name. But it can be accessed only from you PC.

Configuring Domain Name to Point an IP Address

If you get a domain name from Freenom like I did, there is DNS service too that Freenom provides. So you can use their DNS service to point to your external IP address. You can also use internal IP address but site can be accessed only from same network.

The setting is under DNS Management >> Use Freenom DNS.

If you are going to use another domain providers that do not provide DNS service then you can use FreeDNS to point to your external IP address. The extra work you need to do is adding name-server of FreeDNS in your domain.

Setup Apache for VirtualHosts

• Navigate to C:/xampp/apache/conf/extra or wherever your XAMPP files are located.
• Open the file named httpd-vhosts.conf with a text editor. You can see all lines are commented using #.
• At the bottom of the text put this code.

https://gist.github.com/2shrestha22/056fa3fbb65c67173808e3c06a6ea454

• Modify necessary in that code.
• Restart Apache server and you are ready to browser you locally hosted website using the domain name.

Redirecting Domain Name to 127.0.0.1

Without internet connection the domain name will not work even you are using the same PC where server is created. This is because your PC does not knows the domain name, it only knows the IP address. We need to redirect PC to 127.0.0.1 when it tries to connect to domain name (in my case it is trex150.tk).

• Press the Windows key.
• Type Notepad in the search field.
• In the search results, right-click Notepad and select Run as administrator.
• From Notepad, open the following file: C:\Windows\System32\Drivers\etc\hosts.
• Add 127.0.0.1      trex.tk at the end of the file. Change the domain name to yours.
• Click File > Save to save your changes.

Now you are able to use your web server from everywhere in the world.

I have used trex150.tk domain in this article. You should use your own domain name. This article contains all information to create local web server to a live working web servers. However if you only want to access websites using a custom domain name rather than http://localhost and http://127.0.0.1 skip all domain name including steps and port forwarding steps. Only thing you need to do is setup Apache for virtualhosts and redirecting a custom domain name (for example mysite.local, site.me or anything you like).

Useful Links:

• Private and Public IP – https://en.wikipedia.org/wiki/IP_address
• Port Forwarding – https://en.wikipedia.org/wiki/Port_forwarding
• NAT – https://en.wikipedia.org/wiki/Network_address_translation