stackblitz / webcontainer-core

Dev environments. In your web app.
https://webcontainers.io
MIT License
3.7k stars 139 forks source link

How to run git using webcontainer api #1190

Open geekeren opened 9 months ago

geekeren commented 9 months ago

How to run git using webcontainer api? or is it possible to add custom binary in webcontainer?

YeomansIII commented 9 months ago

You'll need to run isomorphic-git https://isomorphic-git.org

geekeren commented 9 months ago

You'll need to run isomorphic-git https://isomorphic-git.org

Thank you. I go through the document, but don't know how to integrate it with web container

YeomansIII commented 9 months ago

A webcontainer is really just a nodejs runtime in the browser. You can install isomorphic-git in your project or globally using npm.

A quick Google reveals that isomorphic-git also ships with a CLI. You likely use it like you would use any Node/npm CLI. Assuming you have an interactive shell session running for your webcontainer.

https://isomorphic-git.org/docs/en/cli

geekeren commented 9 months ago

@YeomansIII I try to connect isomorphic-git with web-container fs, but found web-container does not implement apis: unlink\stat\lstat\readlink\symlink So I transform the ws fs api with a fake implementation, like

    stat: () => {
      console.log("stat not implemented");
    },

but when run git clone in webcontainer, a error thrown

image The following is my code:


export const webContainerFS = (rawFS: FileSystemAPI): PromiseFsClient => ({
  promises: {
    readFile: rawFS.readFile.bind(rawFS),
    writeFile: rawFS.writeFile.bind(rawFS),
    readdir: rawFS.readdir.bind(rawFS),
    mkdir: rawFS.mkdir.bind(rawFS),
    rmdir: rawFS.rm.bind(rawFS),
    unlink: () => {
      console.log("stat not implemented");
    },
    stat: () => {
      console.log("stat not implemented");
    },
    lstat: () => {
      console.log("lstat not implemented");
    },
    readlink: () => {
      console.log("readlink not implemented");
    },
    symlink: () => {
      console.log("symlink not implemented");
    },
  },
});

  useEffect(() => {
    (async () => {
      const webcontainerInstance = await WebContainer.boot({
        coep: "credentialless",
      });

      webcontainerInstance.fs.mkdir("/tutorial/.git", {
        recursive: true
      });

      await webcontainerInstance.fs.writeFile('/tutorial/.git/config', `[user]
      email = jcubic@onet.pl
      name = Jakub Jankiewicz`);
      const fs = webContainerFS(webcontainerInstance.fs);

      await git.clone({
        fs,
        http,
        dir: "/tutorial",
        corsProxy: "https://cors.isomorphic-git.org",
        url: "https://github.com/isomorphic-git/isomorphic-git",
        singleBranch: true,
        depth: 1,
        onMessage: console.log,
      });
    })();
  }, []);
YeomansIII commented 9 months ago

I think you will have much better luck running isogit INSIDE of the webcontainer

SamVerschueren commented 9 months ago

Currently we don't allow using git through WebContainer API. One of the reasons (but not the only reason) is the fact that you need a way to securely use authentication tokens. For now, your best bet is to use isomorphic-git as already suggested. You can npm install it inside WebContainer and use the isogit CLI to initiate a clone.