stackblitz-local-dev-loop

name	stackblitz-local-dev-loop
description	Configure local development for WebContainer applications with hot reload and testing. Use when building browser-based IDEs, testing WebContainer file operations, or setting up development workflows for WebContainer projects. Trigger: "stackblitz dev setup", "webcontainer local", "test webcontainers locally".
allowed-tools	Read, Write, Edit, Bash(npm:*), Bash(npx:*), Grep
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","ide","webcontainers","stackblitz"]
compatibility	Designed for Claude Code

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');
    (tree.).();
  });
});

 () {
   :  = {};
   ( [path, contents]  .(flatFiles)) {
     parts = path.();
     current = tree;
     ( i = ; i < parts. - ; i++) {
       (!current[parts[i]]) current[parts[i]] = { : {} };
      current = current[parts[i]].;
    }
    current[parts[parts. - ]] = { : { contents } };
  }
   tree;
}