Creating a terminal emulator using reactjs and nodejs

Image soure:Pixabay

In the last tutorial we had set up a docker instance to store files in cloud using openstack swift. Today we are going to create a in browser terminal in reactjs and run commands on remote server similar to ones used by cloud ide’s like c9,koding among others.

Set up a new project if you haven’t already using create react app:

We are first going to create in browser terminal to run commands from frontend using react-bash,use material ui for creating ui and superagent module to send requests to backend.Here is the complete package.json for reference:

Copy the dependencies into your project’s package.json and run npm install to install all the modules.

Next create a new component called TerminalAccess.js and start writing the following code:

This should bring up basic page with a single tabbar page.

Next initialize terminal in the component by making following modifications:

This should bring up a basic terminal in the browser with basic terminal commands working.

Taking this a step further we will now send commands entered by the user  to a remote server(localhost in this example) and run them directly in localhost terminal.

We first need to create backend apis to handle input commands from frontend in nodejs as follows:

I am going to follow same directory structure we kept in last tutorial for creating mysql dashboard  which is as follows:

├── package.json
├── routes
│   ├── commandroutes.js
│   └── dbroutes.js
└── server.js

We need node-cmd module which allows us to run commands from nodejs server to system shell.

We will first create commandroutes.js as follows:

Next modify server.js to handle new request handler:

Make sure that you run node server with sudo prefix to allow node-cmd to run commands with superuser privileges:

Now let us get back to development in frontend. We need to extend react-bash modules capabilities to handle commands which don’t exist in its commands file found here.The command example I am taking is docker ps command which is used to get the list of currently running docker instances.The reason for choosing this specific command is that it requires superuser privileges to run properly and we started our node server for that purpose itself. If you have not set up docker on your machine then you can go through the setup as explained in my previous article here.

We will first define a function to send data to node server from react-bash:

Next we need to modify extensions in the render function as follows:

Whenever user types any docker related command, the docker extension is executed which sends data to node server and receives data back from node server in res callback.

Note that code in res callback is to simply format the data into proper table instead of simply displaying the data as it is:

Terminal emulator
Terminal emulator

You can find the source code for this project on github here

Bonus Tips:

The goal of this project was not just to create terminal in browser but to add additional capabilities to existing terminals.For example in our case instead of simply displaying list of running docker instances we created a check list which can be further customized to allow removal,stopping and monitoring docker instances by adding features in the check list.

Terminals have existed from quite a few decades, but additional capabilities to terminals are limited to customizing them with external plugins or modifying bash_profile.

Browsers provides us a perfect platform to extend terminal capabilities and create new shells which are close to specialized software themselves thereby boosting developer workflows by leaps and bounds.

If you like the idea behind the project then feel free to fork it and contribute towards creating smarter terminals by creating your own custom commands.

Ex. A simple ls command can be extended to display files as folders found in windows/linux desktop environment and allow editing, adding and removing files right in the terminal itself instead of running vim,mkdir and the dreaded rm commands.

Connect Deeper:

In the next tutorial I will be covering how to create an in browser nodejs debugger for smarter json parsing,error & syntax highlighting similar to current chrome console, so follow our facebook page here: Technoetics


Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development