Installing dependencies in WebContainers

You can run various commands inside WebContainers like, for example, npm install as follows:

webcontainerInstance.spawn('npm', ['install']);

This code runs npm with the install argument inside the WebContainer instance.

Syntax

Before we begin, let’s take a look at the syntax: we break down commands into their constituent parts, and then pass them to the run method. In this way:

cd hello-world

becomes:

webcontainerInstance.spawn('cd', ['hello-world']);

And if you have a command with two arguments, both arguments will be added to the array, like so:

ls src -l

becomes:

webcontainerInstance.spawn('ls', ['src', '-l']);

1. Install dependencies

In the main.js file, add an installDependencies function:

async function installDependencies() {
  // Install dependencies
  const installProcess = await webcontainerInstance.spawn('npm', ['install']);
  // Wait for install command to exit
  return installProcess.exit;
}

This function will install the dependencies and return the exit code. If it’s 0, it means the command exited successfully.

2. Call the function

Next, call installDependencies() inside the event listener you wrote earlier and you can add error handling:

window.addEventListener('load', async () => {
  textareaEl.value = files['index.js'].file.contents;
  // Call only once
  webcontainerInstance = await WebContainer.boot();
  await webcontainerInstance.mount(files);

  const exitCode = await installDependencies();
  if (exitCode !== 0) {
    throw new Error('Installation failed');
  };
});

Note that it is possible to read the output of this command.

  const installProcess = await webcontainerInstance.spawn('npm', ['install']);

  installProcess.output.pipeTo(new WritableStream({
    write(data) {
      console.log(data);
    }
  }));

The output property is capable of streaming the output.

This means that, for example, by running npm install, you will get every single line from npm installing the code.