ref(dev): Use webpack proxy in place of devserver.js (#12468)

package.json

@@ -137,7 +137,6 @@
     "lint": "node_modules/.bin/eslint tests/js src/sentry/static/sentry/app --ext .js,.jsx",
     "lint:css": "stylelint 'src/sentry/static/sentry/app/**/*.jsx'",
     "dev": "(yarn check --verify-tree || yarn) && sentry devserver --browser-reload",
-    "dev-proxy": "node scripts/devproxy.js",
     "dev-server": "webpack-dev-server",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook-build": "build-storybook -c .storybook -o .storybook-out && sed -i -e 's/\\/sb_dll/sb_dll/g' .storybook-out/index.html",

scripts/devproxy.js

@@ -1,55 +0,0 @@
-/* eslint-env node */
-/* eslint no-console:0 import/no-nodejs-modules:0 */
-const http = require('http');
-const httpProxy = require('http-proxy');
-
-const WEBPACK_DEV_PORT = process.env.WEBPACK_DEV_PORT;
-const WEBPACK_DEV_PROXY = process.env.WEBPACK_DEV_PROXY;
-const SENTRY_DEVSERVER_PORT = process.env.SENTRY_DEVSERVER_PORT;
-
-if (!WEBPACK_DEV_PORT || !WEBPACK_DEV_PROXY || !SENTRY_DEVSERVER_PORT) {
-  console.error(
-    'Invalid environment variables, requires: WEBPACK_DEV_PORT, WEBPACK_DEV_PROXY, SENTRY_DEVSERVER_PORT'
-  );
-  process.exit(1);
-}
-
-const createProxy = function(proxy, req, res, port, cb) {
-  if (res.headersSent) {
-    return;
-  }
-
-  proxy.web(req, res, {target: 'http://localhost:' + port}, function(e, r) {
-    cb && cb(e, r);
-    if (e) {
-      setTimeout(function() {
-        createProxy(proxy, req, res, port, cb);
-      }, 1000);
-    }
-  });
-};
-
-const proxy = httpProxy.createProxyServer({});
-const server = http.createServer(function(req, res) {
-  try {
-    const matches = req.url.match(/sentry\/dist\/(.*)$/);
-    if (matches && matches.length) {
-      req.url = `/${matches[1]}`;
-      createProxy(proxy, req, res, WEBPACK_DEV_PORT, function(err) {
-        if (err) console.log('webpack server not ready...');
-      });
-    } else {
-      createProxy(proxy, req, res, SENTRY_DEVSERVER_PORT, function(err) {
-        if (err) console.log('sentry server not ready...');
-      });
-    }
-  } catch (err) {
-    console.log('Proxy target not responding');
-  }
-});
-
-server.on('error', function() {
-  console.log('devproxy error', arguments);
-});
-
-server.listen(WEBPACK_DEV_PROXY);

src/sentry/runner/commands/devserver.py

@@ -107,22 +107,27 @@ def devserver(reload, watchers, workers, browser_reload, styleguide, prefix, env
 
     daemons = []
 
-    if watchers and not browser_reload:
+    if watchers:
         daemons += settings.SENTRY_WATCHERS
 
-    # For javascript dev, if browser reload and watchers, then:
-    # devserver listen on PORT + 1
-    # webpack dev server listen on PORT + 2
-    # proxy listen on PORT
+    # When using browser_reload we proxy all requests through webpacks
+    # devserver on the configured port. The backend is served on port+1 and is
+    # proxied via the webpack configuration.
     if watchers and browser_reload:
-        new_port = port + 1
-        os.environ['WEBPACK_DEV_PROXY'] = '%s' % port
-        os.environ['WEBPACK_DEV_PORT'] = '%s' % (new_port + 1)
-        os.environ['SENTRY_DEVSERVER_PORT'] = '%s' % new_port
-        port = new_port
+        proxy_port = port
+        port = port + 1
 
-        daemons += [
-            ('jsproxy', ['yarn', 'dev-proxy']), ('webpack', ['yarn', 'dev-server'])
+        os.environ['SENTRY_WEBPACK_PROXY_PORT'] = '%s' % proxy_port
+        os.environ['SENTRY_BACKEND_PORT'] = '%s' % port
+
+        # Replace the webpack watcher with the drop-in webpack-dev-server
+        webpack_config = next(w for w in daemons if w[0] == 'webpack')[1]
+        webpack_config[0] = os.path.join(
+            *os.path.split(webpack_config[0])[0:-1] + ('webpack-dev-server', )
+        )
+
+        daemons = [w for w in daemons if w[0] != 'webpack'] + [
+            ('webpack', webpack_config),
         ]
 
     if workers:

webpack.config.js

@@ -15,11 +15,14 @@ const {env} = process;
 const IS_PRODUCTION = env.NODE_ENV === 'production';
 const IS_TEST = env.NODE_ENV === 'test' || env.TEST_SUITE;
 const IS_STORYBOOK = env.STORYBOOK_BUILD === '1';
-const WEBPACK_DEV_PORT = env.WEBPACK_DEV_PORT;
-const SENTRY_DEVSERVER_PORT = env.SENTRY_DEVSERVER_PORT;
-const USE_HOT_MODULE_RELOAD = !IS_PRODUCTION && WEBPACK_DEV_PORT && SENTRY_DEVSERVER_PORT;
 const WEBPACK_MODE = IS_PRODUCTION ? 'production' : 'development';
 
+// HMR proxying
+const SENTRY_BACKEND_PORT = env.SENTRY_BACKEND_PORT;
+const SENTRY_WEBPACK_PROXY_PORT = env.SENTRY_WEBPACK_PROXY_PORT;
+const USE_HOT_MODULE_RELOAD =
+  !IS_PRODUCTION && SENTRY_BACKEND_PORT && SENTRY_WEBPACK_PROXY_PORT;
+
 // this is set by setup.py sdist
 const staticPrefix = path.join(__dirname, 'src/sentry/static/sentry');
 const distPath = env.SENTRY_STATIC_DIST_PATH || path.join(staticPrefix, 'dist');
@@ -357,17 +360,22 @@ if (USE_HOT_MODULE_RELOAD) {
     hot: true,
     // If below is false, will reload on errors
     hotOnly: true,
-    port: WEBPACK_DEV_PORT,
+    port: SENTRY_WEBPACK_PROXY_PORT,
     stats: 'errors-only',
     overlay: true,
     watchOptions: {
       ignored: ['node_modules'],
     },
+    publicPath: '/_webpack',
+    proxy: {
+      '!/_webpack': `http://localhost:${SENTRY_BACKEND_PORT}/`,
+    },
+    before: app =>
+      app.use((req, res, next) => {
+        req.url = req.url.replace(/^\/_static\/[^\/]+\/sentry\/dist/, '/_webpack');
+        next();
+      }),
   };
-
-  // Required, without this we get this on updates:
-  // [HMR] Update failed: SyntaxError: Unexpected token < in JSON at position 12
-  appConfig.output.publicPath = `http://localhost:${WEBPACK_DEV_PORT}/`;
 }
 
 const minificationPlugins = [