@webcontainer/snapshot

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);