### Install WebSpatial SDK and Dependencies

Source: https://webspatial.dev/docs/quick-example

Installs the WebSpatial SDK packages along with other required libraries like @google/model-viewer and three.js, as well as development dependencies for the build process. Run this from the project root.

```bash
npm install --save @webspatial/react-sdk @webspatial/core-sdk @google/model-viewer three
npm install --save-dev @webspatial/builder @webspatial/platform-visionos @webspatial/vite-plugin vite-plugin-html
```

```bash
pnpm add @webspatial/react-sdk @webspatial/core-sdk @google/model-viewer three
pnpm add --save-dev @webspatial/builder @webspatial/platform-visionos @webspatial/vite-plugin vite-plugin-html
```

```bash
yarn add @webspatial/react-sdk @webspatial/core-sdk @google/model-viewer three
yarn add --dev @webspatial/builder @webspatial/platform-visionos @webspatial/vite-plugin vite-plugin-html
```

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

### Install Project Dependencies

Source: https://webspatial.dev/docs/quick-example

Installs the necessary project dependencies after creating the React + Vite + TypeScript project. This command should be run from the project's root directory.

```bash
cd YOUR_PROJECT_PATH
npm install
```

```bash
cd YOUR_PROJECT_PATH
pnpm install
```

```bash
cd YOUR_PROJECT_PATH
yarn install
```

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

### Install React Router DOM for Client-Side Routing

Source: https://webspatial.dev/docs/quick-example

Installs the `react-router-dom` library, which enables client-side routing capabilities in a React application. This package is essential for managing navigation between different views or pages within a single-page application.

```bash
npm install --save react-router-dom  
```

```bash
pnpm add react-router-dom  
```

```bash
yarn add react-router-dom  
```

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

### Install PNPM Globally

Source: https://webspatial.dev/docs/development-guide/web-projects-that-support-webspatial/adding-pnpm

Commands to ensure PNPM is installed globally on your system. You can use Corepack to enable it or install it directly using npm.

```shell
corepack enable pnpm
```

```shell
npm install -g pnpm
```

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

### Set Default Start Scene Size in Web App Manifest

Source: https://webspatial.dev/docs/quick-example

Defines the initial dimensions for the application's start scene within the Web App Manifest. This configuration is used when running the app with the `webspatial-builder run` command. The properties 'width' and 'height' specify the scene's default size.

```json
{
  "xr_main_scene": {
    "default_size": {
      "width": 500,
      "height": 1000
    }
  }
}

```

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

### Run WebSpatial App using npm, pnpm, or Yarn

Source: https://webspatial.dev/docs/quick-example

Executes the WebSpatial builder to run the application in the development environment. Requires the XR device server URL as a base. The command automatically launches the visionOS simulator, installs, and runs the packaged app. Ensure the `$XR_DEV_SERVER` variable is correctly set.

```bash
npx webspatial-builder run --base=$XR_DEV_SERVER  
```

```bash
pnpm dlx webspatial-builder run --base=$XR_DEV_SERVER  
```

```bash
yarn dlx webspatial-builder run --base=$XR_DEV_SERVER  
```

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

### Add NPM Scripts for PNPM Operations

Source: https://webspatial.dev/docs/development-guide/web-projects-that-support-webspatial/adding-pnpm

Example npm scripts to be added to your `package.json` file. These scripts simplify common PNPM tasks like cleaning and updating dependencies.

```json
"install:clean": "rm -rf node_modules && pnpm install",
"install:update": "rm -rf node_modules pnpm-lock.yaml package-lock.json && pnpm install"
```

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

### Generate pnpm-lock.yaml with PNPM

Source: https://webspatial.dev/docs/development-guide/web-projects-that-support-webspatial/adding-pnpm

Commands to remove existing node_modules and install dependencies using PNPM, which automatically generates the `pnpm-lock.yaml` file.

```shell
rm -rf node_modules
pnpm install
```

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

### Run Webspatial Builder with Dedicated Dev Server (CLI)

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/generate-a-webspatial-specific-website

Execute the webspatial-builder run command with a specified development server URL using npm, pnpm, or Yarn. This command packages and installs the visionOS app in the simulator, replacing the default start URL with the provided development server URL.

```shell
npx webspatial-builder run --base=http://localhost:3001/webspatial/avp/  

```

