Add HMR with webpack-dev-server

Signed-off-by: Julius Härtl <jus@bitgrid.net>

README.md

@@ -56,6 +56,27 @@ Nothing to prepare, just dig into the code.
 
 Deck requires running a `make build-js` to install npm dependencies and build the JavaScript code using webpack. While developing you can also use `make watch` to rebuild everytime the code changes.
 
+#### Hot reloading
+
+Enable debug mode in your config.php `'debug' => true,`
+
+Without SSL:
+```
+npx webpack-dev-server --config webpack.hot.js \
+    --public localhost:3000 \
+    --output-public-path 'http://localhost:3000/js/'
+```
+
+With SSL:
+```
+npx webpack-dev-server --config webpack.dev.js --https \
+	--cert ~/repos/nextcloud/nc-dev/data/ssl/nextcloud.local.crt \
+    --key ~/repos/nextcloud/nc-dev/data/ssl/nextcloud.local.key \
+    --public nextcloud.local:3000 \
+    --output-public-path 'https://nextcloud.local:3000/js/'
+```
+
+
 ### Running tests
 You can use the provided Makefile to run all tests by using:
 

lib/Controller/PageController.php

@@ -25,6 +25,7 @@ namespace OCA\Deck\Controller;
 
 use OCA\Deck\AppInfo\Application;
 use OCA\Deck\Service\PermissionService;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\IInitialStateService;
 use OCP\IRequest;
 use OCP\AppFramework\Http\TemplateResponse;
@@ -64,6 +65,15 @@ class PageController extends Controller {
 		$this->initialState->provideInitialState(Application::APP_ID, 'maxUploadSize', (int)\OCP\Util::uploadLimit());
 		$this->initialState->provideInitialState(Application::APP_ID, 'canCreate', $this->permissionService->canCreate());
 
-		return new TemplateResponse('deck', 'main');
+		$response = new TemplateResponse('deck', 'main');
+
+		if (\OC::$server->getConfig()->getSystemValueBool('debug', false)) {
+			$csp = new ContentSecurityPolicy();
+			$csp->addAllowedConnectDomain('*');
+			$csp->addAllowedScriptDomain('*');
+			$response->setContentSecurityPolicy($csp);
+		}
+
+		return $response;
 	}
 }

package.json

@@ -106,6 +106,7 @@
 		"vue-template-compiler": "^2.6.11",
 		"webpack": "^4.43.0",
 		"webpack-cli": "^3.3.11",
+		"webpack-dev-server": "^3.10.3",
 		"webpack-merge": "^4.2.2"
 	},
 	"jest": {

src/main.js

@@ -35,9 +35,10 @@ document.body.setAttribute('data-snap-ignore', 'true')
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken)
-// eslint-disable-next-line
-__webpack_public_path__ = generateFilePath('deck', '', 'js/')
-
+if (!process.env.HOT) {
+	// eslint-disable-next-line
+	__webpack_public_path__ = generateFilePath('deck', '', 'js/')
+}
 sync(store, router)
 
 Vue.mixin({

webpack.dev.js

@@ -5,7 +5,6 @@ module.exports = merge(common, {
   mode: 'development',
   devServer: {
     historyApiFallback: true,
-    noInfo: true,
     overlay: true
   },
   devtool: 'source-map',

webpack.hot.js

@@ -0,0 +1,26 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const dev = require('./webpack.dev.js');
+
+module.exports = merge(dev, {
+	devServer: {
+		hot: true,
+		port: 3000,
+		/**
+		 * This makes sure the main entrypoint is written to disk so it is
+		 * loaded by Nextcloud though our existing addScript calls
+		 */
+		writeToDisk: (filePath) => {
+			return /deck\.js$/.test(filePath);
+		},
+		headers: {
+			'Access-Control-Allow-Origin': '*'
+		}
+	},
+	plugins: [
+		new webpack.DefinePlugin({
+			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+			'process.env.HOT': true
+		})
+	]
+})