Lets see how to host any website locally
This tutorial is about how to host a website locally. Which mean at the end of this tutorial, you will be able to access the website you host to be accessible from any device on your network. You might need to host a local web app on office to access it internally or even at home for watching movies, across many device. At the end of this tutorial, you can access this website from any device on your local network.
And a quick note I have testing this on windows 11 and on windows 10.
Can you host any type of website?
I have tested this with react application. The important thing is that it should contain index.html or index.php and other static files. You website need not to be in react, it can be a WordPress website or a custom php website with MySQL as database.
So, to start you need a web server to serve your files. Don’t worry, its not a big configuration, you just need to install an app. In browser search for download page of xampp server. Once you get there, you can download the latest version. With the help of this software, we will setup the apache server. And if you use MYSQL, then you can install it too.
The XAMPP Server
Once download is completed, open the setup file and install it. Its a simple next, next screen you need to follow. On service selecting screen, you can select what services that need to be installed for you. If you don’t know what these things are then select apache and untick all other options. If you want to use local MySQL database you can tick MySQL option.
you can leave all other option as default.
Once the installation is completed click finish button to open xampp control panel.
When the xamp control panel starts start the apache module. When it starts you should see port 80 under ports. Ensure you have port 80 there.
Move your website public folder
Click explorer button on xampp control panel and then you can close the xampp control panel. Even though you close xampp control panel, the apache server will be running in the background. Navigate to htdocs folder on the “C://xampp/htdocs” and delete everything there is, to host your website at root directory. Those deleted file are default xampp files and if you want you can also host it on a new folder in here and add folder name to your URL. This way you don’t need to delete those files.
Your website files should be here
Paste your website files on this folder. Ensure you have index.html or index.php on this htdocs folder.
Now when you go to localhost on web browser you should see your website live on your PC.
Lets make it accessible from any device on your local network
Many people think this is very hard, or requires a complex configuration, buts its a piece of cake. Open windows defender firewall and navigate to advance setting on left side bar. Under Inbound rule, create a new rule to allow port 80 in your firewall. With this, your device will open port 80 (which is default port for web server).
Also, do the same with outbound rule to allow port 80 there also. The reason why we are using port 80 is because, then we need not to specify port when we go to this address. If you do not understand this make sure to watch the video at end on this post.
Adding a custom domain name to your local website
How to access this website using a name of your choice. For that go to rename your PC and rename it to what you want you want domain name to be. You can also rename your PC by going to advance system setting. So if your DNS server is mapping device name to IP ,any device visiting to http your device name will see the website.
However, you cant put .com or .net as your PC name. So if your want access your device using something like localwebsite.com, then you need to add a record to your router or dns setting to point that domain name to your IP.
You can get your IP by opening cmd and typing IPCONFIG.
Lets wrap it with video explanation on how to host any website locally
So basically, what we did was, install xampp and put our website in htdocs folder. And to access from any device on my local network, I allowed port 80 on my device.
