Building Phaser games for Cloudflare Pages

Several WynnWorld games are built with Phaser 3, TypeScript and Vite, then deployed as static files. The part that looks simple—uploading a dist folder—only stays simple if the build was prepared for the final URL from the beginning.

1. Treat the deployment path as part of the build

A game hosted at a path such as /neon-breaker/ cannot assume every asset lives at the domain root. Vite’s base configuration and any hand-written asset references need to match the deployment target. A game can work perfectly on localhost and still show a blank screen after upload if those paths are wrong.

2. Keep the production folder self-contained

For these small games I prefer a build where the deployment folder contains everything needed to run: HTML, JavaScript, CSS and game assets. No backend is required, and best scores can be stored in browser localStorage. That reduces hosting complexity and makes rollback straightforward.

3. Desktop and mobile are separate test cases

Keyboard controls are not enough for a browser arcade. WynnWorld games add touch or drag controls and are tested at narrow widths. UI elements such as score, lives and restart buttons need enough spacing for touch, not only enough room to look correct on a desktop monitor.

4. Deployment is not finished when the page opens

I check the final URL, asset loading, mobile controls, localStorage behaviour and direct navigation to the game subfolder. These checks catch the common problem where the homepage works but a refresh or direct link to a nested route fails.

The useful lesson: build for the final path, not just for localhost.