Allow start_robot_browser.js to take a command line port (#117)

* Allow specifying robot browser port via command line to simplify startup instructions

* Updated README

* Add serve instructions to README

Author: amalnanavati

feedingwebapp/.env

@@ -2,8 +2,6 @@
 # from screens that would otherwise wait for ROS messages).
 REACT_APP_DEBUG=false
 
-# The port to launch the app on
-REACT_APP_PORT=3000
 # The port for the WebRTC signalling server
 REACT_APP_SIGNALLING_SERVER_PORT=5000
 # The port of the rosbridge server (default: 9090)

feedingwebapp/README.md

@@ -12,6 +12,7 @@ The overall user flow for this robot can be seen below.
 
 ## Dependencies
 - [Node.js](https://nodejs.org/en/download/package-manager)
+- [`serve` must be globally installed](https://create-react-app.dev/docs/deployment/) (ideally with `sudo`): `sudo npm install -g serve`
 
 ## Getting Started in Computer
 
@@ -33,7 +34,7 @@ If your workspace has already been built, you should run `source install/setup.b
     - If users will be accessing the app on a device other than the device running ROS, change `REACT_APP_ROS_SERVER_HOSTNAME` in `.env` to be the hostname of the device running ROS. Ensure that device is configured so that ports 8080 (web_video_server default) and 9090 (rosbridge default) can be accessed.
 3. Start the app: `npm start`
 4. Start the WebRTC signalling server: `node --env-file=.env server.js`
-5. Start the headless robot browser: `node --env-file=.env start_robot_browser.js`
+5. Start the headless robot browser: `node start_robot_browser.js`
 6. Use a web browser to navigate to `localhost:3000` to see the application.
 
 #### Launching Dummy Nodes

feedingwebapp/package-lock.json

@@ -13,6 +13,7 @@
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "mdb-react-ui-kit": "^3.0.0",
+    "minimist": "^1.2.8",
     "playwright": "^1.40.1",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",

feedingwebapp/package.json

@@ -3,9 +3,16 @@
 const { chromium } = require('playwright')
 const logId = 'start_robot_browser.js'
 
-let robotHostname = 'localhost:' + process.env.REACT_APP_PORT
-if (process.argv.length > 2) {
-  robotHostname = process.argv[2]
+var argv = require('minimist')(process.argv.slice(2))
+let hostname = 'localhost'
+if (argv.hostname) {
+  hostname = argv.hostname
+}
+let port = 3000
+if (argv.port) {
+  if (!isNaN(parseInt(argv.port))) {
+    port = parseInt(argv.port)
+  }
 }
 
 ;(async () => {
@@ -20,6 +27,9 @@ if (process.argv.length > 2) {
   }
   ///////////////////////////////////////////////
 
+  let url = `http://${hostname}:${port}/robot`
+  console.log(logId + ': Accessing URL: ' + url)
+
   const browser = await chromium.launch({
     headless: true, // default is true
     ignoreHTTPSErrors: true, // avoid ERR_CERT_COMMON_NAME_INVALID
@@ -34,7 +44,7 @@ if (process.argv.length > 2) {
 
   while (num_tries < max_tries) {
     try {
-      await page.goto(`http://${robotHostname}/robot`)
+      await page.goto(url)
       console.log(logId + ': finished loading')
       break
     } catch (e) {