Phaser Deployment & Usage Guide

1. Prerequisites

• Node.js: Version 18.x LTS or higher (20.x recommended)
• Package Manager: npm 9+, Yarn 1.22+, pnpm 8+, or Bun 1.0+
• Browser: Modern browser with Canvas and WebGL support (Chrome, Firefox, Safari, Edge)
• Git: For cloning templates and version control
• Code Editor: VS Code recommended (includes automatic TypeScript definition detection)

2. Installation

Method A: Create Phaser Game (Recommended)

Use the official CLI tool for interactive project scaffolding with your choice of framework and bundler:

# npm
npm create @phaserjs/game@latest my-game

# npx (no global install required)
npx @phaserjs/create-game@latest my-game

# Alternative package managers
yarn create @phaserjs/game my-game
pnpm create @phaserjs/game@latest my-game
bun create @phaserjs/game@latest my-game

Supported Combinations:

• Frameworks: Vue.js, React, Angular, Next.js, SolidJS, Svelte, Remix
• Bundlers: Vite, Rollup, Parcel, Webpack, ESBuild, Import Map, Bun
• Languages: JavaScript or TypeScript (select during CLI prompts)

Method B: Manual NPM Installation

For existing projects:

npm install phaser

Method C: CDN Integration

For simple HTML projects without build tools:

<!-- jsDelivr (recommended) -->
<script src="//cdn.jsdelivr.net/npm/phaser@3.88.2/dist/phaser.min.js"></script>

<!-- Cloudflare cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.88.2/phaser.min.js"></script>

3. Configuration

TypeScript Configuration

Add to tsconfig.json to enable Phaser type definitions:

{
  "compilerOptions": {
    "lib": ["es6", "dom", "dom.iterable", "scripthost"],
    "typeRoots": ["./node_modules/phaser/types"],
    "types": ["Phaser"]
  }
}

Basic Game Configuration

Create src/main.js (or main.ts):

import Phaser from 'phaser';

const config = {
  type: Phaser.AUTO, // Automatically selects WebGL or Canvas
  width: 800,
  height: 600,
  parent: 'game-container',
  backgroundColor: '#000000',
  scene: {
    preload: preload,
    create: create,
    update: update
  },
  physics: {
    default: 'arcade', // or 'matter' for Matter.js physics
    arcade: {
      gravity: { y: 300 },
      debug: false
    }
  }
};

const game = new Phaser.Game(config);

function preload() {
  // Load assets before game starts
}

function create() {
  // Initialize Game Objects: Container, Graphics, Text, Mesh, etc.
  // Example: this.add.container(400, 300);
}

function update(time, delta) {
  // Game loop logic
}

Vite Configuration (Recommended)

vite.config.js for proper asset handling:

export default {
  base: './', // Critical for relative paths in production
  build: {
    outDir: 'dist',
    assetsInlineLimit: 0, // Prevent inlining of textures/audio
    rollupOptions: {
      output: {
        manualChunks: {
          phaser: ['phaser'] // Separate Phaser into its own chunk
        }
      }
    }
  }
};

4. Build & Run

Development Server

cd my-game
npm install
npm run dev

Access at http://localhost:5173 (Vite) or the port specified in your terminal.

Production Build

npm run build

Generates optimized static files in dist/ folder.

Preview Production Build

npm run preview

Serves the dist/ folder locally to verify before deployment.

5. Deployment

Static Web Hosting

Deploy the dist/ folder to any static host:

• Netlify: Drag dist/ folder to deploy UI or use netlify deploy --prod --dir=dist
• Vercel: vercel --prod (ensure vite.config.js uses base: './')
• GitHub Pages: Configure Actions to build and deploy dist/ to gh-pages branch
• AWS S3: Sync dist/ to bucket with static website hosting enabled

Single Page Application (SPA) Routing

For deep linking support, add configuration files:

Netlify (public/_redirects):

/*    /index.html   200

Vercel (vercel.json):

{
  "routes": [
    { "src": "/[^.]+", "dest": "/index.html", "status": 200 }
  ]
}

Platform-Specific Deployments

Mobile (iOS/Android):

• Use Capacitor or Cordova to wrap the dist/ folder
• Or compile using 3rd party tools referenced in Phaser documentation

Desktop (Steam/Electron):

• Wrap dist/ contents in an Electron main process
• Configure mainWindow.loadFile('dist/index.html')

YouTube Playables:

• Build with npm run build
• Upload dist/ contents as zip bundle per YouTube specifications
• Ensure file size limits and API compliance

Discord Activities:

• Host statically with Discord SDK integration
• Configure OAuth2 and Activity Proxy URLs in Discord Developer Portal

6. Troubleshooting