Enhance web UX dev experience

README.md

@@ -111,6 +111,12 @@ To simplify iteration, you can also run in `watch` mode, which automatically re-
 
     yarn --cwd presto-main/src/main/resources/webapp/src run watch
 
+You can launch an HTTP server to serve the web UI and proxy the server APIs to an external Presto server:
+
+    yarn --cwd presto-main/src/main/resources/webapp/src run serve --env=apiHost=<ip address> --env=apiPort=<port>
+
+Replace the `<ip address>` and `<port>` to point to your Presto server. The default values are: `localhost` and `8080`.
+
 To iterate quickly, simply re-build the project in IntelliJ after packaging is complete. Project resources will be hot-reloaded and changes are reflected on browser refresh.
 
 ## Release Notes

presto-main/src/main/resources/webapp/src/package.json

@@ -29,6 +29,7 @@
   "scripts": {
     "install": "webpack --env=production --config webpack.config.js",
     "package": "webpack --env=production --config webpack.config.js",
-    "watch": "webpack --config webpack.config.js --watch"
+    "watch": "webpack --config webpack.config.js --watch",
+    "serve": "webpack serve --config webpack.config.js"
   }
 }

presto-main/src/main/resources/webapp/src/webpack.config.js

@@ -4,7 +4,9 @@ const path = require('node:path');
 const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = (env) => {
-    var mode = env.production ? 'production' : 'development';
+    const mode = env.production ? 'production' : 'development';
+    const apiHost = env.apiHost || 'localhost';
+    const apiPort = env.apiPort || '8080';
     return {
         entry: {
             'index': path.join(__dirname, 'index.jsx'),
@@ -60,5 +62,13 @@ module.exports = (env) => {
               }),
             , '...'],
           },
+        devServer: {
+            static: {
+                directory: path.join(__dirname, '..'),
+              },
+            proxy: {
+                '/v1': `http://${apiHost}:${apiPort}`,
+            },
+        },
     };
 };