WebContainer React Runner

A React component that runs a Node.js environment in the browser using WebContainers.

Installation

npm install webcontainer-react-runner

Usage

You can pass a JSON object representing your project's file system to the component.

import { WebContainerRunner } from 'webcontainer-react-runner';
import 'webcontainer-react-runner/dist/webcontainer-runner.css';

// Example project structure
const myProject = {
  'package.json': {
    file: {
      contents: JSON.stringify({
        name: 'my-app',
        version: '1.0.0',
        scripts: { start: 'node index.js' },
        dependencies: {}
      }, null, 2)
    }
  },
  'index.js': {
    file: {
      contents: `
        const http = require('http');
        const server = http.createServer((req, res) => {
          res.writeHead(200, { 'Content-Type': 'text/plain' });
          res.end('Hello from WebContainer!');
        });
        server.listen(3000, () => {
          console.log('Server running quite smoothly at http://localhost:3000/');
        });
      `
    }
  }
};

function App() {
  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      <WebContainerRunner files={myProject} />
    </div>
  );
}

export default App;

Props

| Prop | Type | Description | |------|------|-------------| | files | FileSystemTree | An object representing the file system structure. |

Features

• Full Node.js environment: Run Node.js commands directly in the browser.
• Terminal Integration: Includes a fully functional terminal.
• File System: Virtual file system with read/write capabilities.
• Editor: Built-in Monaco editor for editing code.

License

MIT