MACHHUB® Designer Extension

The complete Visual Studio Code extension for designing, building, and managing full MACHHUB® applications — collections, processes, Node-RED flows, and multi-instance runtime connections, all from one place

🚀 Overview

MACHHUB® Designer is a VS Code extension that gives you a full design environment for building MACHHUB® applications. From one workspace you can design your database schema (Collections), write and deploy server-side logic (Processes), build and manage Node-RED flows, and connect to any number of MACHHUB® instances using named connection profiles.

Instead of switching between browser tabs, CLI tools, and external editors, everything you need to design a complete MACHHUB® application is available directly inside VS Code.

✨ Key Features

🔌 Runtime Connection System

• Profile-Based Connection Management: Create and switch between multiple named connection profiles
• Live Connection Monitoring: Automatic health checks with configurable intervals
• Development Proxy Server: Built-in forwarding server (default port 61888)

📦 Collections Management

• Schema Upload & Download: Sync collection schemas between local files and the MACHHUB® server
• Per-Item Operations: Upload or download individual collection schemas
• Collections Tree View: Browse and manage all collections from the Activity Bar

⚙️ Processes Management

• Process Upload & Download: Deploy TypeScript or Python processes to the MACHHUB® runtime
• Per-Item Operations: Upload or download individual processes
• Processes Tree View: Browse and manage all processes from the Activity Bar

🔴 Node-RED Integration

• Embedded Node-RED Server: Start and stop a local Node-RED instance directly from VS Code
• Automatic Port Management: Starts on port 1881, auto-selects next available port if in use
• Browser Integration: Open Node-RED editor in VS Code Simple Browser or external browser
• Node-RED Flow Sync: Upload Node-RED flows (with or without node_modules) to the MACHHUB® runtime
• Download Support: Pull Node-RED flows from the runtime to your local workspace

🏗️ Build System

• Build Tree View: Manage build artifacts from the Activity Bar
• Upload All / Upload Build: Deploy entire builds or specific build outputs to the runtime

🎯 Developer Experience

• Multi-Panel Architecture:
  • Activity Bar: Build, Collections, Processes, and Node-RED Flows tree views
• Live Status Monitoring: Real-time connection status in the status bar
• Comprehensive Logging: Development server with timestamped HTTP/MQTT request and response logging
• Hot Reload Support: Watch mode for UI development

🛠️ Getting Started

Prerequisites

• Visual Studio Code 1.103.0 or higher
• Node.js 20.x for development
• MACHHUB® Runtime Environment (local or remote)
• Valid Developer Token and Application ID

Installation

1. Install from VSIX (Development):

   code --install-extension machhub-designer-1.0.1.vsix
   

2. Activate Extension:

   • The extension activates automatically when VS Code starts
   • Look for the MACHHUB icon in the Activity Bar

Quick Setup

1. Configure Runtime Connection

# Open Command Palette
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)

# Run configuration command
> MACHHUB: Configure API Connection

Required Configuration:

• Developer Token: Your MACHHUB® authentication token
• Application ID: Target application identifier
• Connection URLs (optional, defaults provided):
  • HTTP URL: http://localhost:6188
  • MQTT URL: ws://localhost:180

Optional Configuration:

• Enable Live Monitoring: Toggle automatic health checks
• Monitoring Interval: Health check frequency in seconds
• Build Folder Path: Local build output directory (default: build)
• Dev Server Port: Proxy server port (default: 61888)

The configuration supports multiple named profiles — create separate profiles for different environments (e.g. development, staging, production) and switch between them at any time.

2. Monitor & Debug

• Status Bar: Real-time connection status
• Development Server: Automatic proxy on localhost:61888
• Node-RED Flows Tree: Refresh and manage your Node-RED flows

🏗️ Architecture

Recommended Project Structure

my-app/
├── _nodered/            # Node-RED workspace
├── _collections/        # Collection files
├── _processes/          # Processes files
├── src/                 # Developer project files
│   └── ...
├── .gitignore
├── package.json
└── ...

📋 Available Commands

🔧 Configuration Options

Runtime Settings

Access via MACHHUB: Configure API Connection:

Development Server

• Port: 61888 by default; automatically selects next available port if in use
• Features: HTTP request forwarding, authentication header injection, timestamped logging
• Status: Auto-starts when a runtime profile is configured

Node-RED Server

• Port: 1881 by default; automatically increments if in use
• Workspace Directory: _nodered/ (auto-created in the workspace root)
• Browser Integration: Configurable via machhub.nodered.openInSimpleBrowser setting (default: true)

🔍 Status Bar Indicators

📝 Changelog

Version 1.0.1

🎉 Features:

• Profile-based runtime connection system with support for multiple named profiles
• Collections management — upload and download schemas to/from the MACHHUB® runtime
• Processes management — upload and download TypeScript/Python processes
• Node-RED integration — start/stop embedded server, upload/download Node-RED flows
• Build system with Upload All and Upload Build commands
• Development proxy server with HTTP/MQTT logging (default port 61888)
• Live connection monitoring with configurable health check interval
• Multi-panel architecture: Build, Collections, Processes, and NODE-RED Flows tree views
• VS Code Simple Browser integration for Node-RED

🐛 Known Issues

• WebSocket Forwarding: Basic implementation; advanced features planned
• Log Persistence: Server logs open in temporary documents
• Configuration Changes: Some settings require extension reload

📄 License

Copyright © 2025 Intellogic Technology Sdn Bhd. All rights reserved.

This extension is proprietary software licensed for use with the MACHHUB® Platform. See the LICENSE file for complete terms and conditions.