feat(dev-server): configure request proxy for dev-server (#1299)

Signed-off-by: Thuan Vo <[email protected]>

README.md

@@ -46,19 +46,24 @@ Development environment supports hot reload with Webpack's [Hot Module Replaceme
 
 ### With Cryostat
 
-First, launch a [`Cryostat`](https://github.com/cryostatio/cryostat) instance with CORS enabled by setting `CRYOSTAT_CORS_ORIGIN` to `http://localhost:9000`. For example:
-
+First, launch a [`Cryostat`](https://github.com/cryostatio/cryostat) instance:
 ```bash
 $ cd /path/to/cryostat
-$ CRYOSTAT_DISABLE_SSL=true CRYOSTAT_CORS_ORIGIN=http://localhost:9000 sh run.sh
+$ bash smoketest.bash
 ```
 
 Then, run:
 
 ```bash
+# To configure the URL pointing to Cryostat, set CRYOSTAT_PROXY_URL
+# By default, CRYOSTAT_PROXY_URL is set to https://localhost:8443
 $ yarn start:dev
+# or without TLS
+$ CRYOSTAT_PROXY_URL=http://localhost:8080 yarn start:dev
 ```
 
+The dev server will proxy API requests to Cryostat and Grafana.
+
 ### Without Cryostat
 
 To quickly preview changes without launching a `Cryostat` instance, run:

src/app/Shared/Services/Report.service.tsx

@@ -34,11 +34,9 @@ export class ReportService {
     }
     const headers = new Headers();
     headers.append('Accept', 'application/json');
-    let url = recording.reportUrl;
-    if (!url.startsWith(this.login.authority)) {
-      url = `${this.login.authority}/${recording.reportUrl}`;
-    }
-    return fromFetch(url, {
+    let url = new URL(recording.reportUrl, document.location.href);
+
+    return fromFetch(url.toString(), {
       method: 'GET',
       mode: 'cors',
       credentials: 'include',

webpack.dev.js

@@ -17,10 +17,23 @@ module.exports = merge(common('development'), {
     hot: true,
     open: true,
     port: PORT,
+    // In preview mode, requests are intercepted with miragejs
+    proxy: process.env.PREVIEW? undefined: [
+      {
+        context: ['/api', '/health', '/grafana'],
+        target: process.env.CRYOSTAT_PROXY_URL ?? 'https://localhost:8443',
+        secure: false, // ignore insecure tls
+        auth: 'user:pass',
+        ws: true,
+        followRedirects: true,
+      }
+    ]
   },
   plugins: [
     new EnvironmentPlugin({
-      CRYOSTAT_AUTHORITY: 'http://localhost:8181',
+      // Requests are proxied by dev-server
+      // In preview mode, a base url is required.
+      CRYOSTAT_AUTHORITY: process.env.PREVIEW? 'http://localhost:8181': '', 
       PREVIEW: process.env.PREVIEW || 'false'
     })
   ],