SSH Web Terminal Manager

A modern web-based SSH terminal manager with file explorer and text editor capabilities.

Features

• Multi-Server Management: Connect to multiple SSH servers simultaneously
• Terminal Emulation: Full xterm.js terminal with color support
• File Explorer: Browse, upload, download, and delete files on remote servers
• Text Editor: Monaco Editor (VS Code engine) for editing files directly in the browser
• Real-time Metrics: CPU, memory, and disk usage monitoring
• Authentication: JWT-based secure authentication
• Encrypted Storage: All server credentials are encrypted at rest

Tech Stack

Frontend

• React 19
• Vite
• TailwindCSS
• Socket.IO Client
• xterm.js (terminal emulation)
• Monaco Editor (code editing)

Backend

• Node.js
• Express
• Socket.IO
• SSH2 (SSH connections)
• JWT authentication
• LowDB (encrypted JSON database)

Installation

Prerequisites

• Node.js 18+ and npm
• A server to deploy to (Linux recommended)
• PM2 for process management (optional but recommended)

Setup

1. Clone the repository:

git clone <your-repo-url>
cd ssh-web

2. Install backend dependencies:

cd backend
npm install

3. Install frontend dependencies:

cd ../frontend
npm install

4. Configure environment variables:

cd ../backend
cp .env.example .env
nano .env

Edit the .env file and set:

• JWT_SECRET: Generate a secure random string (64+ characters)
• CREDENTIALS_ENCRYPTION_KEY: 64-character hex string
• CREDENTIALS_ENCRYPTION_IV: 32-character hex string
• FRONTEND_URL: Your frontend URL for CORS
• PORT: Backend port (default: 7842)

Generate secure keys:

# JWT Secret
node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"

# Encryption Key
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

# Encryption IV
node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"

5. Build the frontend:

cd ../frontend
npm run build

6. Configure your web server (nginx example):

# Frontend (React app)
server {
    listen 443 ssl;
    server_name ssh.yourdomain.com;

    root /var/www/ssh-web/frontend/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # SSL configuration
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
}

# Backend API
server {
    listen 7842 ssl;
    server_name ssh.yourdomain.com;

    location / {
        proxy_pass http://localhost:7842;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

7. Start the backend:

cd backend
npm start
# Or with PM2:
pm2 start server.js --name ssh-backend

Usage

1. Navigate to your frontend URL
2. Register a new account
3. Login with your credentials
4. Add SSH servers using the "+" button
5. Click a server to connect
6. Use the terminal, file explorer, and text editor features

Security Notes

• All server credentials are encrypted using AES-256-CBC before storage
• JWT tokens are used for authentication
• WebSocket connections are secured
• Always use HTTPS in production
• Never commit .env files or db.json to version control
• Regularly update dependencies for security patches

Development

Running in Development Mode

Backend:

cd backend
npm run dev  # Uses nodemon for auto-reload

Frontend:

cd frontend
npm run dev  # Vite dev server with HMR

Project Structure

ssh-web/
├── backend/
│   ├── middleware/       # Auth, rate limiting, etc.
│   ├── routes/           # Express routes
│   ├── services/         # SSH manager, etc.
│   ├── utils/            # Database, metrics, etc.
│   ├── websocket/        # Socket.IO handlers
│   └── server.js         # Entry point
├── frontend/
│   ├── src/
│   │   ├── components/   # React components
│   │   └── services/     # WebSocket service
│   ├── public/
│   └── index.html
└── README.md

License

MIT License - See LICENSE file for details

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

Support

For issues or questions, please open an issue on GitHub.