Add support for dev server

src/server_manager/README.md

@@ -2,11 +2,19 @@
 
 ## Running
 
-To run the Outline Manager:
+To run the Outline Manager Electron app:
 ```
 yarn do server_manager/electron_app/run
 ```
 
+## Development Server
+
+To run the manager as a web app and listen for changes:
+
+```
+yarn workspace outline-manager run webpack-dev-server --config=browser.webpack.js --open
+```
+
 ## Debug an existing binary
 
 You can run an existing binary in debug mode by setting `OUTLINE_DEBUG=true`.

src/server_manager/base.webpack.js

@@ -0,0 +1,96 @@
+// Copyright 2020 The Outline Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+const OUTPUT_BASE = path.resolve(__dirname, '../../build/server_manager/web_app/static');
+
+const GENERATE_CSS_RTL_LOADER = path.resolve(__dirname, 'css-in-js-rtl-loader.js');
+
+exports.makeConfig = (options) => {
+  return {
+    mode: options.defaultMode,
+    entry: [
+      require.resolve('@webcomponents/webcomponentsjs/webcomponents-loader.js'),
+      path.resolve(__dirname, './web_app/ui_components/style.css'),
+      options.main,
+      // path.resolve(__dirname, './web_app/main.ts'),
+    ],
+    target: options.target,
+    devtool: 'inline-source-map',
+    // Run the dev server with `yarn workspace outline-manager run webpack-dev-server --open`
+    devServer: {
+      // contentBase: OUTPUT_BASE,
+      overlay: true,
+    },
+    output: {
+      path: OUTPUT_BASE,
+      filename: 'main.js'
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|ts)$/,
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          }
+        },
+        {
+          test: /\.ts(x)?$/,
+          exclude: /node_modules/,
+          use: [
+            'ts-loader',
+            GENERATE_CSS_RTL_LOADER,
+          ],
+        },
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: GENERATE_CSS_RTL_LOADER,
+        },
+        {
+          test: /\.css?$/,
+          use: [
+            'style-loader',
+            'css-loader',
+          ],
+        }
+      ]
+    },
+    resolve: {extensions: ['.tsx', '.ts', '.js']},
+    plugins: [
+      new webpack.DefinePlugin({
+        // Hack to protect against @sentry/electron not having process.type defined.
+        'process.type': JSON.stringify('renderer'),
+        // Statically link the Roboto font, rather than link to fonts.googleapis.com
+        'window.polymerSkipLoadingFontRoboto': JSON.stringify(true),
+      }),
+      new webpack.IgnorePlugin(/^electron$/),
+      new CopyPlugin(
+          [
+            {from: 'index.html', to: '.'},
+            {from: 'images', to: 'images'},
+            {from: 'messages', to: 'messages'},
+          ],
+          {context: __dirname}),
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, './index.html'),
+      }),
+    ],
+  };
+};

src/server_manager/browser.webpack.js

@@ -0,0 +1,24 @@
+// Copyright 2020 The Outline Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Webpack config to run the Outline Manager on the browser.
+
+const path = require('path');
+const {makeConfig} = require('./base.webpack.js');
+
+module.exports = makeConfig({
+  main: path.resolve(__dirname, './web_app/browser_main.ts'),
+  target: 'web',
+  defaultMode: 'development',
+});

src/server_manager/electron_renderer.webpack.js

@@ -0,0 +1,24 @@
+// Copyright 2020 The Outline Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Webpack config to run the Outline Manager on the browser.
+
+const path = require('path');
+const {makeConfig} = require('./base.webpack.js');
+
+module.exports = makeConfig({
+  main: path.resolve(__dirname, './web_app/main.ts'),
+  target: 'electron-renderer',
+  defaultMode: 'production',
+});

src/server_manager/package.json

@@ -59,11 +59,14 @@
     "The `resolutions` was created by polymer-modulizer. We should check if we still need them."
   ],
   "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
     "@types/node": "~12.0.0",
     "@types/node-forge": "^0.6.9",
     "@types/polymer": "^1.2.9",
     "@types/request": "^2.47.1",
     "@types/semver": "^5.5.0",
+    "babel-loader": "^8.1.0",
     "bower": "^1.8.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.5.3",
