Make backend port configurable (stolostron#3344)

Lets users configure a port like 4001 if 4000 is
unavailable.

Signed-off-by: Dale Haiducek <19750917+dhaiducek@users.noreply.github.com>

Author: dhaiducek

README.md

@@ -84,6 +84,9 @@ A number of the core NPM package dependencies are published from other repositor
 
     This will start the frontend and the backend in parallel. (It may take up to 30 seconds for the UI to appear)
 
+    **NOTE:** If a port conflict appears with port `4000`, you can override it by exporting `BACKEND_PORT` with a 
+    new value like `4001` and re-running the setup and start commands
+
 ## Running as an OpenShift console plugin-in
 
 See [Dynamic Plugins - Development](frontend/PLUGIN.md#development)

frontend/webpack.config.ts

@@ -167,7 +167,7 @@ module.exports = function (env: any, argv: { hot?: boolean; mode: string | undef
         '/multicloud/username',
         '/multicloud/userpreference',
         '/multicloud/version',
-      ].map((backendPath) => ({ path: backendPath, target: 'https://localhost:4000', secure: false })),
+      ].map((backendPath) => ({ path: backendPath, target: `https://localhost:${process.env.BACKEND_PORT ?? 4000}`, secure: false })),
       open: openBrowser,
       historyApiFallback: true,
       compress: true,

setup.sh

@@ -5,7 +5,7 @@
 
 echo > ./backend/.env
 
-echo PORT=4000 >> ./backend/.env
+echo PORT="${BACKEND_PORT:-4000}" >> ./backend/.env
 echo NODE_ENV=development >> ./backend/.env
 
 CLUSTER_API_URL=`oc get infrastructure cluster -o jsonpath={.status.apiServerURL}`