How do I run a web page on a local host?

This is a common question for beginning web developers. You want to run your web application locally without uploading it to your webhost yet. You need to have a local web server to develop and display web pages locally on your PC. This is done by using a local host instead of using a server on the internet.

Why would you do that? Save time and money by developing and breaking web pages on your PC! You do not want people on the internet to use your web pages that are quite unfinished or are broken because you are still experimenting or figuring out a problem. You wish to develop, test and run web pages yourself first. So using a local web server is the answer.

I will talk about the Apache web server first. This Apache is a web server and its main purpose is to serve web documents such as HTML, PHP and ASP  files. The process is as follows for a PHP document for example;  the PHP file is sent to the interpreter on the server side, the server parses and processes this file and then sends the rendered file back to the browser. The server is just serving pages to your browser (the client).

Your local web server has a root directory which is wwwroot (IIS) or htdocs (apache, xampp) or something else like public_html, www or html, etc. The web server configuration depends on your OS and web server.

Once you have installed a web server on your PC, and if you type http://localhost into your browser, your browser will be directed to this webroot and the server will serve any index.html, index.php, etc. it can find there (in a customizable order).

If you have a project called "mytutorial" you can enter http://localhost/mytutorial and the server will show you the index-file of your tutorial, etc. If you look at the absolute path of this tutorial folder then it's just a subfolder of your webroot, which is itself located somewhere on your hard drive, this absolute path is mapped to the localhost.

So the relative path is
http://localhost/mytutorial

while the absolute path may be
c:/webservices/apache/www/mytutorial
or
c:/xampp/htdocs/mytutorial

If you're working with  a web authoring package like Adobe's Dreamweaver you can simplify the testing process by setting up your local server as a testing server in your project settings. easy. Once it's done, you can just press the browser icon with any of your files and it will open on localhost.

Example
I installed Aprelium, a light weight web server on my PC.
http://aprelium.com/abyssws/download.php
localhost:80/
http://locallost:80/

The server runs code from C:\Abyss Web Server\htdocs\..

I dropped a set folders of Web Components code examples in the
C:\Abyss Web Server\htdocs\

Then I could run a web page in Google Chrome for example;
http://localhost/Chapter1/shadow-dom/shadowDOMDemo2.html

and the absolute path may be
C:\Abyss Web Server\htdocs\Chapter1/shadow-dom/shadowDOMDemo2.html

That's it!

References

http://1stwebdesigner.com/local-web-server/
https://blog.xervo.io/absolute-beginners-guide-to-nodejs
http://stackoverflow.com/questions/20748630/load-local-javascript-file-in-chrome-for-testing?