@webcontainer/snapshot/README.md

Build filesystem snapshots for the WebContainer API

# WebContainer Snapshot Utils

This package exposes utilities to help build filesystem snapshots for usage with the [WebContainer API](https://webcontainers.io/).

## How To

This package is meant to be used on the server-side to build a binary snapshot of a given folder.

```typescript
import { snapshot } from '@webcontainer/snapshot';

const sourceSnapshot = await snapshot(sourceFilesFolder);

// Express-like handler
function getSnapshot(req: Request, res: Resonse) {
  res.setHeader('content-type', 'application/octet-stream').send(sourceSnapshot);
}

// SvelteKit-like handler
function getSnapshot(req: Request) {
  return new Response(sourceSnapshot, {
    headers: {
      'content-type': 'application/octet-stream',
    },
  });
}
```

This snapshot can later be sent to a WebContainer API-based frontend application.

```typescript
import { WebContainer } from '@webcontainer/api';

const webcontainer = await WebContainer.boot();

const snapshotResponse = await fetch('/snapshot');
const snapshot = await snapshotResponse.arrayBuffer();

await webcontainer.mount(snapshot);
```