Testing HTML5 websites or games locally

Whether you’re building a plain website or a game using HTML5, it’s most likely that you’ll need to try it via localhost and not just by opening it with a double-click (more info here).

This guide shows how to accomplish that and, as an extra, how create hardlinks of folders in Windows.

First, we must set up a web server in our computer, luckily there’s plenty of options around that make it easy for us.

  • Install just the web server: the most popular option is Apache, a free cross-platform HTTP server. You could also use IIS (Internet Information Services), from Microsoft, but I think Apache will be less of a headache.
  • Install a solution stack: there are many already-bundled solutions around that already have common services for the web, such as a web server, a database manager and interpreters for popular scripting languages.
    • XAMPP: (Cross-platform) Apache HTTP Server + MySQL + PHP + Perl.
    • WAMP: (Windows) Apache + MySQL + PHP / Perl / Python.
    • LAMP: Same as WAMP but for GNU/Linux.
    • Other solution stacks can be found here.

I, for instance, chose XAMPP, but it’ll ultimately depend on your tastes.

XAMPP screenshot
XAMPP’s control panel in Windows

If, after installing the solution stack of your preference, the starting of the web server fails, the most probable cause is that there’s something running in the computer already using the port 80. The two most common culprits are:

  • Skype: in the desktop client, not the Windows 8 app, you can change the port it’ll use.
  • IIS: you already have Window’s web server running, God knows why. You could turn it off.

If you don’t want to change Skype’s port or turn off IIS, the last solution is to configure Apache to use an alternative port (the good practices say it should be 8080). In my case, the problem was IIS (I think it got activated by Visual Studio, *sigh*) and I didn’t want to turn it off, as you could have a bad time.

Hopefully by now we have a web server running. To test simple HTML5 pages or games we only need a web server, so other services such as MySQL could remain turned off.

To be able to try our webpage/game, we need to put those files inside a special folder in the server. In XAMPP, it should be inside /xampp/htdocs. And to open your webpage, you’d need to type:

or, if you’re not using port 80:

Here’s where things could be messy, depending on your OCD levels. If you have the project folder outside htdocs, anywhere in your computer, every time you want to try the webpage, you should copy the folder to htdocs. You can put the repo folder already inside htdocs, but what if you don’t want to? What if you want to store the folder in other folder or partition. I, for example, like to have a folder with all my projects inside; I find it messy to just have projects scattered all over the computer.

The solution is simple. We need a way to have the folder in our desired location while having access to it from htdocs. In Windows, the solution is to use a junction (a special kind of hardlink but for folders). To make a junction, just run this command (may need to open a cmd with Administrator rights):

For example, let’s say we have our HTML5 game in D:/Projects/Work/ProjectX/, and we have XAMPP in C:/xampp/. We would type:

Now we can work comfortably in our D:/ folder, maybe we are using a git repo, and access the webpage from our web browser, without having to enter again in htdocs. If you decide you don’t want the junction no more, we just need to delete the shortcut in the Explorer).

In Linux I guess the process should be similar.

Leave a Reply