```shell
pnpm dlx webspatial-builder run --base=http://localhost:3001/webspatial/avp/  

```

```shell
yarn dlx webspatial-builder run --base=http://localhost:3001/webspatial/avp/  

```

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

### Create React + Vite + TypeScript Project

Source: https://webspatial.dev/docs/quick-example

Creates a new React project with Vite and TypeScript support using npm, pnpm, or Yarn. This is the initial step for setting up a WebSpatial-compatible web project.

```bash
npx create-vite --template react-ts
```

```bash
pnpm dlx create-vite --template react-ts
```

```bash
yarn dlx create-vite --template react-ts
```

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

### Web App Manifest Configuration for WebSpatial Apps

Source: https://webspatial.dev/docs/introduction/built-on-the-existing-web-ecosystem

Provides an example of a `manifest.webmanifest` file used to configure app-level settings for a WebSpatial application, following the PWA standard. This includes defining the start URL, scope, display mode, default scene size, and icons.

```json
{
  "name": "TechShop - Premium Tech Products",
  "start_url": "/",
  "scope": "/",
  "display": "minimal-ui",
  "xr_main_scene": {
    "default_size": {
      "width": 1700,
      "height": 1200
    }
  },
  "icons": [
    {
      "src": "/icons/icon-1024x1024.png",
      "sizes": "1024x1024",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}
```

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

### Configure Vite for WebSpatial

Source: https://webspatial.dev/docs/quick-example

Updates the `vite.config.ts` file to include the WebSpatial Vite plugin and configure `vite-plugin-html` to inject the `$XR_ENV` environment variable. This is crucial for integrating the SDK with the build process.

```typescript
import {
  defineConfig
} from "vite";
import react from "@vitejs/plugin-react";
import webSpatial from "@webspatial/vite-plugin";
import { createHtmlPlugin } from "vite-plugin-html";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    webSpatial(),
    createHtmlPlugin({
      inject: {
        data: {
          XR_ENV: process.env.XR_ENV,
        },
      },
    }),
  ],
});
```

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

### Create .env.example for Environment Variables

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-2-add-build-tool-for-packaged-webspatial-apps/optional-simplify-webspatial-builder-using-dotenv

This snippet shows how to create an example .env file to define environment variables. This file should be committed to Git to inform developers about required variables. It lists common XR-related variables.

```shell
XR_DEV_SERVER=
XR_PRE_SERVER=
XR_PROD_SERVER=
XR_BUNDLE_ID=
XR_TEAM_ID=
XR_VERSION=
XR_DEV_NAME=
XR_DEV_PASSWORD=
```

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

### Install and use gh-pages for GitHub Pages deployment

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/generate-a-webspatial-specific-website

This command installs the `gh-pages` package as a development dependency and demonstrates its usage to deploy the WebSpatial-specific build output (from `dist/webspatial/avp`) to GitHub Pages. This is for deploying the visionOS version separately.

```bash
npm install -D gh-pages
gh-pages -d dist/webspatial/avp
```

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

### Configure .npmrc for PNPM

Source: https://webspatial.dev/docs/development-guide/web-projects-that-support-webspatial/adding-pnpm

Create an `.npmrc` file in the project root to configure PNPM settings. These settings help manage dependencies and peer dependencies.

```shell
shamefully-hoist=true
strict-peer-dependencies=false
auto-install-peers=true
```

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

### Copy .env.example to .env.local

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-2-add-build-tool-for-packaged-webspatial-apps/optional-simplify-webspatial-builder-using-dotenv

This command copies the example environment variables file to a local file. The local file is intended for developer-specific configurations and is typically excluded from version control.

```shell
cp .env.example .env.local
```

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

### Start production server with Next.js

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/generate-a-webspatial-specific-website

This command starts the Next.js production server. It's used in conjunction with Next.js SSR deployments for WebSpatial applications, allowing for server-side rendering and dynamic content serving.

```bash
npm run start
```

```bash
pnpm run start
```

```bash
yarn run start
```

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

### Configure React Router for Client-Side Routing

Source: https://webspatial.dev/docs/quick-example

Sets up client-side routing for a React application using `react-router-dom`. It defines routes for the root path ('/') and a '/second-page' path, rendering the `SecondPage` component for the latter. The `basename` is dynamically set using `__XR_ENV_BASE__` for correct URL handling in different environments.

