### Start Development Server

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Run the development server to view the examples browser. This command enables automatic browser and example reloads.

```bash
npm run dev
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Install all required Node.js dependencies for the examples browser. Ensure Node.js is installed first.

```bash
npm install
```

--------------------------------

### Generate Example Thumbnails

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Generates thumbnails for the examples browser. This is needed when thumbnails are updated or new examples are added. It spawns its own 'serve' instance on port 12321.

```bash
npm run build:thumbnails
```

--------------------------------

### Build and Serve Examples Browser

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Builds the examples browser and launches the development server. Run this in the '/engine/examples' directory.

```bash
npm install
npm run build
npm run serve
```

--------------------------------

### Install mkcert on Windows with Scoop

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Installs mkcert using Scoop.

```bash
scoop install mkcert
```

--------------------------------

### Install mkcert on Windows

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Installs mkcert using Chocolatey.

```bash
choco install mkcert
```

--------------------------------

### Run Development Server Without Reloads

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Start the development server without automatic browser and example reloads. Useful for stable development environments.

```bash
npm run develop
```

--------------------------------

### Install mkcert Root CA

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Installs the mkcert local root Certificate Authority into the operating system's trust store. This is a one-time setup step.

```bash
mkcert -install
```

--------------------------------

### Run Examples Directly from Source

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Develop the examples browser using the PlayCanvas engine directly from its source code. This is useful for testing unbuilt engine changes.

```bash
ENGINE_PATH=../src/index.js npm run dev
```

--------------------------------

### Example Configuration and Flags

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Examples can define default configurations and overrides using special comments. These comments control settings like keybinds, credits, and device preferences.

```javascript
// @config
//
// @keybinds
// WASD: Move
// Space: Jump
// Mouse: Look
//
// @credit
// title: Example Asset
// author: Artist Name
// source: https://example.com/asset
// license: CC BY 4.0
//
// @flag HIDDEN
// @flag ENGINE=performance
// @flag NO_DEVICE_SELECTOR
// @flag NO_MINISTATS
// @flag WEBGPU_DISABLED
// @flag WEBGL_DISABLED
// @flag PREFERRED_DEVICE webgpu
import * as pc from 'playcanvas';
...
```

--------------------------------

### Install mkcert on macOS

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Installs mkcert and nss (for Firefox testing) using Homebrew.

```bash
brew install mkcert nss
```

--------------------------------

### Hello World Example

Source: https://github.com/playcanvas/engine/blob/main/README.md

A super-simple Hello World example - a spinning cube!

```js
import {
  Application,
  Color,
  Entity,
  FILLMODE_FILL_WINDOW,
  RESOLUTION_AUTO
} from 'playcanvas';

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const app = new Application(canvas);

// fill the available space at full resolution
app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
app.setCanvasResolution(RESOLUTION_AUTO);

// ensure canvas is resized when window changes size
window.addEventListener('resize', () => app.resizeCanvas());

// create box entity
const box = new Entity('cube');
box.addComponent('render', {
  type: 'box'
});
app.root.addChild(box);

