# Setting up a project to build a JavaScript game with Phaser
> Learn how to set up a modern Phaser game with npm and Vite, create a scene, run the local development server, and build the game for production.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-03-24 | Updated: 2026-07-18 | Topics: [Phaser](https://flaviocopes.com/tags/phaser/) | Canonical: https://flaviocopes.com/phaser-setup/
Phaser is an open source framework for building 2D games with JavaScript or TypeScript.
It renders through WebGL or Canvas in the browser. You can publish the result as a web game or package it for other platforms with additional tools.
This tutorial creates a small Phaser project with npm and Vite. Phaser also provides an official interactive project generator if you prefer a ready-made template.
## Create the project
Create a directory and install Phaser plus Vite:
```bash
mkdir phaser-game
cd phaser-game
npm init -y
npm install phaser
npm install --save-dev vite
```
You can instead choose an official template with:
```bash
npm create @phaserjs/game@latest
```
The generator offers current JavaScript, TypeScript, framework, and bundler combinations. See Phaser's [installation guide](https://docs.phaser.io/phaser/getting-started/installation) and [project templates](https://docs.phaser.io/phaser/getting-started/project-templates).
## Add development scripts
Update the `scripts` field in `package.json`:
```json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
```
[Vite](https://vite.dev/guide/) provides the local development server, browser reloads, module bundling, and the production build. There is no need to install Parcel or BrowserSync globally.
## Create the HTML page
Create `index.html`:
```html
My Phaser game
```
Phaser will add its canvas inside the `#game` element.
## Create a scene
Create `src/main.js`:
```js
import Phaser from 'phaser'
class MainScene extends Phaser.Scene {
constructor() {
super('main')
}
create() {
this.add
.text(400, 250, 'Hello, Phaser!', {
color: '#ffffff',
fontFamily: 'sans-serif',
fontSize: '42px'
})
.setOrigin(0.5)
const player = this.add.rectangle(400, 350, 80, 80, 0x00aaff)
this.tweens.add({
targets: player,
angle: 360,
duration: 2000,
repeat: -1
})
}
}
const config = {
type: Phaser.AUTO,
parent: 'game',
width: 800,
height: 600,
backgroundColor: '#111827',
scene: MainScene
}
new Phaser.Game(config)
```
`Phaser.Game` creates the renderer and starts the game loop.
`Phaser.AUTO` tries WebGL and falls back to Canvas when needed. The scene's `create()` method runs after the scene is ready, so it is a good place to create initial game objects.
The [Phaser Game guide](https://docs.phaser.io/phaser/concepts/game) explains the configuration object and lifecycle.
## Run the game
Start the development server:
```bash
npm run dev
```
Open the local URL printed by Vite.
Do not open `index.html` directly with a `file://` URL. Games commonly load modules, images, audio, and data through browser APIs that expect an HTTP server.
## Add local assets
Put game files under `public/assets/`. For example:
```text
public/
assets/
logo.png
```
Load them in a scene's `preload()` method and use them in `create()`:
```js
class MainScene extends Phaser.Scene {
preload() {
this.load.image('logo', '/assets/logo.png')
}
create() {
this.add.image(400, 300, 'logo')
}
}
```
Asset keys such as `logo` identify loaded resources inside the game. Use local assets or a reliable host you control rather than depending on an examples server at runtime.
Phaser's [first game tutorial](https://docs.phaser.io/phaser/getting-started/making-your-first-phaser-game) introduces loading, scenes, sprites, input, and Arcade Physics.
## Build for production
Create an optimized build:
```bash
npm run build
```
Vite writes the result to `dist/`.
Test that build locally:
```bash
npm run preview
```
Deploy the generated directory to a static host. If the game will live under a subdirectory instead of the domain root, configure Vite's base path before building.
This is the introduction to the Phaser series. [See the other Phaser posts](https://flaviocopes.com/tags/phaser/).