```tsx
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import SecondPage from "./SecondPage";

// ... existing imports and component definition

  return (
    <Router basename={__XR_ENV_BASE__}>
      <Routes>
        <Route path="/second-page" element={<SecondPage />} />
        <Route
          path="/"
          element={
            /* Move all JSX from the App component in src/App.tsx into here */
          }
        />
      </Routes>
    </Router>
  );

```

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

### Add Navigation Links and Buttons to New Scene

Source: https://webspatial.dev/docs/quick-example

Appends navigation elements to the main application component. It includes a standard HTML link and a button that programmatically opens the '/second-page' route in a new window. This demonstrates how to trigger navigation to a different scene within the WebSpatial app.

```tsx
              <p className="read-the-docs">
                Click on the Vite and React logos to learn more
              </p>
              <div className="card" style={{ marginTop: "0px" }}>
                <h2>Open Second Page</h2>
                <p>
                  <Link to="/second-page" target="_blank">
                    Open Second Page with a Link
                  </Link>
                </p>
                <p>
                  <button
                    onClick={() => {
                      window.open(`${__XR_ENV_BASE__}/second-page`, "secondScene");
                    }}>
                    Open Second Page with a Button
                  </button>
                </p>
              </div>

```

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

### Configure TypeScript for JSX

Source: https://webspatial.dev/docs/quick-example

Modifies TypeScript configuration files (`tsconfig.app.json` and `tsconfig.node.json`) to set the `jsxImportSource` to `@webspatial/react-sdk`. This ensures proper JSX compilation for the WebSpatial React SDK.

```json
{
  "compilerOptions": {
    "jsxImportSource": "@webspatial/react-sdk",

```

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

### Install Tailwind CSS, PostCSS, and Autoprefixer

Source: https://webspatial.dev/docs/development-guide/web-projects-that-support-webspatial/adding-tailwindcss-and-postcss

Installs Tailwind CSS, PostCSS, and Autoprefixer as development dependencies using npm, pnpm, or Yarn. These packages are essential for utility-first CSS styling and cross-browser compatibility.

```bash
npm install -D tailwindcss postcss autoprefixer  
```

```bash
pnpm add -D tailwindcss postcss autoprefixer  
```

```bash
yarn add --dev tailwindcss postcss autoprefixer  
```

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

### Update .gitignore for PNPM Files

Source: https://webspatial.dev/docs/development-guide/web-projects-that-support-webspatial/adding-pnpm

Add PNPM-specific files and directories to your `.gitignore` file to prevent them from being committed to version control.

```gitignore
.pnpm-store/
.pnpm-state.json
.pnpmfile.cjs
```

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

### Create a New Scene Component (React)

Source: https://webspatial.dev/docs/quick-example

A basic React component for a 'Second Page' within a WebSpatial application. It includes a simple counter using the `useState` hook and displays a heading and a button to increment the counter. This component is intended for use with client-side routing.

```tsx
import { useState } from "react";
import "./App.css";

function SecondPage() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>Second Page</h1>
      <div className="card">
        <button onClick={() => setCount(count => count + 1)}>
          count is {count}
        </button>
      </div>
    </div>
  );
}

export default SecondPage;

```

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

### Setting Base URL for WebSpatial App

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-2-add-build-tool-for-packaged-webspatial-apps/options-of-the-webspatial-builder

This example demonstrates how to configure the root part of the URL for HTML requests in a WebSpatial App Shell using the `--base` option or the `$XR_DEV_SERVER` environment variable. It shows how this affects the final URL when combined with the `start_url` from the manifest, especially for development servers.

```bash
# Example 1: start_url and --base with domain
# "start_url": "/home"
# --base="http://mydomain.com/app/"
# Resulting URL: http://mydomain.com/app/home
```

```bash
# Example 2: start_url with different domain and --base
# "start_url": "http://otherdomain.com/home"
# --base="http://mydomain.com/app/"
# Resulting URL: http://mydomain.com/app/home
```

```bash
# Example 3: start_url and --base with relative path
# "start_url": "/home"
# --base="/app/"
# Resulting URL: /app/home
```

```bash
# Best practice for development server:
# Set $XR_DEV_SERVER to point at a dedicated Dev Server, e.g., http://localhost:3000/webspatial/avp/
```

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