// create camera entity
const camera = new Entity('camera');
camera.addComponent('camera', {
  clearColor: new Color(0.1, 0.2, 0.3)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

// create directional light entity
const light = new Entity('light');
light.addComponent('light');
app.root.addChild(light);
light.setEulerAngles(45, 0, 0);

// rotate the box according to the delta time since the last frame
app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

app.start();
```

--------------------------------

### JSDoc Example

Source: https://github.com/playcanvas/engine/blob/main/AGENTS.md

Example of JSDoc comments for public APIs, including parameters, return values, and examples.

```javascript
/**
 * Brief description of the function.
 *
 * @param {string} name - Parameter description.
 * @param {number} [optional=0] - Optional parameter with default.
 * @returns {boolean} Return value description.
 * @example
 * const result = myFunction('test', 5);
 */
```

--------------------------------

### Example Template Initialization

Source: https://github.com/playcanvas/engine/blob/main/examples/templates/example.html

This script initializes the PlayCanvas engine example by loading necessary modules and setting up event listeners for features like hot-reloading and statistics.

```javascript
Object.defineProperty(window, 'ready', { get: () => loader.ready });
window.addEventListener('requestFiles', () => loader.sendRequestedFiles());
window.addEventListener('stats', (event) => loader.setMiniStats(!!event.detail?.state));
window.addEventListener('hotReload', () => loader.hotReload());
window.addEventListener('reloadFiles', (event) => loader.reloadFiles(event.detail));
window.addEventListener('destroy', () => loader.destroy());
window.addEventListener('beforeunload', () => loader.exit(), false);
document.addEventListener('DOMContentLoaded', () => {
    loader.start({
        engineUrl: '@ENGINE',
        fileNames: '@FILES',
        config: '@CONFIG',
    });
});
```

--------------------------------

### Start HTTPS Development Server

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Starts the development server over HTTPS. This command is used for day-to-day development when HTTPS is required.

```bash
npm run dev:https
```

--------------------------------

### Run Examples with Specific Engine Build

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Develop the examples browser using a specific ESM version of the PlayCanvas engine. Provide the path to the engine build.

```bash
ENGINE_PATH=../build/playcanvas.mjs npm run dev
```

--------------------------------

### Accessing Observer Data in Example

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

The same observer used for the PCUI control panel can be imported from 'examples/context' to access and manipulate data within the main example file.

```javascript
import { data } from 'examples/context';

console.log(data.get('flash'));
```

--------------------------------

### Test Structure Example

Source: https://github.com/playcanvas/engine/blob/main/AGENTS.md

Example of how to structure tests within the 'test/' directory.

```javascript
describe('ClassName', function () {
    describe('#methodName', function () {
        it('should do something specific', function () {
            // Test implementation
        });
    });
});
```

--------------------------------

### TODO Comment Example

Source: https://github.com/playcanvas/engine/blob/main/AGENTS.md

Example of how to use TODO comments, referencing an issue.

```javascript
// TODO: Optimize this when texture streaming is implemented (#1234)
```

--------------------------------

### Install PlayCanvas Engine

Source: https://github.com/playcanvas/engine/blob/main/README.md

Install the PlayCanvas engine using npm.

```sh
npm install playcanvas
```

--------------------------------

### Install Dependencies

Source: https://github.com/playcanvas/engine/blob/main/README.md

Installs all required Node.js dependencies for building the PlayCanvas engine.

```sh
npm install
```

--------------------------------

### Initialize PlayCanvas Application

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

This is the main file required to run an example. It initializes a PlayCanvas Application using a canvas element from the DOM. Export a 'destroy' function only when non-app resources need cleanup.

```javascript
import * as pc from 'playcanvas';

const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
window.focus();

const app = new pc.Application(canvas, {});
```

--------------------------------

### Importing Additional Files

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Additional files such as shaders, data, or scripts can be included in the example folder and imported using relative paths. Text files are imported as strings, JSON as parsed values, and modules as standard JavaScript modules.

```javascript
import shaderVert from './shader.vert';
import shaderFrag from './shader.frag';
import data from './data.json';

const assets = {
    statue: new pc.Asset('statue', 'container', { url: './assets/models/statue.glb' }),
    orbit: new pc.Asset('orbit', 'script', { url: './scripts/camera/orbit-camera.js' })
};
```

--------------------------------

### Object Creation Pattern

Source: https://github.com/playcanvas/engine/blob/main/AGENTS.md

Example of preferred object creation syntax using class syntax with TypeScript-like property declarations.

```javascript
// Prefer class syntax with TypeScript-like property declarations
class MyClass {
    /**
     * @type {GraphicsDevice}
     */
    device;

    /**
     * @type {string}
     */
    name;

    constructor(device, options = {}) {
        this.device = device;
        this.name = options.name ?? 'default';
    }

    destroy() {
        // Clean up resources
        this.device = null;
    }
}
```

--------------------------------

### Type-only Imports Example

Source: https://github.com/playcanvas/engine/blob/main/AGENTS.md

Example of using '@import' for type-only imports in JSDoc comments to help TypeScript understand types without adding runtime dependencies.

```javascript
/**
 * @import { Texture } from './texture.js'
 * @import { Shader } from './shader.js'
 */
```

--------------------------------

### Resource Management Pattern

Source: https://github.com/playcanvas/engine/blob/main/AGENTS.md

Example of resource management, ensuring a destroy() method is provided for objects holding resources.

```javascript
// Always provide destroy() method for objects holding resources
class Resource {
    constructor() {
        this._resource = createResource();
    }

    destroy() {
        this._resource?.destroy();
        this._resource = null;
    }
}
```

--------------------------------

### Test Module Structure

Source: https://github.com/playcanvas/engine/blob/main/test/README.md

Example structure for a PlayCanvas Engine unit test module.

```javascript
import { expect } from 'chai';

import { SomeClass } from '../../src/path/to/some-class.js';

describe('SomeClass', function () {

    describe('#someProperty', function () {

        it('does something', function () {
            // test code
        });

        it('does something else', function () {
            // test code
        });

    });

    describe('#constructor()', function () {

        // more tests

    });

    describe('#someFunc()', function () {

        // more tests

    });

});
```

--------------------------------

### Import External ESM Package

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

External ESM packages can be imported directly using their URLs. However, it's generally recommended to add shared files to the examples tree to avoid reliance on external network resources.

```javascript
import confetti from 'https://esm.sh/canvas-confetti@1.6.0';
```

--------------------------------

### PCUI Control Panel Component

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

This React component defines a PCUI based control panel for displaying stats or controlling the example. It uses PCUI components and binds inputs to an observer for data management.

```jsx
import { Button } from '@playcanvas/pcui/react';

/**
 * @import { Observer } from '@playcanvas/observer'
 * @import { ReactElement } from 'react'
 */

/**
 * @param {{ observer: Observer }} props - The control panel props.
 * @returns {ReactElement} The control panel.
 */
export function Controls({ observer }) {
    return (
        <Button
            text='Flash'
            onClick={() => observer.set('flash', !observer.get('flash'))}
        />
    );
}
```

--------------------------------

### Generate Development Certificates

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Generates SSL certificates (cert.pem and key.pem) for local development. Rerun this if your machine's .local hostname changes or if the .cert folder is deleted.

```bash
npm run cert
```

--------------------------------

### Build API Docs

Source: https://github.com/playcanvas/engine/blob/main/README.md

Builds the engine API reference documentation, outputting to the 'docs' directory.

```sh
npm run docs
```

--------------------------------

### Run Unit Tests

Source: https://github.com/playcanvas/engine/blob/main/test/README.md

Command to execute all unit tests.

```bash
npm test
```

--------------------------------

### PR Description Format

Source: https://github.com/playcanvas/engine/blob/main/AGENTS.md

The recommended format for PR descriptions, including structure and content guidelines.

```markdown
```
**Format as a single code block**: Always deliver PR descriptions wrapped in triple backticks for easy copy/paste
**Structure**:
  - Brief title and overview
  - Bullet points for functionality changes
  - Technical details section (if relevant)
  - **Clearly list all public API changes** with before/after code examples
  - List updated examples (if applicable)
  - Performance considerations (if relevant)
**Focus on user-facing changes**: What developers using the engine will see/use
**Be concise but complete**: Include all breaking changes and new APIs
**Avoid excessive detail**: Group related changes together, don't list every tiny implementation detail or internal refactoring
**Only document public APIs**: Do not list functionality tagged with `@ignore`, `@protected`, or `@private` as these are internal implementation details
```
```

--------------------------------

### Build Engine

Source: https://github.com/playcanvas/engine/blob/main/README.md

Builds all engine flavors and type declarations, outputting to the 'build' directory.

```sh
npm run build
```

--------------------------------

### Add Extra Hostnames or LAN IPs to Certificates

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Generates certificates including specified LAN IP addresses. This is useful if the .local hostname does not resolve on certain devices. The -- is required to forward arguments to the underlying script.

```bash
npm run cert -- 10.0.0.42 192.168.1.50
```

--------------------------------

### Enable Insecure Origin for Quest Browser

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Opens Chrome flags to allow insecure origins, bypassing certificate validation for local development on Quest devices. This is a workaround for Quest Browser's unreliable user-installed CA support.

```bash
adb shell am start -a android.intent.action.VIEW -d "chrome://flags/#unsafely-treat-insecure-origin-as-secure"
```

--------------------------------

### Troubleshoot Vite 403 Error

Source: https://github.com/playcanvas/engine/blob/main/examples/README.md

Addresses a Vite 403 error by either adding the custom hostname to vite.config.mjs or by using the default .local hostname.

```javascript
// Add hostname to vite.config.mjs
// allowedHosts: ['your.custom.hostname']
```

--------------------------------

### Code Coverage Report

Source: https://github.com/playcanvas/engine/blob/main/test/README.md

Command to generate a code coverage report.

```bash
npm run test:coverage
```

--------------------------------

### Module Dependency Hierarchy

Source: https://github.com/playcanvas/engine/blob/main/AGENTS.md

The codebase follows a strict hierarchical structure to maintain clean architecture: core → platform → scene → framework. Lower-level modules cannot import from or use instances from higher-level modules.

```text
core → platform → scene → framework
```

--------------------------------

### Scaffold a PlayCanvas Project

Source: https://github.com/playcanvas/engine/blob/main/README.md

Scaffold a full PlayCanvas project using create-playcanvas.

```sh
npm create playcanvas@latest
```

--------------------------------

### Replace URL Path in History

Source: https://github.com/playcanvas/engine/blob/main/examples/templates/share.html

This snippet modifies the browser's history to replace the current URL path with a new one, optionally preserving a 's' query parameter. Useful for managing application state or routing within a single-page application.

```javascript
(function () {
    var s = new URLSearchParams(window.location.search).get('s');
    history.replaceState(null, '', '/#/@PATH' + (s ? '?s=' + s : ''));
})();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.