@@ -83,7 +86,8 @@
     "style-loader": "^1.2.1",
     "ts-loader": "^7.0.1",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   },
   "prettier": {
     "printWidth": 120,

src/server_manager/web_app/browser_main.ts

@@ -0,0 +1,61 @@
+// Copyright 2020 The Outline Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// tslint:disable-next-line:no-any
+(window as any).whitelistCertificate = (fingerprint: string) => {
+  console.log(`Requested whitelisting of certificate with fingerprint ${fingerprint}`);
+};
+
+// tslint:disable-next-line:no-any
+(window as any).openImage = (basename: string) => {
+  window.open(`./images/${basename})`);
+};
+
+// tslint:disable-next-line:no-any
+(window as any).onUpdateDownloaded = (callback: () => void) => {
+  console.info(`Requested registration of callbak for update download`);
+};
+
+// tslint:disable-next-line:no-any
+(window as any).runDigitalOceanOauth = () => {
+  let isCancelled = false;
+  const rejectWrapper = {reject: (error: Error) => {}};
+  const result = new Promise((resolve, reject) => {
+    rejectWrapper.reject = reject;
+    const apiToken = window.prompt('Please enter your DigitalOcean API token');
+    if (apiToken) {
+      resolve(apiToken);
+    } else {
+      reject(new Error('No api token entered'));
+    }
+  });
+  return {
+    result,
+    isCancelled() {
+      return isCancelled;
+    },
+    cancel() {
+      console.log('Session cancelled');
+      isCancelled = true;
+      rejectWrapper.reject(new Error('Authentication cancelled'));
+    }
+  };
+};
+
+// tslint:disable-next-line:no-any
+(window as any).bringToFront = () => {
+  console.info(`Requested bringToFront`);
+};
+
+import './main';

src/server_manager/web_app/build_action.sh

@@ -39,5 +39,5 @@ readonly STATIC_DIR=$OUT_DIR/static
 mkdir -p $STATIC_DIR
 
 # Notice that we forward the build environment if defined.
-webpack --config=src/server_manager/webpack.config.js ${BUILD_ENV:+--mode=${BUILD_ENV}}
+webpack --config=src/server_manager/electron_renderer.webpack.js ${BUILD_ENV:+--mode=${BUILD_ENV}}
 popd > /dev/null

src/server_manager/web_app/ui_components/app-root.js

@@ -531,7 +531,7 @@ class AppRoot extends mixinBehaviors
   }
 
   setLanguage(newLanguage, langDir) {
-    const messagesUrl = `/messages/${newLanguage}.json`;
+    const messagesUrl = `./messages/${newLanguage}.json`;
     this.loadResources(messagesUrl, newLanguage);
     if (langDir === 'rtl') {
       this.$.appDrawer.align = 'right';

src/server_manager/webpack.config.js

@@ -1,80 +0,0 @@
-// Copyright 2020 The Outline Authors
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-const path = require('path');
-const CopyPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-
-const config = {
-  mode: 'production',
-  entry: [
-    require.resolve('@webcomponents/webcomponentsjs/webcomponents-loader.js'),
-    path.resolve(__dirname, './web_app/ui_components/style.css'),
-    path.resolve(__dirname, './web_app/main.ts'),
-  ],
-  target: 'electron-renderer',
-  devtool: 'inline-source-map',
-  output: {
-    path: path.resolve(__dirname, '../../build/server_manager/web_app/static'),
-    filename: 'main.js'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts(x)?$/,
-        exclude: /node_modules/,
-        use: [
-          'ts-loader',
-          './src/server_manager/css-in-js-rtl-loader',
-        ],
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: [
-          './src/server_manager/css-in-js-rtl-loader',
-        ],
-      },
-      {
-        test: /\.css?$/,
-        use: [
-          'style-loader',
-          'css-loader',
-        ],
-      }
-    ]
-  },
-  resolve: {extensions: ['.tsx', '.ts', '.js']},
-  plugins: [
-    new webpack.DefinePlugin({
-      // Hack to protect against @sentry/electron not having process.type defined.
-      'process.type': JSON.stringify('renderer'),
-      // Statically link the Roboto font, rather than link to fonts.googleapis.com
-      'window.polymerSkipLoadingFontRoboto': JSON.stringify(true),
-    }),
-    new CopyPlugin(
-        [
-          {from: 'index.html', to: '.'},
-          {from: 'images', to: 'images'},
-          {from: 'messages', to: 'messages'},
-        ],
-        {context: __dirname}),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, './index.html'),
-    }),
-  ],
-};
-
-module.exports = config;