WebContainer Snapshot Utils

This package exposes utilities to help build filesystem snapshots for usage with the WebContainer API.

How To

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

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.

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

const webcontainer = await WebContainer.boot();

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

await webcontainer.mount(snapshot);