As Timmy Browne directed, this is what I ended up doing.
My setup is that I use a VPN on my home PC and when connected. I remote desktop onto my web server where I can do stuff on it. I wouldn't be able to remote in if I wasn't connected to the VPN. Essentially on the same network.
On my IIS, I had "Default Web Site" which I could access on a browser on the web server as
via IP or server name. This takes me to the IIS splash page, as expected. If I did this on my own PC but while still connected to the VPN, I clearly cannot use
localhost as it's different on my home PC even though I am connected to the VPN. So if I wanted to get to the same IIS splash page on my home PC then I would need to enter
servername.org.com or I could also use the IP of the server.
On my IIS, I created an additional website called "test". On my bindings for website, I had it ported at 8080. This meant that if I used
hostname:8080 on a browser on the web server. This takes me to the splash page of the "test" website. Now if I did the same thing on my home PC I would need to specify the port to get the "test" website splash page, i.e.
IP:8080, otherwise it would just direct me to an existing live website called
test.com that has nothing to do with my web server. However, I did not want to use
servername.org.com:8080 for accessing my test website. I wanted to access it via
test.com. This is where I altered my web server's host file and added:
So now, on a browser on the web server I could access the "test" website via
test.com but if I really wanted to, I can still access it as
IP:8080 but I rather use
test.com. But I was to access
test.com on my own PC while still connected to the VPN, it does not work. But as Timmy brought up, this is expected and from his answer, I ended up altering my own PC's host file to include this:
Now if I tried to access
test.com on my PC, it now takes me to the IIS splash page but this isn't what I wanted, I wanted it to take me to the "test" website splash page. But I did try
test.com:8080 which took me to the page I wanted but I still did not want to include the port in the URL so I altered my own PC's host file to include a port like so:
But what I found out that this doesn't work like that and the hosts file does not support ports. So if I actually tried going to
test.com again on my own PC, it takes me to a live
test.com website that has nothing to do with my web server. So what I ended up doing was using ngrok to essentially generate a URL that I could use that points to
test.com:8080 by running it like this:
ngrok http http://test.com:8080
This generates a URL that I can use which points to the page
test.com:8080 splash page.
I've realised at this point that since I am now using ngrok, I don't even need to alter my own PC's host file. I ideally wanted to use my own URL like
test.com but this might not be doable but since ngrok generates a URL, I can just use:
ngrok http http://servername.org.com:8080
Which essentially works the same. ngrok does have a paid plan where I could use a subdomain but the free option is best for me at this moment.