When working with a single web page, it is possible to preview the page in a Web Browser by using the
File > Open option. Although this works well for very small sites, you will quickly run into problems testing and viewing your site as it grows beyond a single page. Before we learn how to test a web site locally, we need to understand more about how a website works on the internet.
How Web Sites Work
When you type an address into the address bar of your browser, you are accessing a web site. The process of accessing a website has several steps:
- The user enters a Uniform Resource Locator (URL) into the address bar of a browser
- The address is sent to a Domain Name Server (DNS Lookup), which responds with the physical address of a web host.
- The browser sends a request to the web host to load the web site.
- The web host has a special piece of software called a Web Server that knows how to respond to the request, and sends back the web page.
- The Browser renders the HTML and displays it for the user.
When working locallaly, we can cut out the step to resolve the domain name and type in the direct address into the browser. This means, the only two pieces we need to test a web site locally are a Browser and a Web Server.
When developing a web site, it is important to know that each browser works slightly different. That means, a site that works great on Chrome, might not look so good on Internet Explorer. To work around these differences, it is considered a best practice to load our site into as many browsers as we can to test locally. Here are the browsers you should install on each OS.
- Mac OSX: Firefox, Chrome, Opera, Safari (Safari should be installed by default.)
- Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge (Depending on what version of windows you have, you will use either Internet Explorer or Edge)
- Linux: Firefox, Chrome, Opera
Installing a Web Server
There are a lot of ways to set up a local web server, but a lot of them can be quite complicated. All you really need is a simple server that will allow you to test your application. To do this, you are going to use the Python programming language’s built-in feature called SimpleHTTPServer. Don’t be intimidated when I say Python though! You will not have to do any actual programming to make the Web Server work.
If you are on Mac OSX or Linux, Python comes installed on your system. If you are on Windows, you will need to install it. Go now to python.org and under the Download tab install the latest version of python. Just follow the directions to install and make sure to click the option to “Install to PATH”.
Once Python is installed, you can now use it to “serve” any directory on your system as a website. To see how it works, open up the Command Prompt (on Windows) or Terminal (Mac OSX or Linux). To make sure Python is set up correctly, type this command in and hit enter:
Navigate to the directory you have your website files in and then you can run the web server. If the version listed above is Python 2.x:
python -m SimpleHTTPServer
And if the version printed above is Python 3.x:
python -m http.server
This will allow you to open up your website in your browser by typing http://localhost:8000/ into the address field. Congratulations, we can now start building websites!