From 5fe8c9ea4f75ac762afa8e2344009d8c9b36bdab Mon Sep 17 00:00:00 2001 From: Jonas Date: Tue, 10 Dec 2024 12:50:07 +0100 Subject: [PATCH 1/2] feat: Add support for `vite serve` Fixes: #6732 Signed-off-by: Jonas --- README.md | 20 ++++++++++++++++++++ package.json | 1 + vite.config.ts | 22 ++++++++++++++++++++++ 3 files changed, 43 insertions(+) diff --git a/README.md b/README.md index 09de77747ca..93fe6920151 100644 --- a/README.md +++ b/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 `data/nginx/vhost.d/nextcloud.local` and restart the proxy container. You might have to replace `/apps/text` with e.g. `/apps-extra/text` depending on where the text app resides in your dev setup. + ``` + location /apps/text/ { + proxy_pass http://host.docker.internal: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. If text resides somewhere else than `/apps/text`, run e.g. `BASE=/apps-extra/text npm run serve`. + +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. diff --git a/package.json b/package.json index e64fa823ab5..e0e2365519d 100644 --- a/package.json +++ b/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", diff --git a/vite.config.ts b/vite.config.ts index f48fd0fc065..3be3003a840 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,9 +4,29 @@ /// 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 = req.url?.replace(/\/js\/text-.*.mjs/, '/src/main.js') + } else if (m[1] === 'editors') { + req.url = req.url?.replace(/\/js\/text-.*.mjs/, '/src/editors.js') + } else { + req.url = req.url?.replace(/\/js\/text-.*.mjs/, `/src/${m[1]}.js`) + } + } + next() + }) + } +} + const config = createAppConfig({ text: path.join(__dirname, 'src', 'main.js'), files: path.join(__dirname, 'src', 'files.js'), @@ -19,6 +39,7 @@ const config = createAppConfig({ extractLicenseInformation: true, thirdPartyLicense: false, config: { + base: process.env.BASE, resolve: { dedupe: ['vue'], }, @@ -29,6 +50,7 @@ const config = createAppConfig({ }, plugins: [ webpackStats(), + rewriteMiddlewarePlugin, ], build: { cssCodeSplit: true, From 1ba2f4b9f393d3a3e5bd8cb291a79f0095e64ded Mon Sep 17 00:00:00 2001 From: Jonas Date: Wed, 11 Dec 2024 13:44:53 +0100 Subject: [PATCH 2/2] chore: Rename JS asset from `text-editors.mjs` to `text-editor.js` Use the same filename for source file and compiled asset. Signed-off-by: Jonas --- lib/Listeners/LoadEditorListener.php | 4 ++-- vite.config.ts | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/Listeners/LoadEditorListener.php b/lib/Listeners/LoadEditorListener.php index 9f4dd3365e0..e8c67063536 100644 --- a/lib/Listeners/LoadEditorListener.php +++ b/lib/Listeners/LoadEditorListener.php @@ -34,7 +34,7 @@ public function handle(Event $event): void { $this->eventDispatcher->dispatchTyped(new RenderReferenceEvent()); $this->initialStateProvider->provideState(); - Util::addScript('text', 'text-editors'); - Util::addStyle('text', 'text-editors'); + Util::addScript('text', 'text-editor'); + Util::addStyle('text', 'text-editor'); } } diff --git a/vite.config.ts b/vite.config.ts index 3be3003a840..7ea2d237d25 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -16,8 +16,6 @@ const rewriteMiddlewarePlugin = { if (m) { if (m[1] === 'text') { req.url = req.url?.replace(/\/js\/text-.*.mjs/, '/src/main.js') - } else if (m[1] === 'editors') { - req.url = req.url?.replace(/\/js\/text-.*.mjs/, '/src/editors.js') } else { req.url = req.url?.replace(/\/js\/text-.*.mjs/, `/src/${m[1]}.js`) } @@ -32,7 +30,7 @@ const config = createAppConfig({ files: path.join(__dirname, 'src', 'files.js'), public: path.join(__dirname, 'src', 'public.js'), viewer: path.join(__dirname, 'src', 'viewer.js'), - editors: path.join(__dirname, 'src', 'editor.js'), + editor: path.join(__dirname, 'src', 'editor.js'), init: path.join(__dirname, 'src', 'init.js'), }, { createEmptyCSSEntryPoints: true,