Simple Browser Terminal with NeutralinoJS
Neutralinojs is Open Source Javascript framework for developing Web application with native Operating System features. Now it has reached more than 300 stars on the Github.
So in this article we are focusing about developing a simple Browser based Terminal using the NeutralinoJS.
Step 1: Downloading NeutralinoJS SDK
You can easily download latest version on NeutralinoJS here.
That all you need. No heavy node modules. Just less than 1MB.
Then open the SDK with your favorite text editor. I’ll prefer with Visual Studio Code.
NeutralinoJS has simple file structure.
Step 2: Let’s start coding.
First open the index.html and add some stylesheets. I’ll use Bootstrap 4.
Add these code fragment at the header section of index.html
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">Then add these scripts to the Body section.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
Then add a <div> section to show our terminal. Add these code fragment inside the <body> tag.
<div class="card" style="padding-left: 10px; padding-right: 10px; padding-top: 5px"><div class="card-header">Console</div><div class="card-body scroll" style="background-color: black; height: 70%;" id="terminal"><p style="color: white; font-family: Lucida Console; font-size: 12px" id="commandText"></p></div><div class="card-footer"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">Command</span></div><input type="text" style="font-family: Lucida Console; font-size: 12px" class="form-control" id="command" autofocus aria-describedby="basic-addon3" placeholder="Type your command and press enter"></div></div></div>
Step 3: Let’s get in to the Logic
Now we completed the UI of our Application.
Then open the app.js file.
Every time the NeutralinoJS application runs it initially runs the below code.
Neutralino.init({ load: () => { //Your functions.}});
You need to start your code with here.
In traditional terminal it initially shows the current directory location. So we can show it when loads our app.
Let’s add first function to the Neutralino.init function. We name it as getStartupDir().
Neutralino.init({ load: () => { getStartupDir();}) }});
Then write the code for the getStartupDir().
function getStartupDir(){ Neutralino.os.runCommand('CD', (data) => { initialmsg = data.stdout; message = data.stdout; document.getElementById('commandText').innerText = message;},() => { console.error('error'); });}
In here I have defined two global variables named message and initialmsg can accessible with any function.
We are running Neutralino.os.runCommand function to get the current folder location and print it in the Black space of our application.
Step 4: Run Any Terminal Command
Then we need to run any command with the type and clicking the enter button. So we can add this code fragment to the load function.
document.querySelector('#command').addEventListener('keypress', function (e) { var key = e.which || e.keyCode; if (key === 13) { // 13 is enter runCommands(); }});
In here I’ve defined another function called runCommands() . Let’s we implement the runCommands() function.
function runCommands(){ var command = document.getElementById("command").value; toUpper = command.toUpperCase(); if(toUpper === 'CLS'){ message = ''; commandRunner(command); }else{ commandRunner(command); }}
In here I’ve get the ordinary command of cls to clear the screen. Then direct the command to another function called commandRunner(command) .
Let’s we look into how the commandRunner(command) implemented.
function commandRunner(command){Neutralino.os.runCommand(command, (data) => { message = message + data.stdout + '\n' + initialmsg; document.getElementById('commandText').innerText = message; document.getElementById('command').value = ''; document.getElementById('command').focus; var objDiv = document.getElementById("terminal"); objDiv.scrollTop = objDiv.scrollHeight;},() => { console.error('error');});}
It uses NeutralinoJS Neutralino.os.runCommand function to execute the functions we have entered.
Now It looks like this with more UI improvements.
Most of the Terminal commands are works with this browser based terminal.
Give a try to improve this simple Browser based Terminal. Send us a PR if you have improved version.
You can get the Source code of this Application here.
Thank you!
