How to scaffold a vanilla JavaScript or Phaser game using Vite?

Run npm create vite@latest, pick the vanilla template (or vanilla-ts), then add Phaser as a dependency and import it in main.js. Vite gives you a dev server with hot reload and a build command that outputs static files any HTML5 host or SDK can load.

At a glance

Scaffold with npm create vite@latest my-game -- --template vanilla (use vanilla-ts for TypeScript). This gives you index.html, a src/main.js entry point, and a dev server with hot reload. For Phaser, run npm install phaser and import it in main.js:

import Phaser from 'phaser';
const config = {
 type: Phaser.AUTO,
 scene: { preload, create, update }
};
new Phaser.Game(config);

Keep game assets in public/ so Vite copies them unprocessed into the build. Run npm run dev while coding and npm run build to produce a static dist/ folder you can upload to any HTML5 host.

What about ads and cross-platform SDK calls?

If you plan to add ads or cross-platform features later, wire them in as plain JavaScript calls from your game code, the same way Unity WebGL calls out through a .jslib plugin or Godot 4 uses JavaScriptBridge.

For monetization, Playgama Ad connects one JavaScript SDK to 11 demand partners, including Google Ad Manager.

Sources

• Playgama Bridge SDK – Getting started
• MDN: Game development
• Unity manual: interacting with browser scripting
• Playgama Bridge GitHub

Related questions

Do I need Vite’s react or vue template for Phaser?

No. Phaser doesn’t need a UI framework, so the plain vanilla or vanilla-ts template is enough; add Phaser as an npm dependency and import it directly.

Where should game assets go in a Vite project?

Put images, audio and JSON in the public/ folder; Vite copies its contents unprocessed to dist/, keeping asset paths stable between dev and build.

Last updated: 24 September 2026