chore(web): dev environment (#1489)

web/package.json

@@ -4,6 +4,7 @@
   "repository": "https://github.com/transmission/transmission",
   "license": "MIT",
   "scripts": {
+    "dev": "WEBPACK_MODE=development webpack-dev-server --config webpack.config.js",
     "build": "webpack --config webpack.config.js",
     "css": "sass --no-source-map style/",
     "css:map": "sass style/",
@@ -45,7 +46,8 @@
     "url-loader": "^4.1.0",
     "webpack": "^4.44.2",
     "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "lodash.isequal": "^4.5.0"

web/webpack.config.js

@@ -6,8 +6,10 @@ const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 
 const mode = process.env.WEBPACK_MODE || 'production';
+const devPort = process.env.DEV_PORT || 9000;
+const rpcUrl = process.env.RPC_URL || 'http://localhost:9091/transmission/rpc';
 
-module.exports = {
+const config = {
   devtool: 'source-map',
   entry: './src/main.js',
   mode,
@@ -52,7 +54,7 @@ module.exports = {
   },
   output: {
     filename: 'transmission-app.js' ,
-    path: path.resolve(__dirname, 'public_html'), 
+    path: path.resolve(__dirname, 'public_html'),
     sourceMapFilename: 'transmission-app.js.map'
   },
   plugins: [
@@ -69,3 +71,22 @@ module.exports = {
   },
 };
 
+if (mode === 'development') {
+  config.devServer = {
+    compress: true,
+    contentBase: path.join(__dirname, 'public_html'),
+    historyApiFallback: {
+      rewrites: [
+        { from: '/transmission/web', to: '/' },
+      ]
+    },
+    hot: true,
+    port: devPort,
+    proxy: {
+      '/rpc': rpcUrl
+    }
+  };
+}
+
+module.exports = config;
+