From 9f753e4395eeebfb66a7212f58dfba90b7a24d06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 17 May 2023 09:27:39 +0200
Subject: [PATCH] chore(webpack): Add npm run serve command
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 README.md    |  8 ++++++++
 package.json |  1 +
 webpack.js   | 18 +++++++++++-------
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index a21157af6..835bdb2b7 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,14 @@ To build you will need to have [Node.js](https://nodejs.org/en/) and [Composer](
     - Watch for changes `npm run watch`
     - Production build `npm run build`
 
+### Faster frontend developing with HMR
+
+You can enable HMR (Hot module replacement) to avoid page reloads when working on the frontend:
+
+1. ☑️ Install and enable [`hmr_enabler` app](https://github.com/nextcloud/hmr_enabler)
+2. 🏁 Run `npm run serve`
+3. 🌍 Open the normal Nextcloud server URL (not the URL given by above command)
+
 ### GitHub Codespaces / VS Code devcontainer
 
 - Open code spaces or the repository in VS Code to start the dev container
diff --git a/package.json b/package.json
index 7be5b9c58..9bcc4627a 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"build": "NODE_ENV=production webpack --progress --config webpack.js",
 		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
 		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
+		"serve": "webpack serve --node-env development --allowed-hosts all --config webpack.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"lint:cypress": "eslint --ext .js cypress",
diff --git a/webpack.js b/webpack.js
index 2a7ce762d..83c5e4bde 100644
--- a/webpack.js
+++ b/webpack.js
@@ -3,6 +3,7 @@ const path = require('path')
 
 const buildMode = process.env.NODE_ENV
 const isDev = buildMode === 'development'
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
 
 webpackConfig.entry = {
 	...webpackConfig.entry,
@@ -13,14 +14,17 @@ webpackConfig.entry = {
 	reference: path.join(__dirname, 'src', 'init-reference.js'),
 }
 
-webpackConfig.stats = {
-	context: path.resolve(__dirname, 'src'),
-	assets: true,
-	entrypoints: true,
-	chunks: true,
-	modules: true,
+if (isDevServer) {
+	webpackConfig.output.publicPath = 'http://127.0.0.1:3000/'
+} else {
+	webpackConfig.stats = {
+		context: path.resolve(__dirname, 'src'),
+		assets: true,
+		entrypoints: true,
+		chunks: true,
+		modules: true,
+	}
 }
-
 // Workaround for https://github.com/nextcloud/webpack-vue-config/pull/432 causing problems with nextcloud-vue-collections
 webpackConfig.resolve.alias = {}