What is Webterm

Webterm is a web-based terminal application that allows users to interact with command-line interface (CLI) commands through a browser. It is built using React, TypeScript, and Xterm.js, and consists of a UI package and a server package that utilizes WebSockets and Node.js.

Use cases

Use cases for Webterm include remote server management, running scripts and commands from a web application, educational platforms for teaching command-line skills, and providing a browser-based terminal for users who require CLI access without installing additional software.

How to use

To use Webterm, first ensure you have Node.js and Bun installed. Install the necessary packages with ‘bun install’. Run the application using ‘bun run dev’ to start both the UI and WebSocket server concurrently. Access the terminal via your browser at http://localhost:5173.

Key features

Key features of Webterm include an interactive web-based terminal, real-time communication via WebSockets, cross-platform support (Windows, macOS, Linux), automatic terminal resizing, connection status indicators, and the ability to set a custom working directory using a URL parameter.

Where to use

Webterm can be used in various fields such as software development, system administration, education, and any scenario where command-line access is needed through a web interface.

Webterm

A web-based terminal application built with React, TypeScript, and Xterm.js. The project consists of a UI package (using Vite and React) and a server package (using WebSockets and Node.js).

Project Structure

/
├── packages/
│   ├── ui/        # React frontend with Xterm.js terminal
│   └── server/    # Node.js WebSocket server with node-pty

Getting Started

Prerequisites

• Node.js
• Bun (for package management and UI development)

Installation

bun install

Running the Application

To run both the UI and server concurrently:

bun run dev

This will start:

• UI server at http://localhost:5173 (Vite dev server)
• WebSocket server at ws://localhost:5174

Individual Package Commands

UI Package

bun run --filter '@webterm/ui' dev

Server Package

bun run --filter '@webterm/server' dev

Note on Server Runtime

The server is running with Node.js and not Bun due to a known issue with Bun causing crashes when using node-pty. This is related to an open issue: https://github.com/oven-sh/bun/issues/19688

Features

• Interactive web-based terminal
• WebSocket-based real-time communication
• Cross-platform support (Windows, macOS, Linux)
• Automatic terminal resizing
• Connection status indicator
• Custom working directory via URL parameter (cwd)

Using Custom Working Directory

You can specify a custom working directory for the terminal by using the cwd URL parameter:

http://localhost:5173?cwd=/absolute/path/to/your/project

This allows you to start the terminal in any directory on your system, making it convenient for working with specific projects.

License

MIT