Phaser 3 Tutorial. HTML Pages don't load

Phaser 3
1

Hello All,
I am working through the Phaser 3 Tutorial for "Making your first Phaser 3 game. I downloaded the zip package and it contains Parts 1-10. None of the html pages load, they just open with a blank page. I have already made sure my XAMP Server is running and put the html files in the htdocs folder for XAMP. It seems these tutorial files haven’t been updated in 2 years. Does anyone have any clues as to why the tutorial html pages won’t load? I was thinking maybe because the linked JavaScript files are no longer valid. Any help would be greatly appreciated. Thank You.

2

Hi, tested quickly and it works…
Does your XAMP server run ok with other files?
Do you have any error in the browser dev tools, in the console?

3

Hello,
Well did some testing. I am not getting any errors. One thing that does work is when I right click the html files and then open them in Dreamweaver, I use the browser preview in Dreamweaver and it opens. When I try and open them just normally they don’t. My XAMP is running Apache on both ports 80 and 4430. I changed the port number from 443 to 4430 since I am using VMware. I don’t know why it is working fine with Dreamweaver, I assume that Dreamweaver maybe runs it’s own local host?

4

Try a higher port instead of 80, change it to something like 8080 and try to open your files from your localhost in that port…

5

Ah yeah didn’t work :frowning:

6

Ok I am suspecting there is something going on with the relative path in the page code. I am going to mess around with it little bit later. Seems like Dreamweaver is fixing the relative path problem but opening it regularly it doesn’t work.

7

Yeah, it sounds like a web server problem. If you aren’t planning on doing any PHP server-side development, I have honestly always thought that XAMPP or something along those lines is overkill just to do some HTML5 game development.

I would either check out http-server (a node.js tool that allows you to start a web server from the command line in any folder you want). You will probably want to use some tool eventually that requires node.js if you do any kind of web development, so you may as well go ahead and install it now. This is personally the one I use. (https://www.npmjs.com/package/http-server)

Another of the dead-simple development web servers is the Chrome Web Server (https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en).

I find both of these to be MUCH simpler options for an HTML5 development web server than a full-blown web server like Apache or IIS. They are much less fiddley, they are designed for exactly the purpose you need it for rather than for someone wanting to host a website to the public and have much, much fewer options and configurations that can trip you up.

Hope this helps!

EDIT: Here is a 1:38 tutorial on how to setup and use http-server! https://www.youtube.com/watch?v=vnPemSnnJYY