Updates to support local UI dev

Author: jake-kramer

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "type-check": "tsc -p tsconfig.json --noEmit",
     "build": "NODE_ENV=production webpack --progress --config scripts/webpack/webpack.prod.js",
+    "dev": "webpack serve --config scripts/webpack/webpack.dev.js",
     "backend:dev": "make build run 'PARAMS=--config.file ./cmd/pyroscope/pyroscope.yaml'",
     "lint": "eslint . --ext .js,.tsx,.ts --cache",
     "lint:fix": "yarn lint --fix",
@@ -79,6 +80,7 @@
     "web-streams-polyfill": "^3.2.1",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {

public/README.md

@@ -4,7 +4,8 @@
 
 ```bash
 yarn install
-# Make sure you have the backend running.
+# Make sure you have the backend running after building with EMBEDASSETS="".
+# Note the frontend is accessible via localhost:4041.
 yarn dev
 ```
 

scripts/webpack/webpack.dev.js

@@ -10,15 +10,24 @@ module.exports = merge(common, {
   devServer: {
     port: 4041,
     historyApiFallback: true,
-    proxy: {
-      '/pyroscope': 'http://localhost:4040',
-      '/querier.v1.QuerierService': 'http://localhost:4040',
-      '/assets/grafana/*': {
+    proxy: [
+      {
+        context: ['/pyroscope'],
+        target: 'http://localhost:4040',
+        changeOrigin: true,
+      },
+      {
+        context: ['/querier.v1.QuerierService'],
+        target: 'http://localhost:4040',
+        changeOrigin: true,
+      },
+      {
+        context: ['/assets/grafana'],
         target: 'http://localhost:4041',
         pathRewrite: { '^/assets': '' },
         logLevel: 'debug',
       },
-    },
+    ],
   },
   optimization: {
     runtimeChunk: 'single',