### Use dotenv-cli in npm Scripts

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-2-add-build-tool-for-packaged-webspatial-apps/optional-simplify-webspatial-builder-using-dotenv

This example demonstrates how to wrap existing npm scripts with 'dotenv -e .env.local -- sh -c'. This ensures that environment variables defined in '.env.local' are loaded before the script executes, simplifying the usage of tools like 'webspatial-builder'.

```json
"run:avp": "dotenv -e .env.local -- sh -c 'webspatial-builder run --base=$XR_DEV_SERVER'",
"build:avp": "dotenv -e .env.local -- sh -c 'webspatial-builder build --base=$XR_PRE_SERVER --bundle-id=$XR_BUNDLE_ID --teamId=$XR_TEAM_ID'",
"publish:avp": "dotenv -e .env.local -- sh -c 'webspatial-builder publish  --base=$XR_PROD_SERVER --bundle-id=$XR_BUNDLE_ID --teamId=$XR_TEAM_ID --version=$XR_VERSION --u=$XR_DEV_NAME --p=$XR_DEV_PASSWORD'"
```

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

### Vite Configuration for Custom Base Path and Output Directory

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/generate-a-webspatial-specific-website

A Vite configuration file (vite.config.js) demonstrating how to set a custom base path for production builds based on the XR_ENV variable and configure the output directory. This setup allows differentiating site versions and skipping the automatic '/webspatial/avp/' prefix.

```javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import WebSpatial from "@webspatial/vite-plugin";

// https://vite.dev/config/
export default defineConfig({
    base: process.env.NODE_ENV === 'production'
      && (
        process.env.XR_ENV !== 'avp'
          ? 'https://myproject.com/'
         : 'https://webspatial.myproject.com/'
      ) || ''
    build: {
      outDir: 'dist',
    },
    plugins: [
      WebSpatial({
        outputDir: "",
      }),
      react(),

```

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

### Configure Tailwind CSS Content Paths

Source: https://webspatial.dev/docs/development-guide/web-projects-that-support-webspatial/adding-tailwindcss-and-postcss

Example configuration for `tailwind.config.js` specifying the template paths that Tailwind CSS should scan for classes. This ensures that Tailwind generates only the necessary CSS based on your project's markup and components.

```javascript
/** @type {import('tailwindcss').Config} */  
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

```

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

### Run Webspatial Builder with Dev Server via Environment Variable

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/generate-a-webspatial-specific-website

Configure the dedicated Dev Server URL using the XR_DEV_SERVER environment variable and execute the run:avp script with npm, pnpm, or Yarn. This method achieves the same result as directly passing the --base option, packaging and installing the app in the simulator.

```shell
XR_DEV_SERVER=http://localhost:3001/webspatial/avp/ npm run run:avp  

```

```shell
XR_DEV_SERVER=http://localhost:3001/webspatial/avp/ pnpm run run:avp  

```

```shell
XR_DEV_SERVER=http://localhost:3001/webspatial/avp/ yarn run:avp  

```

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

### Example Web App Manifest JSON

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/prerequisite-become-a-minimal-pwa/add-web-app-manifest

A basic Web App Manifest file in JSON format. It includes essential properties like the app's name, starting URL, display mode, and an array of icons with their source, size, type, and purpose. This manifest is crucial for Progressive Web Apps and WebSpatial apps.

```json
{
  "name": "My Awesome App",
  "start_url": "/",
  "display": "minimal-ui",
  "icons": [
    {
      "src": "/pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/pwa-1024x1024.png",
      "sizes": "1024x1024",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}
```

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

### Initialize Scene with Custom Size using WebSpatial SDK

Source: https://webspatial.dev/docs/quick-example

Initializes a scene named 'secondScene' with a default size of 500x500 pixels. It imports the `initScene` API from the WebSpatial SDK. The function returns the updated configuration including the default size. It then opens the scene in a new window. This is useful for setting initial dimensions for specific scenes.

```typescript
import { initScene } from "@webspatial/react-sdk";

// ... inside a component or event handler

initScene("secondScene", prevConfig => {
  return {
    ...prevConfig,
    defaultSize: {
      width: 500,
      height: 500,
    },
  };
});
window.open(`${__XR_ENV_BASE__}/second-page`, "secondScene");
```

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

