StackBlitz Local Dev Loop

Overview

Set up a Vite-based development environment for WebContainer applications with cross-origin headers, hot module replacement, and Vitest for testing file system operations.

Instructions

Step 1: Vite Project with WebContainers

npm create vite@latest wc-app -- --template vanilla-ts
cd wc-app
npm install @webcontainer/api

Step 2: Configure Vite Headers

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    },
  },
});

Step 3: Test WebContainer Operations

// tests/webcontainer.test.ts
import { describe, it, expect } from 'vitest';

// Note: WebContainer tests require a browser environment
// Use Playwright for full integration tests
describe('FileSystemTree Builder', () => {
  it('creates valid tree from flat paths', () => {
    const tree = buildFileTree({
      'src/index.ts': 'console.log("hello")',
      'package.json': '{"name":"test"}',
    });
    expect(tree['package.json']).toHaveProperty('file');
    expect(tree.src).toHaveProperty('directory');
  });
});

function buildFileTree(flatFiles: Record<string, string>) {
  const tree: any = {};
  for (const [path, contents] of Object.entries(flatFiles)) {
    const parts = path.split('/');
    let current = tree;
    for (let i = 0; i < parts.length - 1; i++) {
      if (!current[parts[i]]) current[parts[i]] = { directory: {} };
      current = current[parts[i]].directory;
    }
    current[parts[parts.length - 1]] = { file: { contents } };
  }
  return tree;
}

Error Handling

Resources

• Vite Config
• WebContainer Guides

Next Steps

Proceed to stackblitz-sdk-patterns for production patterns.