From 2fd8cab6271235bbda028d11af24b31b517f04c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 17 May 2023 09:27:39 +0200 Subject: [PATCH 1/3] 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 --- 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 = {} From 4cebac2306d9d494ab7333af88352c1479687fb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 17 May 2023 09:49:22 +0200 Subject: [PATCH 2/3] chore(webpack): Move to shared code for entrypoints and use webpack serve public path MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- src/init-calendar.js | 2 ++ src/init-collections.js | 5 +---- src/init-dashboard.js | 7 ++----- src/init-reference.js | 2 ++ src/init-talk.js | 5 +---- src/main.js | 8 +------- src/shared-init.js | 12 ++++++++++++ webpack.js | 9 +++++++-- 8 files changed, 28 insertions(+), 22 deletions(-) create mode 100644 src/shared-init.js diff --git a/src/init-calendar.js b/src/init-calendar.js index 51cc96c82..6c603432e 100644 --- a/src/init-calendar.js +++ b/src/init-calendar.js @@ -23,6 +23,8 @@ import { subscribe } from '@nextcloud/event-bus' import { generateUrl } from '@nextcloud/router' +import './shared-init.js' + subscribe('calendar:handle-todo-click', ({ calendarId, taskId }) => { const deckAppPrefix = 'app-generated--deck--board-' if (calendarId.startsWith(deckAppPrefix)) { diff --git a/src/init-collections.js b/src/init-collections.js index f26565ee4..a3f8ddd91 100644 --- a/src/init-collections.js +++ b/src/init-collections.js @@ -26,10 +26,7 @@ import './../css/collections.css' import FileSharingPicker from './views/FileSharingPicker.js' import { buildSelector } from './helpers/selector.js' -// eslint-disable-next-line -__webpack_nonce__ = btoa(OC.requestToken); -// eslint-disable-next-line -__webpack_public_path__ = OC.linkTo('deck', 'js/'); +import './shared-init.js' Vue.prototype.t = t Vue.prototype.n = n diff --git a/src/init-dashboard.js b/src/init-dashboard.js index 18be0c35b..9b579fb91 100644 --- a/src/init-dashboard.js +++ b/src/init-dashboard.js @@ -22,12 +22,9 @@ import './css/dashboard.scss' -const debug = process.env.NODE_ENV !== 'production' +import './shared-init.js' -// eslint-disable-next-line -__webpack_nonce__ = btoa(OC.requestToken); -// eslint-disable-next-line -__webpack_public_path__ = OC.linkTo('deck', 'js/'); +const debug = process.env.NODE_ENV !== 'production' document.addEventListener('DOMContentLoaded', () => { OCA.Dashboard.register('deck', async (el) => { diff --git a/src/init-reference.js b/src/init-reference.js index 08b804742..fa983ebcb 100644 --- a/src/init-reference.js +++ b/src/init-reference.js @@ -28,6 +28,8 @@ import CommentReferenceWidget from './views/CommentReferenceWidget.vue' import { translate, translatePlural } from '@nextcloud/l10n' +import './shared-init.js' + Vue.prototype.t = translate Vue.prototype.n = translatePlural Vue.prototype.OC = window.OC diff --git a/src/init-talk.js b/src/init-talk.js index 943cbe22b..7d798ad97 100644 --- a/src/init-talk.js +++ b/src/init-talk.js @@ -27,10 +27,7 @@ import CardCreateDialog from './CardCreateDialog.vue' import { buildSelector } from './helpers/selector.js' import './init-collections.js' -// eslint-disable-next-line -__webpack_nonce__ = btoa(OC.requestToken); -// eslint-disable-next-line -__webpack_public_path__ = OC.linkTo('deck', 'js/'); +import './shared-init.js' Vue.prototype.t = t Vue.prototype.n = n diff --git a/src/main.js b/src/main.js index 8f519b11e..bfb7d761c 100644 --- a/src/main.js +++ b/src/main.js @@ -25,23 +25,17 @@ import router from './router.js' import store from './store/main.js' import { sync } from 'vuex-router-sync' import { translate, translatePlural } from '@nextcloud/l10n' -import { generateFilePath } from '@nextcloud/router' import { showError } from '@nextcloud/dialogs' import { subscribe } from '@nextcloud/event-bus' import { Tooltip } from '@nextcloud/vue' import ClickOutside from 'vue-click-outside' +import './shared-init.js' import './models/index.js' import './sessions.js' // the server snap.js conflicts with vertical scrolling so we disable it document.body.setAttribute('data-snap-ignore', 'true') -// eslint-disable-next-line -__webpack_nonce__ = btoa(OC.requestToken) -if (!process.env.HOT) { - // eslint-disable-next-line - __webpack_public_path__ = generateFilePath('deck', '', 'js/') -} sync(store, router) Vue.prototype.t = translate diff --git a/src/shared-init.js b/src/shared-init.js new file mode 100644 index 000000000..9752aee3a --- /dev/null +++ b/src/shared-init.js @@ -0,0 +1,12 @@ +import { generateFilePath } from '@nextcloud/router' + +// eslint-disable-next-line +__webpack_nonce__ = btoa(OC.requestToken) + +if (!process.env.WEBPACK_SERVE) { + // eslint-disable-next-line + __webpack_public_path__ = generateFilePath('deck', '', 'js/') +} else { + // eslint-disable-next-line + __webpack_public_path__ = 'http://127.0.0.1:3000/' +} diff --git a/webpack.js b/webpack.js index 83c5e4bde..2b32457bb 100644 --- a/webpack.js +++ b/webpack.js @@ -1,9 +1,9 @@ const webpackConfig = require('@nextcloud/webpack-vue-config') +const webpack = require('webpack') const path = require('path') const buildMode = process.env.NODE_ENV -const isDev = buildMode === 'development' -const isDevServer = process.env.WEBPACK_DEV_SERVER; +const isDevServer = process.env.WEBPACK_SERVE webpackConfig.entry = { ...webpackConfig.entry, @@ -16,6 +16,11 @@ webpackConfig.entry = { if (isDevServer) { webpackConfig.output.publicPath = 'http://127.0.0.1:3000/' + webpackConfig.plugins.push( + new webpack.DefinePlugin({ + 'process.env.WEBPACK_SERVE': true, + }) + ) } else { webpackConfig.stats = { context: path.resolve(__dirname, 'src'), From 4060c7a14a9215a1196dbfad189966065ed3d979 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 17 May 2023 09:51:47 +0200 Subject: [PATCH 3/3] chore(webpack): Remove outdated config for hmr MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- webpack.hot.js | 26 -------------------------- 1 file changed, 26 deletions(-) delete mode 100644 webpack.hot.js diff --git a/webpack.hot.js b/webpack.hot.js deleted file mode 100644 index 5c8e113b7..000000000 --- a/webpack.hot.js +++ /dev/null @@ -1,26 +0,0 @@ -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 - }) - ] -})