Here we show how one can host website and/or web application from home which is useful for real time Internet of Things application. For this we will use XAMPP server and local tunnel. The XAMPP software is freely available on the internet. For local tunneling there are many option such as ngrok, localtunnel, pagekite etc. Here we will use localhost tunnel solution by ngrok to get public url that exposes local server website to the outside world.
To host your website or web application from home follow the following steps.
1. Download and install XAMPP
Go to
https://www.apachefriends.org/index.html and download XAMPP
and download the XAMPP for your Operating System.
Once downloaded, install it in suitable location. Then open the XAMPP application.
Once you have started XAMPP Apache server and/or MySQL successfully, type in localhost(or 127.0.0.1) in the browser bar. You should see a XAMPP start-up page. If you see the XAMPP start-up page then your setup is correct and you can move on to the next page.
2. Website Files & Folder in htdocs
The next step is to host your website/webpage on the XAMPP server. Put your website files folder like buttongui used here that contains the index.html or index.php with supporting css files, javascript files into the folder D:\xampp\htdocs.
The content of the buttongui folder is shown below.
3. Local tunnel using ngrok
In this tutorial we will use ngrok to tunnel localhost traffic to public IP. For this download the ngrok for your operating system from the following link.
https://ngrok.com/download
Then open the ngrok.exe file and type in the following:
ngrok http 80
This will start the server and you will be provided with public http and https URL as shown below.
http://f7dd-XXX-XXX-XXX-XXX.ngrok.io
https://f7dd-XXX-XXX-XXX-XXX.ngrok.io
where XXX-XXX-XXX-XXX is your public IP address.
The f7dd part in the above url changes whenever you request new public url from ngrok.
4. Create virtual hosts
The next step is to set up the virtual hosts file. Using virtual host configuration we can set up multiple domains/hostnames websites. For this we have to setup VirtualHost containers for them.
Browse to the following location and open the httpd-vhosts.conf file in text editor like notepad++ or notepad.
- D:\xampp\apache\conf\extra\httpd-vhosts.conf
In the httpd-vhosts.conf file add the following line at the end the file with the URL provided by the ngrok in the above step.
<VirtualHost *:80>
DocumentRoot "D:/xampp/htdocs/buttongui"
ServerName f7dd-XXX-XXX-XXX-XXX.ngrok.io
ServerAlias www.f7dd-XXX-XXX-XXX-XXX.ngrok.io
</VirtualHost>
This is as shown in the figure below.
Now you should restart the Apache server from the XAMPP control panel.
Next open the url provided by ngrok above(f7dd-XXX-XXX-XXX-XXX.ngrok.io) in the browser. You should see your webpage/website installed in the folder D:\xampp\htdocs\buttongui.
In this way we can host our web application using XAMPP Apache server from home. We can utilize this to create and host IoT(Internet of Things) application. For example in the tutorial How to display Sensor data in real time on Web we have used XAMPP Apache server with pagekite local tunnel solution to show users real time sensor data on the web.
