DEV Community

Utsav Ladani
Utsav Ladani

Posted on

Web based terminal - Project Demo

Hey folks,

I am trying to make a web based terminal. In which you can run a command and that command execute on your server.

Idea behind project

We know that server run on different operating systems and each operating system has their own basic utility to get useful information and also has some useful tools to monitor CPU and RAM usage, etc. These tools and utilities run through a terminal/CLI. You can use that terminal through my web app to get information about your server system. Mobile client can support also, so no need to open computer, just open the app and type command whatever you want 😄.

Technical details

Techs are React for frontend and NodeJS, socket.io and child_process modules for backend. There is on any emulator concept. Terminal commands are depends on server's operating system (I make it for my local server, so it supports windows commands),

How project works?

There is a simple concept of child process. For each socket, I create a new child process using the spawn function, which is running terminal executable file("cmd.exe" for windows). Now through socket event, I send input command to standard input of child process and get back standard output/error and send it to client.

YouTube Demo: https://youtu.be/JrIg-IOaw1U

GitHub Link: Html and Terminal

GitHub logo Utsav-Ladani / Html-and-Terminal

Type command in browser and run on server

Html-and-Terminal

Html and terminal is a basic project. You can type commnd in browser and run it on your server. You can use it to manage remote systems.

Version 1 Demo : https://youtu.be/JrIg-IOaw1U

Version 2 Demo : https://youtu.be/AhOC-8VGVNI

Tech stack

  • React
  • xterm.js
  • express
  • node-pty



Top comments (2)

Collapse
 
azterizm profile image
Abdullah Memon

Simple and useful. I would suggest using react-terminal-ui for a better ux. You see if we could write commands like we do in the terminal - that would be sick!
Also, multiple windows for concurrent operations.. we can do so many things with this!

Wishing you good luck 😃

Collapse
 
utsavladani profile image
Utsav Ladani

Thanks for help