GitHub to WebContainer

This project takes a given GitHub repo and generates a WebContainer FileTree from it, enabling quickly creating WebContainers out of GitHub repos.

Usage

This package exports a function createFileTree that takes a GitHub repo and returns a FileTree object. You can use it like so:

import { createFileTree } from "github-to-webcontainer";

// Get a FileTree
const fileTree = await createFileTree("org/repo");

fileTree will then contain a WebContainer compatible FileTree object.

You can then pass it to your WebContainer like so:

import { createFileTree } from "github-to-webcontainer";
import { WebContainer } from "@webcontainer/api";

// Get a FileTree
const fileTree = await createFileTree("org/repo");

// Create a container and mount the file tree
const container = await WebContainer.boot();
container.fs.mount(fileTree);

From there, you can interact with the virtual FileSystem using the WebContainer API. For example, this is how you'd install dependencies and then start a server in a WebContainer:

import { createFileTree } from 'github-to-webcontainer';
import { WebContainer } from '@webcontainer/api';

// Get a FileTree
const fileTree = await createFileTree('org/repo');

// Create a container and mount the file tree
const container = await WebContainer.boot();
container.fs.mount(fileTree);

// Run npm install
const installProcess = await container.spawn('npm', ['install']);

// Monitor the output
installProcess.output.pipeTo(new WritableStream({
  write(chunk) {
    console.log(chunk);
  }
}));

// Wait for the process to exit
const exitCode = await installProcess.exit;

if (exitCode === 0) {
  // Run npm start
  const startProcess = await container.spawn('npm', ['start']);

  // Share a URL of the deployed server
  container.on('server-ready', (port, url) => {
    console.log(`Server is ready at ${url}!`);
  }
} else {
    console.error('Failed to install dependencies');
}

Contributing

Start by opening an issue and we can collaborate.