Back to the basics: why do we absolutely NEED a web server to develop HTML5 games? Aren’t they just JavaScript?

Usually books, manuals, courses and tutorials – like the ones I am publishing on this blog for 15 years – provide answers, but this time I’m starting with a question that you probably asked yourself many times: when did JavaScript programming become that difficult?

We all remember our first script, when we just needed to open a text editor, create a basic HTML page, insert some code and run it in the browser. And it just worked. Look:

Just a plain text to start the magic.

Now everything seems to be more complicated, and require web servers, bundlers, configuration files and a lot of other stuff that might scare developers and keep them away from programming HTML5 games.

Why do ne need a web server?

Well, try let’s write another little, simple script:

<html>
    <head>
        <title>My first JavaScript project</title>
    </head>
    <body>
        <script>
            
            // create a new XMLHttpRequest object
            const xhttp = new XMLHttpRequest();
            
            // initialize a request, in GET method to "helloworld.txt" file
            xhttp.open("GET", "helloworld.txt");
            
            // send the request
            xhttp.send();
            
            // callback function to be executed XMLHttpRequest transaction completes successfully.
            xhttp.onload = function() {
		
                // write the response text, which is the content of “helloworld.txt” file
      		    document.write(this.responseText);
            }
        </script>
    </body>
</html>

helloworld.txt contains our “Hello, world!” string, so we should expect to see the same result in the browser in the previous example.

Unfortunately, this is what we get:

Something called “CORS policy” blocked our script.

What is a “CORS policy”?

Cross-Origin Resource Sharing (CORS) is an HTTP-header based process that defines whether it is safe to allow a cross-origin request.

Normally, a web page may freely embed cross-origin content like images or stylesheets, but some special content like Ajax requests, like the one in our script, are forbidden,  to prevent a malicious script on one page from obtaining access to sensitive data on another web page.

Now the point is: which cross-origin are we talking about? Everything is on our hard disk, isn’t it the same origin?

Yes, but some operations are only supported in HTTP requests, and loading something from an hard disk is not a HTTP request.

This is important for your security, to keep all your hard disk content safe, not exposing every and each file in it.

This is why we need to create a mini HTTP environment on our computer: to grant CORS a safe zone where to work and satisfy security measures.

Are you looking for an easy and free web server to install on your computer?

XAMPP is the most popular cross platform web server solution, anyway if you plan to build HTML5 games using webpack, you won’t need any third-party web server.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers