Blaze Terminal

A powerful web-based SSH terminal component for Meteor applications using Blaze templating. Connect to remote servers directly from your web browser with a VS Code-like terminal interface.

Features

Multi-tab SSH terminals - Open multiple SSH connections in tabs
VS Code-like interface - Familiar terminal design and keyboard shortcuts
Real-time terminal output - Full xterm.js integration with 256-color support
Responsive design - Works on desktop and mobile devices
Connection management - Easy SSH configuration with error handling
Terminal resizing - Automatic fitting and manual resize support
Session persistence - Maintains connections during browser refresh
Keyboard shortcuts - `Ctrl/Cmd + `` to toggle terminal

Installation

1. Add the package to your Meteor project

# Add the package locally
meteor add blaze-terminal

2. Install required dependencies

The package uses npm dependencies that will be automatically installed:

ws - WebSocket server for terminal communication
ssh2 - SSH client for remote connections
xterm - Terminal emulator (loaded via CDN)

3. Add to your application

1<!-- In your main template -->
2<template name="myApp">
3  <div class="app-container">
4    <!-- Your app content -->
5    
6    <!-- Terminal component -->
7    {{> terminal}}
8  </div>
9</template>

1// In your client main.js
2import { Template } from 'meteor/templating';
3import './main.html';
4
5// Import the terminal package
6import 'meteor/blaze-terminal';

Usage

Basic Integration

Once installed, the terminal component provides a complete SSH terminal interface:

1<template name="dashboard">
2  <h1>My Dashboard</h1>
3  
4  <!-- Terminal will appear at the bottom -->
5  {{> terminal}}
6</template>

Programmatic Control

1// Import terminal functions
2import { Terminal } from 'meteor/blaze-terminal';
3
4// Toggle terminal visibility
5Terminal.toggleVisible();
6
7// Show/hide terminal
8Terminal.setVisible(true);
9Terminal.setVisible(false);
10
11// Open connection modal
12Terminal.showConnectionModal();
13
14// Get terminal state
15const terminals = Terminal.getTerminals();
16const isVisible = Terminal.isVisible();
17const status = Terminal.getConnectionStatus();

Keyboard Shortcuts

`Ctrl/Cmd + `` - Toggle terminal visibility
`Ctrl/Cmd + Shift + `` - Create new terminal
Click on terminal - Focus and enable input
Standard terminal shortcuts - Copy, paste, clear, etc.

Configuration

SSH Connection

When you click "New SSH Connection", you'll be prompted for:

Host - Server hostname or IP address
Port - SSH port (default: 22)
Username - SSH username
Password - SSH password

Default Configuration

1// The terminal starts with these defaults
2{
3  host: 'localhost',
4  port: 22,
5  username: '',
6  password: ''
7}

Terminal Settings

The terminal uses these xterm.js settings:

1{
2  cursorBlink: true,
3  fontSize: 14,
4  fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Consolas", "Courier New", monospace',
5  rows: 30,
6  cols: 100,
7  theme: {
8    background: '#0c0c0c',
9    foreground: '#cccccc',
10    // ... VS Code dark theme colors
11  }
12}

Architecture

Components

Client Side (client/)
- terminal.html - Blaze template for UI
- terminal.css - Styling and layout
- terminal.js - Terminal logic and WebSocket client
- xterm-loader.js - Loads xterm.js from CDN
Server Side (server/)
- main.js - WebSocket server and SSH connection handler

Communication Flow

Browser ←→ WebSocket ←→ SSH Server ←→ Remote Host
   ↑           ↑              ↑
Terminal    Meteor        SSH Client
 (xterm)    Server        (ssh2)

Development

File Structure

packages/blaze-terminal/
├── package.js          # Package configuration
├── README.md          # This file
├── client/
│   ├── terminal.html  # Blaze template
│   ├── terminal.css   # Styles
│   ├── terminal.js    # Client logic
│   └── xterm-loader.js # CDN loader
└── server/
    └── main.js        # SSH WebSocket server

Building from Source

# Clone the repository
git clone <your-repo>
cd blaze-terminal

# Link to your Meteor project
cd your-meteor-project
meteor add ./path/to/blaze-terminal

Debugging

The package includes several debugging utilities:

1// In browser console
2window.focusTerminal(terminalId);
3window.testTerminalInput();
4window.autoFocus();
5window.fixTerminalFocus();
6
7// Check terminal instances
8console.log(window.terminalInstances);
9console.log(window.terminalSessions);

Customization

Styling

Override the default styles by adding CSS:

1/* Custom terminal theme */
2.terminal-panel {
3  background: #1e1e1e;
4  border: 1px solid #333;
5}
6
7.terminal-tab {
8  background: #2d2d30;
9  color: #cccccc;
10}
11
12.terminal-tab.active {
13  background: #1e1e1e;
14  border-bottom: 2px solid #0078d4;
15}

Terminal Theme

Modify the xterm theme in terminal.js:

1const term = new window.Terminal({
2  theme: {
3    background: '#1a1a1a',    // Custom background
4    foreground: '#ffffff',    // Text color
5    cursor: '#ff6600',        // Cursor color
6    // ... other theme options
7  }
8});

Troubleshooting

Common Issues

Terminal not receiving input

1// Try focusing the terminal
2window.autoFocus();

WebSocket connection failed

Check if port 8080 is available
Ensure firewall allows WebSocket connections
Verify Meteor server is running

SSH connection timeout

Check SSH server is running on target host
Verify credentials and network connectivity
Check firewall settings on remote host

xterm not loading

Check browser console for CDN errors
Ensure internet connection for CDN access
Try refreshing the page

Debug Mode

Enable verbose logging:

1// In browser console
2localStorage.setItem('terminal-debug', 'true');

Security Notes

Passwords are transmitted over WebSocket (use HTTPS in production)
Consider implementing SSH key authentication
Limit SSH access to trusted networks
Use strong passwords and proper SSH server configuration

Contributing

Fork the repository
Create a feature branch
Commit your changes
Push to the branch
Create a Pull Request

Dependencies

Meteor: 3.3+
Blaze: Templating engine
xterm.js: Terminal emulator
ws: WebSocket library
ssh2: SSH client library