WebContainer Execution

import { WebContainer } from "@webcontainer/api";

// Boot WebContainer instance
const container = await WebContainer.boot();

// It's a full Node.js environment!
await container.spawn("npm", ["install"]);
await container.spawn("npm", ["run", "dev"]);

// From preview/context.tsx
export function WebContainerProvider({ children, projectId }) {
  const [container, setContainer] = useState<WebContainer | null>(null);
  const [isBooting, setIsBooting] = useState(true);
  const files = useQuery(api.files.getFiles, { projectId });

  useEffect(() => {
    getWebContainer()
      .then((wc) => {
        setContainer(wc);
        setIsBooting(false);
        
        // Listen for dev server
        wc.on("server-ready", (_port, url) => {
          setServerUrl(url);
        });
      });
  }, []);

  return (
    <WebContainerContext.Provider value={{ container, serverUrl }}>
      {children}
    </WebContainerContext.Provider>
  );
}

// From lib/webcontainer.ts
let containerInstance: WebContainer | null = null;

export async function getWebContainer(): Promise<WebContainer> {
  if (!containerInstance) {
    containerInstance = await WebContainer.boot();
  }
  return containerInstance;
}

export function teardownWebContainer() {
  containerInstance = null;
}

// From preview/context.tsx
useEffect(() => {
  if (!container || !files) return;

  const syncFiles = async () => {
    const fileEntries: FileEntry[] = [];
    
    // Build full paths
    const buildPath = (fileId: string): string => {
      const pathSegments: string[] = [];
      let currentId = fileId;
      
      while (currentId) {
        const file = fileMap.get(currentId);
        if (!file) break;
        pathSegments.unshift(file.name);
        currentId = file.parentId;
      }
      
      return pathSegments.join("/");
    };

    // Sync to container
    await syncFilesToContainer(container, fileEntries);
  };

  syncFiles();
}, [container, files]);

// From preview/components/terminal.tsx
import { Terminal as XTerm } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";

export function Terminal() {
  const { container } = useWebContainer();
  
  useEffect(() => {
    const term = new XTerm({
      theme: {
        background: "#1e1e2e",
        foreground: "#cdd6f4",
        cursor: "#f5e0dc",
        // ... Catppuccin colors
      },
      fontSize: 13,
      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
      cursorBlink: true,
    });

    const fitAddon = new FitAddon();
    term.loadAddon(fitAddon);
    term.open(terminalRef.current);
    fitAddon.fit();

    // Spawn shell process
    const shellProcess = await container.spawn("jsh", {
      terminal: {
        cols: term.cols,
        rows: term.rows,
      },
    });

    // Pipe output to terminal
    shellProcess.output.pipeTo(
      new WritableStream({
        write(data) {
          term.write(data);
        },
      })
    );

    // Send user input to shell
    const input = shellProcess.input.getWriter();
    term.onData((data) => {
      input.write(data);
    });
  }, [container]);
}

# Install dependencies
npm install

# Run dev server
npm run dev

# Execute scripts
node script.js

# Use package binaries
npx create-react-app my-app

container.on("server-ready", (port, url) => {
  console.log(`Server running at ${url}`);
  setServerUrl(url);
});

// From preview/components/preview-frame.tsx
export function PreviewFrame() {
  const { serverUrl } = useWebContainer();
  
  if (!serverUrl) {
    return <div>Start a dev server to see preview</div>;
  }
  
  return (
    <iframe
      src={serverUrl}
      className="w-full h-full"
      sandbox="allow-scripts allow-same-origin allow-forms"
    />
  );
}

const [currentProcess, setCurrentProcess] = useState<WebContainerProcess | null>(null);

// Start process
const process = await container.spawn("npm", ["run", "dev"]);
setCurrentProcess(process);

// Kill process
if (currentProcess) {
  currentProcess.kill();
  setCurrentProcess(null);
}

// Listen for exit
process.exit.then((code) => {
  console.log(`Process exited with code ${code}`);
});

// Skip binary files (they have storageId)
if (file.storageId) continue;

fileEntries.push({
  path,
  content: file.content || "",
  type: file.type,
});

# Install test framework
npm install --save-dev vitest

# Run tests
npm test

# Watch mode
npm test -- --watch

# Build optimized bundle
npm run build

# Preview production build
npm run preview

console.log("Debug:", data);
// Appears in browser DevTools console

term.writeln("Welcome to Polaris Terminal");
term.writeln("Starting shell...\n");

try {
  const process = await container.spawn("npm", ["run", "dev"]);
} catch (err) {
  term.writeln(`\r\nFailed to start: ${err}`);
}