I have .sh file like :
echo "Hello"
Which outputs :
Hello
Here is the query :
What I want to achieve is, to get output from the .sh file and use it in
my react application.
I have searched for npm packages but can't find any useful
Assuming you are not on Windows machine, you can write simple Node Express server, which can receive GET request, then execute your shell script with Node's built-in child_process.exec() and then send response containing stdout, which, in this case, will be your shell script's output - "Hello"
Code for the server. 'static' folder contains index.html and index.js, code for last is below this:
const express = require('express')
const { exec } = require('child_process')
const { join } = require('path')
const port = process.env.PORT || 24587
const app = express()
app.use(express.static(join(__dirname, 'static')))
app.get('/hello', (req, res) => {
exec(join(__dirname, 'hello.sh'), (err, stdout, stderr) => {
if (err) {
return res.status(400).json({ output: null, error: err.message })
}
res.status(200).json({ output: stdout, error: null })
})
})
app.listen(port, () => {
console.log('server listening on port', port)
})
Example code for the client (you can also wrap React around this code because the only thing you need is XHR made here with the help of fetch):
const btn = document.querySelector('#btn') // <button id="btn">get</button>
const result = document.querySelector('#result') // <div id="result"></div>
btn.addEventListener('click', () => {
if (self.fetch) {
fetch('/hello')
.then(res => res.json())
.then(data => {
result.innerText = data.output
})
.catch(data => {
result.innerText = data.error
})
}
})
I think you should put output to any file (echo $var > $destdir or using sed), read this file using nodejs and for example pass value through ajax request to react.
Related
I have a React front-end, with a Node back-end to connect to mySql for data. It works exactly how I want locally. However, now that I'm moving it to a VPS server, I can't seem to get my configuration correct.
The error I get is: create:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0. It's actually returning HTML, of the page that says it's can't find the page.
I setup an express server with this code:(I do realize I need to move login details to an ENV file... just haven't yet)
const express = require('express');
const mysql = require('mysql2');
const connection = mysql.createPool({
host : 'localhost:3306',
user : 'root',
password : 'xxxxx',
database : 'ppr'
});
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.get('/api/clients/all', function (req, res) {
// Connecting to the database.
connection.getConnection(function (err, connection) {
// Executing the MySQL query (select all data from the 'clients' table).
connection.query("SELECT * FROM clients", function (error, results) {
// If some error occurs, we throw an error.
if (error) throw error;
console.log(results);
res.json(results);
});
});
});
// Starting our server.
app.listen(3001, () => {
console.log('Listening on port http://localhost:3001');
});
I start this running on the server, and it runs. No errors.
But then my React app makes the first api call, and I get the error because it returns HTML instead of the data I'm expecting. Do I need to do something different to make it work in production? I have proxy setup in my local machine which probably makes it work... but what do I change for production?
Here's the API call that works locally, but not on the server if it helps:
componentDidMount() {
fetch('/api/clients/all')
.then(res => res.json())
.then((result) => {
this.setState({ clients: result });
console.log(result);
})
.then(
fetch(`/api/policy/all`)
.then(res => res.json())
.then((result) => {
this.setState({ policies: result });
console.log(result);
})
);
}
I'm new to Node and have previously just written Javascript for simple browser extensions. What I'm trying to do is run a shell script and then return the text for it on a get request (simplified version).
I've tried looking at callbacks and can't seem to get my head around it or even adapt another example to what I'm trying to do. My main problem is either that the I'm receiving the error "first argument must be one of type string or buffer. received type undefined" or "received type function" (when I tried to implement a callback, which is what I believe I need to do here?).
I've looked at a few examples of callbacks and promises and seeing them in abstraction (or other contexts) just isn't making sense to me so was hoping someone could help direct me in the right direction?
The code is very crude, but just trying to get some basic functionality before expanding it any further.
var express = require("express");
var app = express();
const { exec } = require("child_process");
var ifcfg = function(callback) {
exec("ifconfig", (error, stdout, stderr) => {
if (error) {
console.log(`error: ${error.message}`);
return error;
}
if (stderr) {
console.log(`stderr: ${stderr}`);
return err;
} else {
var output = stdout.toString();
return callback(output);
}
});
}
app.get("/ifconfig", (req, res) => res.write(ifcfg(data)));
var port = process.env.PORT || 8080;
app.listen(port, function() {
console.log("Listening on " + port);
});
In JavaScript, a callback is a function passed into another function as an argument to be executed later.
Since the command is executed asynchronously you will want to use a callback to handle the return value once the command has finished executing:
var express = require("express");
var app = express();
const { exec } = require("child_process");
function os_func() {
this.execCommand = function(cmd, callback) {
exec(cmd, (error, stdout, stderr) => {
if (error) {
console.error(`exec error: ${error}`);
return;
}
callback(stdout);
});
}
}
app.get("/", (req, res) => {
console.log("InsideGetss");
var os = new os_func();
os.execCommand('ifconfig', function (returnvalue) {
res.end(returnvalue)
});
});
Im passing a file to node.js with AJAX. the file is passed as a Base64 string and I pass it using multipart/form-data. The AJAX part work flawlessly, but I need to have said string stored on a variable in server side i.e. in Node.js. Now, on PHP this would be super easy:
$someVar = $_POST["myBase64EncodedFile"];
How can I achieve exactly that but with Node.js? I have to use Node.js and I dont want the file to be saved in some temp folder, I just need the string on a variabe. Any ideas? Thanks.
use formidable modules.
in express , you can ues it like this:
var formidable = require('formidable');
const form = new formidable.IncomingForm();
function handlerFormByEvent(req, res, next) {
form
.parse(req)
.on('fileBegin', (name, file) => {
console.time('start');
console.log('name', name);
file.path = `uploads/${file.name}`;
})
.on('progress', (accepted, total) => {
console.log(`accept:%d,total：%d`, accepted, total);
})
.on('field', (name, field) => {
console.log('field', name, field);
})
.on('file', (name, file) => {
// handle file
console.log('name', name);
console.log(file.toJSON());
})
.on('aborted', error => {
let message = error.message;
res.render('error', { message, error });
})
.on('error', err => {
console.error('Error', err);
let message = err.message;
res.status(err.status || 500);
res.render('error', { message, error: err });
})
.on('end', () => {
res.end('ok');
});
}
I have been implementing a Next.js app for a side project of mine. It is a basic brochure-style site with a contact form.
The form works perfectly fine when the site is run locally, however I have just published the site to Netlify and now when submitting a form I encounter the following error:
POST https://dux.io/api/form 404
Uncaught (in promise) Error: Request failed with status code 404
at e.exports (contact.js:9)
at e.exports (contact.js:16)
at XMLHttpRequest.d.(/contact/anonymous function) (https://dux.io/_next/static/cFeeqtpSGmy3dLZAZZWRt/pages/contact.js:9:4271)
Any help would be extremely appreciated!
This is my Form Submit function:
async handleSubmit(e) {
e.preventDefault();
const { name, email, option, message } = this.state;
const form = await axios.post('/api/form', {
name,
email,
option,
message
});
this.setState(initialState);}
This is my server.js file:
const express = require('express');
const next = require('next');
const bodyParser = require('body-parser');
const mailer = require('./mailer');
const compression = require('compression');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.use(compression());
server.use(bodyParser.json());
server.post('/api/form', (req, res) => {
const { email = '', name = '', option = '', message = '' } = req.body;
mailer({ email, name, option, text: message })
.then(() => {
console.log('success');
res.send('success');
})
.catch(error => {
console.log('failed', error);
res.send('badddd');
});
});
server.get('*', (req, res) => {
return handle(req, res);
});
server.listen(3000, err => {
if (err) throw err;
console.log('> Read on http://localhost:3000');
});
});
It looks like nextjs tries to render the /api/form page and you get a not found with that.
Please make sure you start the server with node server.js instead of next start.
What about try to use full endpoint http://~~~/api/form instead of just /api/form?
Or I think, you can solve this problem if you use process.env
const config = {
endpoint: 'http://localhost:8080/api'
}
if (process.env.NODE_ENV === 'production') {
config.endpoint = 'hostname/api'
}
At the moment I have a code in Node.js which calls the program "EnergyPlus". Unfortunately I have to start an external console and execute the Node.js file "manually". However, I would like to be able to press a button in the front end of my application that starts the "EnergyPlus" plus program.
Here is my Node.js file:
var spawn = require('child_process').spawn,
child = spawn('C:\\EnergyPlusV9-0-1\\EP-Launch.exe', ["C:/Windows/System32/Drivers/etc/hosts"]);
child.stdout.on('data', function (data) {
console.log('stdout: ' + data);
});
child.stderr.on('data', function (data) {
console.log('stderr: ' + data);
});
child.on('close', function (code) {
console.log('child process exited with code ' + code);
});
Is there a way to integrate this code within a button or to execute this code after clicking a button?
Thank you very much in advance!
Here's how you can do this:
On client side button click, make a request to a certain path in your express API
Your express API handles the request by launching the program
Code something that looks like this:
client.html:
<button onclick="func()">start app</button>
<script>
const func = () => fetch('http://your.api.url/some/path');
</script>
server.js:
// imports
const express = require('express');
const spawn = require('child_process').spawn;
// create server
const app = express();
// upon request to the launch path, launch the program
app.get('/some/path', (req, res) => {
let child = spawn(
'C:\\EnergyPlusV9-0-1\\EP-Launch.exe',
["C:/Windows/System32/Drivers/etc/hosts"]
);
// etc (rest of the code you wrote)
// response. You can modify this to send a custom response to your client
res.send('');
})
Thank you very much for the help!
I have found the solution for my problem.
To start from the beginning, within my application I work with React and Webpack. To solve my problem, I structured my Server.js file (where I set up the Express behavior) in the following way:
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
const fs = require("fs")
const spawn = require('child_process').spawn;
// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));
app.use(cors())
// create a GET route
app.get('/express_backend/:filename', (body, res) => {
const f = body.params.filename;
// open EnergyPlus Programm with a specific file which is stored localy
let child = spawn(
'C:\\EnergyPlusV9-0-1\\EP-Launch.exe',
[process.cwd()+"src/"+ f + ".idf"]
);
child.stdout.on('data', function (data) {
console.log('stdout: ' + data);
});
child.stderr.on('data', function (data) {
console.log('stderr: ' + data);
});
child.on('close', function (code) {
console.log('child process exited with code ' + code);
});
res.send('EnergyPlus is running');
});
// default options
app.use(fileUpload());
//post the uploaded file into the local storage
app.post('/upload', function(req, res) {
...
}
// The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
let sampleFile = req.files.file;
// Use the mv() method to place the file localy
fs.writeFile(__dirname + `/upload/${sampleFile.name}`, sampleFile.data,
(err) => {
....
})
});
Like Nino Filiu mentioned in his post, I integrated the child spawn function into the server.js. First, I call the EP launch.ex with the specific file, I stored localy (this function is not part of this answer). "C:\EnergyPlusV9-0-1\EP-Launch.exe"is the path to EnergyPlus. "[process.cwd()+"src/"+ f + ".idf"]" helps EnergyPlus to open the local stored fiel directl.
So the important thing regarding my problem was the app.get, which I trigger within my App.js.
In App.js I call the spawn child process like this:
class App extends Component {
constructor(props){
super(props)
this.state = {filename: null}
};
componentDidMount() {
...
};
callBackendAPI = async () => {
...
};
//trigger the spawn child function within server.js
startEnergyPlus = (e) =>{
fetch (`http://localhost:5000/express_backend/${this.state.filename}`, {
method: "GET"
});
render(){
return(
<div className="App">
<button onClick={this.startEnergyPlus}>start app</button>
</div>
};
And that is it. Hopefully, it is clear and helpfull. If not, please leave a comment!