How to launch a ros launch file using a button in react app?

Question

I am trying to launch a ros launch file in react app using a button with rosnodejs without any backend.

I installed rosnodejs with

npm install rosnodejs

then wrote this code in a jsx file:

import React, { Component } from "react";
import * as rosnodejs from 'rosnodejs';

const rosNode = await rosnodejs.initNode('my_node');
async function launchFile(){
  const { run } = rosnodejs;
  await run('turtlebot3_house.launch', 'turtlebot3_gazebo');
}

function MyButton(){
  return (
    <button onClick={launchFile}>Launch ROS file</button>
  );
}

export default MyButton;

and then imported MyButton in index.js in the following way:

import MyButton from "./components/Launch Buttons"

ReactDOM.render(
  <React.StrictMode>
    <App />
    <MyButton />
  </React.StrictMode>,
  document.getElementById("root")
);

but the line in which I imported rosnodejs gives too many errors. Is there a problem in the installation? and what is the right way to do this?

score 0 · Answer 1 · answered Jun 26 '23 at 14:58

You have a fundamental error: rosnodejs (and ros) run on the back-end, usually a robot, but react runs on the front-end, the browser. This is why you can just import rosnodejs into a react application and use it. You will need to implement:

a back-end application in node.js where you can run rosnodejs, and
a mechanism to get your front-end event to that back-end, e.g., a small REST API or a protocol over websockets

How to launch a ros launch file using a button in react app?

1 Answers1