feat: Add support for vite serve

Fixes: #6732

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

README.md

@@ -40,6 +40,26 @@ 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 the server section for `nextcloud.local` at `/etc/nginx/conf.d/default.conf` in the proxy container:
+   ```
+       location /apps/text {
+           proxy_pass http://192.168.15.1:5173/apps/text;
+           # 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": "BASE=${BASE:-/apps/text} 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(/^\/apps\/text\/js\/text-(.*)\.mjs$/)
+			if (m) {
+				if (m[1] === 'text') {
+					req.url = '/apps/text/src/main.js'
+				} else if (m[1] === 'editors') {
+					req.url = '/apps/text/src/editor.js'
+				} else {
+					req.url = `/apps/text/src/${m[1]}.js`
+				}
+			}
+			next()
+		})
+	}
+}
+
 const config = createAppConfig({
 	text: path.join(__dirname, 'src', 'main.js'),
 	files: path.join(__dirname, 'src', 'files.js'),
@@ -17,6 +37,7 @@ const config = createAppConfig({
 }, {
 	createEmptyCSSEntryPoints: true,
 	config: {
+		base: process.env.BASE,
 		resolve: {
 			dedupe: ['vue'],
 		},
@@ -27,6 +48,7 @@ const config = createAppConfig({
 		},
 		plugins: [
 			webpackStats(),
+			rewriteMiddlewarePlugin,
 		],
 		build: {
 			cssCodeSplit: true,