ConsoleForge is an Angular 19+ library with a single purpose: to make serving hypervisor-hosted virtual machine console access easy and satisfying. It currently supports access to VNC and VMWare virtual machines.
If you want to see what ConsoleForge can do, start by cloning our repo and installing dependencies:
git clone https://github.com/cmu-sei/console-forge.git
cd console-forge
npm iSince ConsoleForge is all about virtual consoles, you're going to need at least one to test drive it. If you don't have easy access to a Proxmox cluster or some other hypervisor host, you can check out this repo to grab yourself a Docker image that hosts a headless VNC server.
NOTE: If you have Python installed locally and are a VS Code user, you can use the included VS Code Task "Run X11VNC Desktop" to pull and start the container. Easy-peasy!
Once you have a compatible console available, you can build the library...
ng build console-forge --watch... and in a second terminal (or with npx concurrently, or whatever)
ng serve console-forge-docsNavigate to http://localhost:4200. If you're running the X11VNC container, you should be able to access it via the "With x11VNC (Docker Image)" tab!
ConsoleForge exposes standard configuration via its included provideConsoleForge function. You can inject this function where you set up your application's root injector, typically in app.config.ts. Here's an example from our docs app:
import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
import { provideRouter, TitleStrategy } from "@angular/router";
import { LogLevel, provideConsoleForge } from "console-forge";
import { routes } from "./app.routes";
import { AppTitleStrategy } from "./app.title-strategy";
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(withInterceptorsFromDi()),
{ provide: TitleStrategy, useClass: AppTitleStrategy },
provideConsoleForge({
canvasRecording: {
frameRate: 30,
},
logThreshold: LogLevel.DEBUG,
}),
],
};See the config definition in the library for available options and defaults.
ConsoleForge provides a capable toolbar out of the box, but as the only visible element of the library, we felt it important to support customization so that ConsoleForge can happily live within the design language of any app.
To create a custom toolbar, simply create your toolbar component in your Angular project:
ng generate component my-sweet-toolbarPass it your ConsoleForge configuration:
provideConsoleForge({ consoleToolbarComponent: MySweetToolbarComponent });OR just test drive it on a single console:
app.component.ts
protected customToolbar = MySweetToolbarComponent;app.component.html
<!--snip -->
<cf-console [toolbarComponent]="customToolbar"></cf-console>To make your toolbar any or all of the many useful things the default toolbar does, just add an input for ConsoleForge's toolbar context:
my-sweet-toolbar.component.ts
public consoleContext = input.required<ConsoleToolbarContext>();Questions about how to implement your toolbar? Check out our implementation of the default one - it's using the same context as you are!
The ConsoleForge library is built on Angular 19. Consult its package.json for specific dependencies.
We don't currently support independent installation of specific hypervisor support, so when you install ConsoleForge, it includes peer dependencies for all console clients (currently, VNC and VMWare WMKS).
ConsoleForge uses noVNC for VNC client support. See this fantastic package's documentation for currently-supported browsers. (In general, recent versions of Chrome, Firefox, and Edge are supported. Safari is unsupported until such time as it becomes, more or less, a completely different browser.)
If your use case for ConsoleForge doesn't require the ability to connect to VMWare-hosted consoles you can ignore everything about this section. Sweet!
If it does, things are a little become slightly complex.
To use ConsoleForge to connect to VMWare consoles, you'll need a copy of the VMWare HTML Console SDK. For licensing reasons, we don't include this SDK with ConsoleForge. To include it in your Angular app's scripts, you'll need to update the "styles" and "scripts" sections of your angular.json file. Depending where you commit it to your project, it'll look something like this:
//snip
"styles": ["path/to/vmware-wmks/css/main-ui.css"],
// snip
"scripts": ["path/to/vmware-wmks/js/wmks.min.js"]
// snipThis SDK also has dependencies on jQuery and jQuery UI, which you'll also need to add to your Angular project. Depending on your use case, you can either do this through a CDN like code.jquery.com or via your favorite Node package manager. (Note that the HTML Console SDK's current documentation is not specific about which versions of jQuery/jQuery UI are required.) Assuming you're able to install and correctly configure the inclusion of these three dependencies, VMWare consoles in ConsoleForge should work as expected. Having trouble? Drop as an issue and let us know.
You can build your own copy of ConsoleForge using the Angular CLI (currently, 19+). Just clone:
git clone https://github.com/cmu-sei/console-forgeAnd build!
ng build console-forgeConsoleForge is proudly maintained by the Software Engineering Institute at Carnegie Mellon University.
ConsoleForge's default toolbar (which can be replaced by end developers) uses SVG Icons by thewolfkit and Iconship under the Attribution CC BY license.
Special thanks to these projects which make ConsoleForge possible!