webterm

A Web Terminal based on xterm.js and node-pty.

The frontend is built with React + TypeScript + Vite, and the backend is a TypeScript Node.js server using Express and ws for the PTY websocket.

Project structure

.
├── index.html              # Vite entry HTML
├── src/                    # React + TypeScript frontend
│   ├── main.tsx
│   ├── App.tsx
│   ├── Terminal.tsx
│   └── styles.css
├── server/                 # TypeScript backend (Express + ws + node-pty)
│   └── server.ts
├── vite.config.ts          # Vite config (proxies /pty websocket to backend in dev)
├── tsconfig*.json          # TypeScript configs (app / node / server)
└── package.json

Development

npm install
npm run dev

This launches two processes in parallel:

• the backend (tsx watch server/server.ts --port 3001)
• the Vite dev server on http://localhost:5173

Vite proxies the /pty websocket (and /health) through to the backend, so you can develop the frontend with hot module reloading while the PTY server keeps running.

Production build

npm run build
npm start

• npm run build builds the React app into dist/client/ and compiles the TypeScript server into dist/server/.
• npm start runs the compiled server, which serves the built client and exposes the PTY websocket at /pty.

The server listens on port 3000 by default. Override with --port:

npm start -- --port 4000
# or
node dist/server/server.js --port 4000

Running via npx

After publishing, the webterm bin points at the compiled server:

npx @plmbr/webterm --port 4000