### Install dotenv and dotenv-cli for npm

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-2-add-build-tool-for-packaged-webspatial-apps/optional-simplify-webspatial-builder-using-dotenv

These commands install the 'dotenv' and 'dotenv-cli' packages as development dependencies for npm, pnpm, and Yarn. These packages are used to load environment variables from .env files into the Node.js environment.

```shell
npm install -D dotenv dotenv-cli
```

```shell
pnpm add -D dotenv dotenv-cli
```

```shell
yarn add --dev dotenv dotenv-cli
```

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

### Add npm Script for Dedicated Dev Server

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/generate-a-webspatial-specific-website

Demonstrates how to add an npm script to your package.json for easily running the dedicated development server with the XR_ENV=avp setting, improving workflow efficiency.

```json
"dev": "vite",
"dev:avp": "XR_ENV=avp vite",
```

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

### Install vite-plugin-html Plugin (Package Managers)

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/check-if-running-in-webspatial-mode

Provides commands for installing the `vite-plugin-html` package using different Node.js package managers: npm, pnpm, and Yarn. This plugin is necessary for injecting environment variables into the HTML file during the Vite build process.

```bash
npm install -D vite-plugin-html
```

```bash
pnpm add -D vite-plugin-html
```

```bash
yarn add --dev vite-plugin-html
```

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

### Configure npm Scripts for WebSpatial Builder Commands

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-2-add-build-tool-for-packaged-webspatial-apps

Sets up npm scripts in `package.json` to execute WebSpatial Builder commands with predefined environment variables, simplifying command-line usage. This includes scripts for running, building, and publishing visionOS apps.

```json
"run:avp": "webspatial-builder run --base=$XR_DEV_SERVER",
"build:avp": "webspatial-builder build --base=$XR_PRE_SERVER --bundle-id=$XR_BUNDLE_ID --teamId=$XR_TEAM_ID",
"publish:avp": "webspatial-builder publish  --base=$XR_PROD_SERVER --bundle-id=$XR_BUNDLE_ID --teamId=$XR_TEAM_ID --version=$XR_VERSION --u=$XR_DEV_NAME --p=$XR_DEV_PASSWORD"
```

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

### Example: Opening New Scenes with Link and Button (React)

Source: https://webspatial.dev/docs/development-guide/using-the-webspatial-api/manage-multiple-scenes

An example using React's `Link` component and a button with an `onClick` handler to open a new scene. The link opens a new scene directly, while the button uses `window.open()` with a specific name 'secondScene', ensuring only one instance is created if clicked multiple times.

```jsx
<div className="card" style={{ marginTop: "0px" }}>  
  <h2>Open Second Page</h2>  
  <p>  
    <Link to="/second-page" target="_blank">  
      Open Second Page with a Link  
    </Link>  
  </p>  
  <p>  
    <button  
      onClick={() => {  
        window.open(`${__XR_ENV_BASE__}/second-page`, "secondScene");  
      }}>
      Open Second Page with a Button  
    </button>  
  </p>  
</div>  
```

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

### Configure Start Scene Default Size (Web App Manifest)

Source: https://webspatial.dev/docs/development-guide/using-the-webspatial-api/manage-multiple-scenes

This snippet demonstrates how to configure the default size for the Start Scene in a WebSpatial application using the Web App Manifest. It utilizes the `xr_main_scene` property to specify width and height, influencing the initial layout of the app. Currently, only `default_size` is supported for `xr_main_scene`, and only Window Scenes are supported.

```json
{
  "start_url": "/",  
  "xr_main_scene": {
    "default_size": {
      "width": 500,
      "height": 1000
    }
  }
}
```

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

### Publish visionOS App to App Store Connect with WebSpatial Builder

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-2-add-build-tool-for-packaged-webspatial-apps

Builds a visionOS app, signs it, adds App Store Connect metadata, and submits it for review and release. Requires `--bundle-id`, `--teamId`, `--version`, `--u` (developer name), and `--p` (developer password). The `--base` option is mandatory for specifying the production URL's root.

```shell
webspatial-builder publish  --base=$XR_PROD_SERVER --bundle-id=$XR_BUNDLE_ID --teamId=$XR_TEAM_ID --version=$XR_VERSION --u=$XR_DEV_NAME --p=$XR_DEV_PASSWORD
```

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

### Apply Different Background Materials to Spatialized Elements

