Click the button to run a server-side shell script

Question

Click the button to run a server-side shell script

I have a task where I need to run a shell script on my server and retrieve the resulting string after execution. The condition is that this script should only run when a specific button in my ReactJS application is clicked.

After spending a considerable amount of time searching for answers, I found suggestions to create a web service and call it from the app upon button click. However, none of the responses gave detailed instructions on how to implement this or provided any related articles for further understanding. (I apologize if this seems like a basic concept, as I only started learning ReactJS recently through an online course.)

Could someone perhaps provide a simple code snippet demonstrating how to establish communication between the 'shell script web service' and a button click event? Alternatively, sharing a relevant article link discussing this approach would also be greatly appreciated.

Thank you in advance for any assistance.

EDIT: In my search efforts, I came across a query on How to execute shell command in Javascript. However, based on the comments, it appears that this method may not function properly in a browser environment. Is this the kind of code I should include in my web service?

reactjs next.js

Answer 1

Answer №1

Finally, success! Here's what I did.

Step1: Begin by creating a page/api/execute.js (name your file appropriately).

Step2: Insert the following sample shell script (ls command) into your execute.js file:

export default function handler(req, res) {
  const execSync = require('child_process').execSync;
  
  const output = execSync('ls', { encoding: 'utf-8' });
  const splitted = output.split(/\r?\n/);  
  const filtered = splitted.filter( e => {
    return e !== '';
  });

  res.status(200).json(JSON.stringify(filtered))
}

Step3: Within your react component, include a button with an onClick handler like this:

<Button primary onClick={this.execCommand}>Execute Shell Command</Button>

Step4: Create your execCommand function as follows:

async execCommand() {
    const req = await fetch("/api/execute");
    const data = await req.json();
    console.log(data);
}

Step5: Click the button and view the output in your browser's console.

Cheers!

Answer 2

Finally, success! Here's what I did.

Step1: Begin by creating a page/api/execute.js (name your file appropriately).

Step2: Insert the following sample shell script (ls command) into your execute.js file:

export default function handler(req, res) {
  const execSync = require('child_process').execSync;
  
  const output = execSync('ls', { encoding: 'utf-8' });
  const splitted = output.split(/\r?\n/);  
  const filtered = splitted.filter( e => {
    return e !== '';
  });

  res.status(200).json(JSON.stringify(filtered))
}

Step3: Within your react component, include a button with an onClick handler like this:

<Button primary onClick={this.execCommand}>Execute Shell Command</Button>

Step4: Create your execCommand function as follows:

async execCommand() {
    const req = await fetch("/api/execute");
    const data = await req.json();
    console.log(data);
}

Step5: Click the button and view the output in your browser's console.

Cheers!

Click the button to run a server-side shell script

Answer №1

Similar questions

I would like to know how to modify the style of an MUI button in ReactJS when it is clicked

Is implementing client components in Server Side pages an effective strategy for optimizing SSR performance?

Wrapper class for iOS and Android libraries in React-Native

Sort columns in a MUI datatable

When the application is converted into static files, the dynamic routes fail to function properly

Experiencing Problems with Routing React page on Apache2 Server

Formik React struggling with error management and handling tasks accurately

React and Express facing CORS header challenge

The command "react-scripts" couldn't be located in the current environment

Error Encountered: SyntaxError due to an Unexpected token < found in JSON at position 0

Trouble arises with Service Workers during the transition from Create React App to Next JS

When trying to run the "npm start" command, I encountered a syntax error that specifically mentioned the use of

Issue with TypeScript when using destructuring on an object

What is the best way to utilize the forEach method in React to manipulate a navigation element containing multiple links?

I am looking to export multiple 'Pure components'

The property 'currentUser' of 'Object(...)(...)' is unable to be destructured due to its null value

Revamp State before redirecting using React Router Dom

What is the best method to implement real-time data updates in a single page application

Issues with displaying characters in React when using UTF-8 encoding

Interactive Tab Navigation using React Swipe