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.

author avatar
Chad Michel Senior Software Architect
Chad is a lifelong Nebraskan. He grew up in rural Nebraska and now lives in Lincoln. Chad and his wife have a son and daughter.

Related posts