Remote Dev UI

What it is

Remote Dev UI is a self-hosted web application that provides a graphical interface for file management and terminal access on remote servers, specifically optimized for AWS EC2 instances. It replaces traditional CLI-only workflows with a dual-pane explorer that supports drag-and-drop transfers between local and remote filesystems, syntax-highlighted file previews, and persistent SSH sessions.

Features

• Dual-pane file browser for side-by-side local and remote directory navigation
• Integrated xterm.js terminal with multiple SSH session support
• Drag-and-drop file transfer between local machine and remote EC2 instances
• Syntax-highlighted code preview and markdown rendering
• Batch file operations including multi-select copy, move, and delete
• Secure SSH/SFTP connection management with .pem key authentication

Quickstart

npm install
npm run dev

Architecture

flowchart TD
    User[User Browser] -->|HTTP/WebSocket| Client[React Frontend]
    Client -->|API Requests| Server[Express Backend]
    Client -->|Terminal Stream| Server
    Server -->|SFTP/SSH| Remote[EC2 Instance]
    Server -->|Local FS| Local[Local Machine]
    subgraph Frontend
        Client
    end
    subgraph Backend
        Server
    end

How it's built

The application uses a TypeScript monorepo structure. The frontend is built with React 18, TailwindCSS, and shadcn/ui components, using TanStack Query for state management and xterm.js for the terminal emulator. The backend is an Express 5 server that handles HTTP API requests for file operations and upgrades connections to WebSockets for real-time terminal streaming. It uses the ssh2 library to manage SFTP connections and shell sessions. The build process utilizes Vite for the client and esbuild for bundling the server into a single executable-like CJS file.

How it runs

sequenceDiagram
    participant U as User
    participant F as Frontend (React)
    participant B as Backend (Express)
    participant R as Remote EC2
    
    U->>F: Click Connect SSH
    F->>B: POST /api/connect (Host, Key)
    B->>R: Establish SSH/SFTP Connection
    R-->>B: Connection Established
    B-->>F: Session ID & Status
    
    U->>F: Drag File to Remote Panel
    F->>B: POST /api/upload (File Data)
    B->>R: SFTP Write Stream
    R-->>B: Write Complete
    B-->>F: Success Response
    
    U->>F: Open Terminal
    F->>B: WebSocket Upgrade
    B->>R: Open Shell Channel
    loop Terminal Session
        U->>F: Type Command
        F->>B: WS Send Input
        B->>R: Stdin Write
        R->>B: Stdout Data
        B->>F: WS Send Output
        F->>U: Render Terminal Output
    end

How to apply & reuse

Deploy this tool on a jump host or directly on development EC2 instances to provide developers with secure, browser-based access to server filesystems without exposing raw SSH ports to the public internet (if behind a VPN/WAF). It simplifies file uploads, log inspection, and quick code edits for teams managing infrastructure.

At a glance