{"id":14529,"date":"2026-09-24T10:32:08","date_gmt":"2026-09-24T10:32:08","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=14529"},"modified":"2026-09-24T10:32:08","modified_gmt":"2026-09-24T10:32:08","slug":"how-to-scaffold-a-vanilla-javascript-or-phaser-game-using-vi","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-to-scaffold-a-vanilla-javascript-or-phaser-game-using-vi\/","title":{"rendered":"How to scaffold a vanilla JavaScript or Phaser game using Vite?"},"content":{"rendered":"

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.<\/strong><\/p>\n

At a glance<\/h2>\n\n\n\n\n\n\n\n
Fact<\/th>\nValue<\/th>\nSource<\/th>\n<\/tr>\n<\/thead>\n
Vite scaffold command for new project<\/td>\nnpm create vite@latest<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
Phaser installed as normal npm dependency<\/td>\nnpm install phaser<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
Vite build output folder<\/td>\ndist\/<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

import Phaser from 'phaser';\nconst config = {\n type: Phaser.AUTO,\n scene: { preload, create, update }\n};\nnew Phaser.Game(config);<\/code><\/pre>\n
Keep game assets in public\/<\/code> so Vite copies them unprocessed into the build. Run npm run dev<\/code> while coding and npm run build<\/code> to produce a static dist\/<\/code> folder you can upload to any HTML5 host.<\/p>\n
What about ads and cross-platform SDK calls?<\/h2>\n
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<\/a> or Godot 4 uses JavaScriptBridge<\/code>. <\/p>\n
For monetization, Playgama Ad<\/a> connects one JavaScript SDK to 11 demand partners, including Google Ad Manager.<\/p>\n
Sources<\/h2>\n