Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Showing command line output on a html page

I am building a web app which runs certain commands on the terminal and display the results back on web app. I am able to run commands using child_process.exec and fetch the results the problem i'm facing is while displaying it on an html page.

I want something like this: enter image description here

Is there any way to show the command line output like this ? Any leads would do. Thank you.

like image 810
Hith Avatar asked Dec 19 '18 22:12

Hith


People also ask

How do I embed a terminal in html?

js on your browser, add the xterm. js and xterm. css to the head of your html page. Then create a <div id="terminal"></div> onto which xterm can attach itself.

How read command prompt output?

In the command, change "YOUR-COMMAND" with your command and "c:\PATH\TO\FOLDER\OUTPUT. txt" with the path and filename to store and view the output. Quick tip: If you have problems viewing the file, you can use the type c:\PATH\TO\FOLDER\OUTPUT. txt command after step No.


1 Answers

For a terminal/shell/console-like experience in a browser or web app, check out...

JS solutions, for interactivity

  • https://xtermjs.org
  • https://github.com/chjj/tty.js
  • http://sdether.github.io/josh.js
  • https://terminal.jcubic.pl/
  • https://github.com/liftoff/GateOne
  • https://github.com/1j01/simple-console
  • https://www.masswerk.at/termlib/index.html

HTML/CSS-only solutions, for non-interactivity

To simulate a terminal, with no connectivity or interactivity:

  • https://github.com/ines/termynal
  • https://github.com/tj/node-term-css
  • https://guides.codechewing.com/mac-terminal-shell-css-html

Or perhaps start from scratch with a black background, white mono-space font and build it up from there...

CodePen

#container {
  background-color: #000000;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
  padding: 3em;
}

#content {
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
}
<div id="container">
  <div id="content">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
  </div>
</div>
like image 60
MarsAndBack Avatar answered Sep 16 '22 11:09

MarsAndBack