Control raspberry pi via website in React.js?

Question

I've written a nodejs application and put it on my raspberry pi. That's all good. However, I would now like to control my nodejs application via a web browser interface / website built in React. How would I do this? The website would be on the internet, but would need to have somehow access to my raspberry pi computer and modify things there.

Answer 1

I think there are two ways of doing this :

• Use your raspberry pi as a web server too : install Nginx/Apache for example (they are web servers) and give them your React app.
• Use a external hosting, like OVH for example, and give them your React app too.

I don't know if you know how to do a React website, but there are plenties of tutorials on web, like this one.

The goal here is to create an API relation between your NodeJS application and your website. The NodeJS server has to be listening on a port (8080 for example) and specific URLs which corresponds to commands (/api/reboot will reboot the app for example). And in your website, you just have to call those URLs after a button is pushed (a 'Reboot' button for example, will send a POST request to http://raspberrypi:8080/api/reboot).

Basically, link every command you want to execute with your NodeJS application to an url and link it in your website to an action.

If you want to securise the transmission (so nobody can reboot your app), just include some password and HTTPS :)

See ya !

Answer 2

Here is the link: MyExample

Also recommending to add module child-process to use execute command like this:

var exec = require('child_process').exec;

execute('sudo reboot'); use this when receiving socket  


function execute(command) {
    var cmd = exec(command, function(error, stdout, stderr){
        console.log("error: ", error);
    });
}

With this u can make client side with "terminal" (text holder) and on button click client would send info to RPI with Your command in text holder.