Support customizing hot reload feature ports (#66)

temporalio · Jul 8, 2020 · a615d31 · a615d31
1 parent d0b7a81
commit a615d31
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -12,11 +12,13 @@ This web UI is used to view workflows from [Temporalio][temporal], see what's ru
 
 Set these environment variables if you need to change their defaults
 
-| Variable                  | Description                                   | Default           |
-| ------------------------- | --------------------------------------------- | ----------------- |
-| TEMPORAL_GRPC_ENDPOINT    | String representing server gRPC endpoint      | 127.0.0.1:7233    |
-| TEMPORAL_WEB_PORT         | HTTP port to serve on                         | 8088              |
-| TEMPORAL_EXTERNAL_SCRIPTS | Addtional JavaScript tags to serve in the UI  |                   |
+| Variable                      | Description                                    | Default        |
+| ----------------------------- | ---------------------------------------------- | -------------- |
+| TEMPORAL_GRPC_ENDPOINT        | String representing server gRPC endpoint       | 127.0.0.1:7233 |
+| TEMPORAL_WEB_PORT             | HTTP port to serve on                          | 8088           |
+| TEMPORAL_HOT_RELOAD_PORT      | HTTP port used by hot reloading in development | 8081           |
+| TEMPORAL_HOT_RELOAD_TEST_PORT | HTTP port used by hot reloading in tests       | 8082           |
+| TEMPORAL_EXTERNAL_SCRIPTS     | Addtional JavaScript tags to serve in the UI   |                |
 
 ### Running locally
 
@@ -60,7 +62,6 @@ app.use(async function(ctx, next) {
 .listen(7000)
 ```
 
-
 The [webpack](https://webpack.js.org/) configuration is also exported as `webpackConfig`, and can be modified before calling `init()`.
 
 ### Licence

diff --git a/server/index.js b/server/index.js
@@ -1,71 +1,90 @@
-const
-  Koa = require('koa'),
+const Koa = require('koa'),
   bodyparser = require('koa-bodyparser'),
   send = require('koa-send'),
   path = require('path'),
   staticRoot = path.join(__dirname, '../dist'),
   app = new Koa(),
-  router = require('./routes')
+  router = require('./routes');
 
-app.webpackConfig = require('../webpack.config')
+app.webpackConfig = require('../webpack.config');
 
 app.init = function(options) {
-  options = options || {}
+  options = options || {};
 
-  const useWebpack = 'useWebpack' in options ? options.useWebpack : process.env.NODE_ENV !== 'production'
+  const useWebpack =
+    'useWebpack' in options
+      ? options.useWebpack
+      : process.env.NODE_ENV !== 'production';
   if (useWebpack) {
     var Webpack = require('webpack'),
-        koaWebpack = require('koa-webpack'),
-        compiler = Webpack(app.webpackConfig)
+      koaWebpack = require('koa-webpack'),
+      compiler = Webpack(app.webpackConfig);
   }
 
-  app.use(async (ctx, next) => {
-    try {
-      await next()
-    } catch (err) {
-      if (options.logErrors !== false && (typeof err.statusCode !== 'number' || err.statusCode >= 500)) {
-        console.error(err)
-      }
-      ctx.status = err.statusCode || err.status || 500
-      ctx.body = { message: err.message }
-    }
-  })
-  .use(bodyparser())
-  .use(require('koa-compress')({
-    filter: contentType => !contentType.startsWith('text/event-stream')
-  }))
-  .use(useWebpack ?
-    koaWebpack({
-      compiler,
-      dev: { stats: { colors: true } },
-      hot: { port: process.env.TEST_RUN ? 8082 : 8081 }
-    }) :
-    require('koa-static')(staticRoot))
-  .use(router.routes())
-  .use(router.allowedMethods())
-  .use(async function (ctx, next) {
-    if (['HEAD', 'GET'].includes(ctx.method) && !ctx.path.startsWith('/api')) {
-      try {
-        ctx.set('X-Content-Type-Options', 'nosniff')
-        ctx.set('X-Frame-Options', 'SAMEORIGIN')
-        ctx.set('X-XSS-Protection', '1; mode=block')
+  const hotReloadPort = Number(process.env.TEMPORAL_HOT_RELOAD_PORT) || 8081;
+  const hotReloadTestPort =
+    Number(process.env.TEMPORAL_HOT_RELOAD_TEST_PORT) || 8082;
 
-        if (useWebpack) {
-          var filename = path.join(compiler.outputPath, 'index.html')
-          ctx.set('content-type', 'text/html')
-          ctx.body = compiler.outputFileSystem.readFileSync(filename)
-        } else {
-          done = await send(ctx, 'index.html', { root: staticRoot })
-        }
+  app
+    .use(async (ctx, next) => {
+      try {
+        await next();
       } catch (err) {
-        if (err.status !== 404) {
-          throw err
+        if (
+          options.logErrors !== false &&
+          (typeof err.statusCode !== 'number' || err.statusCode >= 500)
+        ) {
+          console.error(err);
+        }
+        ctx.status = err.statusCode || err.status || 500;
+        ctx.body = { message: err.message };
+      }
+    })
+    .use(bodyparser())
+    .use(
+      require('koa-compress')({
+        filter: (contentType) => !contentType.startsWith('text/event-stream'),
+      })
+    )
+    .use(
+      useWebpack
+        ? koaWebpack({
+            compiler,
+            dev: { stats: { colors: true } },
+            hot: {
+              port: process.env.TEST_RUN ? hotReloadTestPort : hotReloadPort,
+            },
+          })
+        : require('koa-static')(staticRoot)
+    )
+    .use(router.routes())
+    .use(router.allowedMethods())
+    .use(async function(ctx, next) {
+      if (
+        ['HEAD', 'GET'].includes(ctx.method) &&
+        !ctx.path.startsWith('/api')
+      ) {
+        try {
+          ctx.set('X-Content-Type-Options', 'nosniff');
+          ctx.set('X-Frame-Options', 'SAMEORIGIN');
+          ctx.set('X-XSS-Protection', '1; mode=block');
+
+          if (useWebpack) {
+            var filename = path.join(compiler.outputPath, 'index.html');
+            ctx.set('content-type', 'text/html');
+            ctx.body = compiler.outputFileSystem.readFileSync(filename);
+          } else {
+            done = await send(ctx, 'index.html', { root: staticRoot });
+          }
+        } catch (err) {
+          if (err.status !== 404) {
+            throw err;
+          }
         }
       }
-    }
-  })
+    });
 
-  return app
-}
+  return app;
+};
 
-module.exports = app
+module.exports = app;