Quick Look – A Console on the Web

I love console applications.

For some reason, the simplicity of the interaction appeals to me. But today we do a lot of web development where many of our solutions end up with some web portal. Couldn’t we have a console/terminal on the web?

Yes, we can!

There is an awesome project to get Xterm support into a web environment. You can find out more about the project here.

Why would anyone want a console/terminal in a web application? One of the users of the Xterm framework is VS Code. Having terminal support in a rich editor like VS Code is almost essential. Having the ability to do things like run git commands from within your IDE is a pretty standard feature at this point.

How can we use this control? Let’s start by creating a new Angular application.

ng new ConsoleTest

After we have our Angular application, we need to add an npm module to our project. Now we are going to add ng-terminal, which is an Angular module for the Xterm.js control.

npm install ng-terminal --save

Now we need to make two changes to our code. In a real project, we probably wouldn’t put the terminal in our root Angular AppComponent, but for this demo we will.

This makes me happy.