stackblitz-local-dev-loop

by jeremylongshore

Install this Skill

curl -fsSL -o stackblitz-local-dev-loop.zip https://skill.seembox.com/api/v1/skills/stackblitz-local-dev-loop/download && unzip stackblitz-local-dev-loop.zip

Download stackblitz-local-dev-loop.zip

SKILL.md About

---
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.0.0
license: MIT
author: Jeremy Longshore <jeremy@intentsolutions.io>
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

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

### Step 2: Configure Vite Headers

```typescript
// 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

```typescript
// 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');
  });
});

## Error Handling

| Error | Cause | Solution |
|-------|-------|----------|
| COOP/COEP errors | Missing headers | Add to vite.config.ts |
| `SharedArrayBuffer` undefined | Not cross-origin isolated | Check response headers |
| Test failures | WebContainer needs browser | Use Playwright for integration |

## Resources

- [Vite Config](https://vitejs.dev/config/)
- [WebContainer Guides](https://webcontainers.io/guides/introduction)

## Next Steps

Proceed to `stackblitz-sdk-patterns` for production patterns.