Source: https://webspatial.dev/docs/quick-example

Applies distinct `--xr-background-material` values ('thick', 'translucent') to different spatialized elements within the 'is-spatial' context. This allows for varied visual appearances for elements like cards and links in the XR environment. It also includes styling for nested elements like anchor tags.

```css
html.is-spatial {
  background-color: transparent;
  --xr-background-material: transparent;

  .count-card {
    --xr-background-material: thick;
    position: relative;
  }

  .link-card {
    --xr-background-material: translucent;
    border-radius: 20px;
    position: relative;
    top: 20px;

    a {
      display: block;
      --xr-background-material: thick;
      border-radius: 10px;
    }
  }
}
```

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

### Configure Rsbuild for WebSpatial React SDK

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/configure-js-ts-compiler

Sets up Rsbuild to use the WebSpatial React SDK by configuring the `pluginReact` with `swcReactOptions`. It specifies the `importSource` and `runtime` for the React transform. This is an example for Rsbuild projects.

```typescript
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [
    pluginReact({
      swcReactOptions: {
        runtime: 'automatic',
        importSource: '@webspatial/react-sdk',
      },
    }),
  ]
});
```

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

### Build visionOS App Package with WebSpatial Builder

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-2-add-build-tool-for-packaged-webspatial-apps

Builds a signed visionOS app package (.ipa file) for on-device testing using your Apple Developer account. Requires `--bundle-id` and `--teamId`. The `--base` option is used to specify the testing URL's root if `start_url` is a relative path.

```shell
webspatial-builder build --base=$XR_PRE_SERVER --bundle-id=$XR_BUNDLE_ID --teamId=$XR_TEAM_ID
```

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

### Integrate Tailwind CSS Plugin with Vite

Source: https://webspatial.dev/docs/development-guide/web-projects-that-support-webspatial/adding-tailwindcss-and-postcss

Adds the Tailwind CSS plugin to a Vite project's configuration (`vite.config.js`). This integration allows Vite to process Tailwind CSS efficiently during the build process.

```javascript
import tailwindcss from "@tailwindcss/vite";  

export default defineConfig({
  plugins: [
    tailwindcss(),

```

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

### Scene Initialization with Link and Button in React

Source: https://webspatial.dev/docs/introduction/built-on-the-existing-web-ecosystem

Shows how to integrate WebSpatial's Scene Initialization API with standard web features like the `Link` component and `window.open` in a React application. This enables managing and opening spatial scenes as if they were regular web pages or windows.

```jsx
<p>
-                 <Link to="/second-page">
+                 <Link to="/second-page" target="_blank">
                    Open Second Page with a Link
                  </Link>
                </p>
                <p>
                  <button
                    onClick={() => {
                      initScene("secondScene", prevConfig => {
                        return {
                          ...prevConfig,
                          defaultSize: {
                            width: 500,
                            height: 500,
                          },
                        };
                      });
                      window.open(
                        `${__XR_ENV_BASE__}/second-page`,
                        "secondScene",
                      );
                    }}>
                    Open Second Page with a Button
                  </button>
                </p>
```

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

### HTML Asset Links with Automatic Base Path

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/generate-a-webspatial-specific-website

Example HTML snippet showing how asset links (icon, Apple touch icon, script, stylesheet) are automatically prefixed with '/webspatial/avp/' under default settings for the visionOS version.

```html
<link rel="icon" href="/webspatial/avp/favicon.ico" sizes="any" />
<link
  rel="apple-touch-icon"
  href="/webspatial/avp/icons/apple-touch-icon.png" />
<script
  type="module"
  crossorigin
  src="/webspatial/avp/assets/index-CpANHSXr.js"></script>
<link
  rel="stylesheet"
  crossorigin
  href="/webspatial/avp/assets/index-B4Bp50KL.css" />
```

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

### Configure npm script for dual builds

Source: https://webspatial.dev/docs/development-guide/enabling-webspatial-in-web-projects/step-3-integrate-webspatial-sdk-into-web-build-tools/generate-a-webspatial-specific-website

This npm script configuration chains two Vite build commands, similar to manual execution. The first command builds standard web assets, and the second, with `XR_ENV=avp`, builds assets specifically for the WebSpatial App Shell. This is a best practice for automating the dual build process.

```json
"build": "vite build && XR_ENV=avp vite build",
```