From 94e323003800bad35fa9dcbc2dfbc0967c0a147f Mon Sep 17 00:00:00 2001 From: bartbutenaers Date: Wed, 8 May 2024 06:45:56 +0200 Subject: [PATCH 1/4] skip minification in dev mode --- vite.config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/vite.config.js b/vite.config.js index ed5d53709..edaa71904 100644 --- a/vite.config.js +++ b/vite.config.js @@ -36,6 +36,8 @@ export default defineConfig({ ], root: 'ui', build: { + // Skip minification in dev mode + minify: process.env.NODE_ENV !== 'development', outDir: '../dist', emptyOutDir: true }, From 125bb3f057efd9f88b4b23098cbccc17e7b5f7d3 Mon Sep 17 00:00:00 2001 From: bartbutenaers Date: Wed, 8 May 2024 06:52:05 +0200 Subject: [PATCH 2/4] skip modification during development --- docs/contributing/widgets/third-party.md | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/contributing/widgets/third-party.md b/docs/contributing/widgets/third-party.md index 8b537f818..bb9797fcb 100644 --- a/docs/contributing/widgets/third-party.md +++ b/docs/contributing/widgets/third-party.md @@ -56,15 +56,19 @@ To start working with your own third-party widget, locally on your machine: 1. Install Node-RED 2. Install `@flowfuse/node-red-dashboard` into Node-RED via the "Manage Palette" option. -2. Fork our [Example Node repository](https://github.com/FlowFuse/node-red-dashboard-example-node) and clone it locally to your machine. -3. Navigate to your local Node-RED directory and install the local copy of the Example Node: -```bash -npm install /path/to/your/local/node-red-dashboard-example-node -``` -4. Inside the Example Node directory, build the Example Node's `.umd.js` file, this will generate it's `/resources` folder, loaded by Node-RED. -```bash -npm run build -``` +3. Fork our [Example Node repository](https://github.com/FlowFuse/node-red-dashboard-example-node) and clone it locally to your machine. +4. Navigate to your local Node-RED directory and install the local copy of the Example Node: + ```bash + npm install /path/to/your/local/node-red-dashboard-example-node + ``` +5. Optionally skip minification of the code, to simplify debugging of the frontend code in the browser. On Linux this can be achieved by: + ```bash + export NODE_ENV=development + ``` +6. Inside the Example Node directory, build the Example Node's `.umd.js` file, this will generate it's `/resources` folder, loaded by Node-RED. + ```bash + npm run build + ``` _Note: Any local changes you make inside the `/ui` folder of the third party widget, you'll need to re-run `npm run build` in order to update the `umd.js` file, which is what Dashboard loads to render the widget._ From 76c480892170331d4bbbb83b3e614eab29c9c834 Mon Sep 17 00:00:00 2001 From: bartbutenaers Date: Thu, 9 May 2024 11:54:37 +0200 Subject: [PATCH 3/4] Source map in dev mode --- vite.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vite.config.js b/vite.config.js index edaa71904..e2a062676 100644 --- a/vite.config.js +++ b/vite.config.js @@ -36,8 +36,8 @@ export default defineConfig({ ], root: 'ui', build: { - // Skip minification in dev mode - minify: process.env.NODE_ENV !== 'development', + // Generate a source map in dev mode + sourcemap: process.env.NODE_ENV === 'development', outDir: '../dist', emptyOutDir: true }, From 3a9c679240d56649554b56940a001d88ec1d1e79 Mon Sep 17 00:00:00 2001 From: bartbutenaers Date: Thu, 9 May 2024 12:01:46 +0200 Subject: [PATCH 4/4] Source map doc --- docs/contributing/widgets/third-party.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contributing/widgets/third-party.md b/docs/contributing/widgets/third-party.md index bb9797fcb..0e72cd9fd 100644 --- a/docs/contributing/widgets/third-party.md +++ b/docs/contributing/widgets/third-party.md @@ -61,7 +61,7 @@ To start working with your own third-party widget, locally on your machine: ```bash npm install /path/to/your/local/node-red-dashboard-example-node ``` -5. Optionally skip minification of the code, to simplify debugging of the frontend code in the browser. On Linux this can be achieved by: +5. Optionally generate a source map (to map the minified code to the original code), to simplify debugging of the frontend code in the browser. On Linux this can be achieved by: ```bash export NODE_ENV=development ```