feat: Add support for vite serve

Fixes: #6732

Signed-off-by: Jonas <jonas@freesources.org>

README.md

@@ -40,6 +40,27 @@ Follow its development setup and then continue here.
 3. ✅ Enable the app through the app management of your Nextcloud
 4. 🎉 Partytime! Help fix [some issues](https://github.com/nextcloud/text/issues) and [review pull requests](https://github.com/nextcloud/text/pulls) 👍
 
+### Use hot module replacement via `vite serve`
+
+To use the advantages of `vite serve` with hot module replacement (HMR) and not have to recompile the JS assets after each code change, do the following:
+
+1. Configure your webserver to redirect requests to `/apps.*/text/` to the vite serve server.
+   When using [nextcloud-docker-dev](https://github.com/juliusknorr/nextcloud-docker-dev), add the following snippet to `data/nginx/vhost.d/nextcloud.local` and restart the proxy container:
+   ```
+   location ~* ^/apps.*/text/ {
+       rewrite ^/apps.*/text/(.*) /$1 break;
+       proxy_pass http://host.docker.internal:5173;
+       # fallback to nextcloud server if vite serve doesn't answer
+       error_page 502 = @fallback;
+   }
+   location @fallback {
+       proxy_pass http://nextcloud.local;
+   }
+   ```
+2. Run `npm run serve` to start the vite serve server.
+
+Afterwards all changes to the code will apply to the application in your browser automatically thanks to hot module replacement (HMR).
+
 ### 🧙 Advanced development stuff
 
 To build the Javascript whenever you make changes, instead of the full `make` you can also run `npm run build`. Or run `npm run watch` to rebuild on every file save.

package.json

@@ -19,6 +19,7 @@
   "scripts": {
     "build": "NODE_ENV=production NODE_OPTIONS='--max-old-space-size=4096' vite --mode production build",
     "dev": "NODE_ENV=development NODE_OPTIONS='--max-old-space-size=4096' vite --mode development build",
+    "serve": "NODE_ENV=development vite --mode development serve --host",
     "watch": "NODE_ENV=development NODE_OPTIONS='--max-old-space-size=8192' vite --mode development build --watch",
     "lint": "tsc && eslint --ext .js,.ts,.vue src cypress",
     "lint:fix": "tsc && eslint --ext .js,.ts,.vue src cypress --fix",

vite.config.ts

@@ -4,9 +4,29 @@
 /// <reference types="vitest/config" />
 
 import { createAppConfig } from '@nextcloud/vite-config'
+import type { ViteDevServer, Connect } from 'vite'
 import webpackStats from 'rollup-plugin-webpack-stats'
 import path from 'path'
 
+const rewriteMiddlewarePlugin = {
+	name: 'rewriteAssetsUrl',
+	configureServer(server: ViteDevServer) {
+		server.middlewares.use((req, res, next: Connect.NextFunction): void => {
+			const m = req.url?.match(/^\/js\/text-(.*)\.mjs$/)
+			if (m) {
+				if (m[1] === 'text') {
+					req.url = '/src/main.js'
+				} else if (m[1] === 'editors') {
+					req.url = '/src/editor.js'
+				} else {
+					req.url = `/src/${m[1]}.js`
+				}
+			}
+			next()
+		})
+	}
+}
+
 const config = createAppConfig({
 	text: path.join(__dirname, 'src', 'main.js'),
 	files: path.join(__dirname, 'src', 'files.js'),
@@ -27,6 +47,7 @@ const config = createAppConfig({
 		},
 		plugins: [
 			webpackStats(),
+			rewriteMiddlewarePlugin,
 		],
 		build: {
 			cssCodeSplit: true,