7
\$\begingroup\$

I'm new to HTML5 game development. I'm trying to make something using Pixi.js, but when I tried to view it in a browser, I saw a blank page. According to the tutorial I'm following, I need to set up a local server. I'm not sure why I'd need to do that, though.

Could you please tell me why I would need a local server to run HTML files on my browser?

\$\endgroup\$
4
  • \$\begingroup\$ For general html you don't need a local server, and you can simply run the file in your browser. Javascript is all client-side, so you could do everything inside of the browser. Other languages are server side, like php, and they require a server. Who's telling you you need a local server? \$\endgroup\$
    – ultifinitus
    Commented Jul 3, 2014 at 18:43
  • 1
    \$\begingroup\$ I guess I must have miss-read somewhere and mashed up a bunch of information. I tried to load the Pixi.js but what resulted was a blank page. I am also following this tutorial (flippinawesome.org/2013/11/04/…) where he says to setup a local server \$\endgroup\$
    – Question-Everything
    Commented Jul 3, 2014 at 18:51
  • \$\begingroup\$ It is not a bad idea to have a local server (probably something like xampp instead of bare apache) because the environment will be consistent for when you launch your production site. But you certainly don't need one! \$\endgroup\$
    – ultifinitus
    Commented Jul 3, 2014 at 18:54
  • 1
    \$\begingroup\$ You don't need one for basic features, but you do for a bunch of specific things (eg. how browsers access certain resources) so just download xampp from www.apachefriends.org and be done with it. \$\endgroup\$
    – jhocking
    Commented Jul 3, 2014 at 18:57

5 Answers 5

Reset to default
14
\$\begingroup\$

Web browsers disable some Javascript features for security reasons.

My bet is that you just hit Google Chrome forbidding XMLHttpRequest on local files by default (see this answer on SO for how to disable that, but beware: this is dangerous). See this page on the Chrome dev site for details.

This is why you have to setup a local HTTP server to workaround the security lock.

\$\endgroup\$
2
\$\begingroup\$

If you just open the game's root html-file in a browser, your browser will (hopefully) not allow that page to access any other files. This is a security feature that limits damage from malicious scripts.

If you're comfortable on a command line and happen to have Python version 2 installed, an easy way to run a local web server is to change to the desired root directory and run

python -m SimpleHTTPServer

which serves the currenty directory's contents on localhost port 8888, as documented here. Subdirectories are served, parent directories aren't, so things stay contained nicely.

The Python 3 equivalent is python -m http.server. (Thanks Mike!)

\$\endgroup\$
1
  • 2
    \$\begingroup\$ If you're running Python 3 then you'll want to use python -m http.server [port] source \$\endgroup\$
    – Mike Cluck
    Commented Jul 7, 2014 at 15:24
1
\$\begingroup\$

I've had similar issues myself in the past.

Serving Pages

What your HTML file is possibly doing is sending HTTP requests to Localhost in order to load resources (such as Pixi.js), not actually requesting files. If not, Pixi.js may be doing that itself.

This is useful behavior on a web server, as some of the things it might be requesting could be generated dynamically, differ in response to cookies, or similar. XMLHttpRequests often go to this kind of dynamic content, and in this case the computer handling the request needs to know what to do with the file in order to generate the proper response. (If they didn't, then server-side scripts would be unable to run, you'd just get a copy of the file.) That is what the web server is there to handle.

The Flip Side

Similarly, would you want pages from the internet to be able to access all your local files? Run arbitrary scripts as they see fit? As other answers have implied, it is a huge security risk. That's why it's turned off by default. By setting up a web server you can allow access to specific files and not others, as well as specify how things are accessed or run.

What to do?

In your case, it's not so handy. If there is a webserver recommended in the tutorial, I'd use that. If not, I use Lighttpd. There's also the python SimpleHTTPServer mentioned in another answer.

Hope this helps.

\$\endgroup\$
1
\$\begingroup\$

Because of browsers' default security settings

A web browser has some extra security settings on when viewing an HTML page from local storage (like opening an HTML file with your browser). Part of these settings is to disallow AJAX requests (javascript requesting other pages). Part of this has to do that AJAX requests are always scoped to the same domain (http://example.com can only perform AJAX requests on http://example.com) and a local HTML file has no domain.

Possibly your HTML5 game framework requests its assets via AJAX in order to be more responsive.

By booting up a local web server to serve the files, the browser has a domain to scope the various AJAX requests to thus conforming with the security logic of the browser.

\$\endgroup\$
-4
\$\begingroup\$

Html5 requires a server. 123456

\$\endgroup\$
2
  • 3
    \$\begingroup\$ From the title, the asker already knows HTML5 development requires a server. They're asking for an explanation of why. Please edit your answer to explain in more detail. \$\endgroup\$
    – DMGregory ♦
    Commented Oct 23, 2020 at 19:23
  • \$\begingroup\$ "Brevity is acceptable, but fuller explanations are better." If you need to pad out your answer with "123456" to make it long enough to post, your answer is probably too brief. You can review the community guidelines for answers here. \$\endgroup\$
    – Pikalek
    Commented Oct 27, 2020 at 20:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .