Why won't a simple image load in Phaser in the browser?

Right now, I am following this tutorial: https://phaser.io/tutorials/making-your-first-phaser-3-game/index

I followed the first bit and got the part to render a sky.png into the browser, but my browser always ends up blank. I even just tried to open their completed examples, but get blank. Do I need to run it as a server or something? I tried npm install, that didn't work either.

I followed this tutorial: https://phaser.io/tutorials/making-your-first-phaser-3-game/index

The zip file it references under 'Requirements' won't load the part1.html, part.html, etc pages.

Here is the code:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 3</title>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.image('sky', 'assets/sky.png');
        this.load.image('ground', 'assets/platform.png');
        this.load.image('star', 'assets/star.png');
        this.load.image('bomb', 'assets/bomb.png');
        this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');
    }

    function update ()
    {
    }

</script>

</body>
</html>

Solution

Are you trying to open the html files directly in your browser? If so, that is why this doesn't work. Please see the Phaser Getting Started Guide for details on how to configure a local web server to serve the files.