Main UI mvn build: Various enhancements to improve DX in Eclipse IDE (#3116)

- Do not always clean install, do only so in mvn `clean` phase.
- Built web app directly to mvn target dir.
- Perform all Main UI related executions in the `prepare-package` phase
to allow faster Java code compilation.

This improves the behaviour when using Eclipse IDE, as the M2E plugin
causes a recompilation "loop" due to the Main UI build writing to a mvn
source folder.

---------

Signed-off-by: Florian Hotze <dev@florianhotze.com>

bundles/org.openhab.ui/CONTRIBUTING.md

@@ -16,7 +16,8 @@ Change to the `web` directory, gather the necessary dependencies with `npm insta
 ## NPM Scripts
 
 * `npm start` - run the development server (see below)
-* `npm run build-prod` - build web app for production (note: no need to prepare a production version when submitting a PR, the build server will do it)
+* `npm run build:prod` - build web app for production (note: no need to prepare a production version when submitting a PR, the build server will do it)
+* `npm run build:mvn` - build web app through Maven for production (note: no need to prepare a production version when submitting a PR, the build server will do it)
 * `npm run dev` - run the development server (same as above)
 * `npm run dev:blockly` - run the development server with Blockly source-maps (allows Blockly debugging)
 * `npm run test:unit` - start the Jest test runner and run the unit tests

bundles/org.openhab.ui/pom.xml

@@ -32,6 +32,19 @@
 
   <build>
     <plugins>
+      <!-- Delete web/node_modules in Maven clean goal -->
+      <plugin>
+        <groupId>org.apache.maven.plugins</groupId>
+        <artifactId>maven-clean-plugin</artifactId>
+        <configuration>
+          <filesets>
+            <fileset>
+              <directory>web/node_modules</directory>
+            </fileset>
+          </filesets>
+        </configuration>
+      </plugin>
+      <!-- Build Main UI -->
       <plugin>
         <groupId>com.github.eirslett</groupId>
         <artifactId>frontend-maven-plugin</artifactId>
@@ -42,52 +55,36 @@
           <workingDirectory>web</workingDirectory>
         </configuration>
 
+        <!-- run all executions in the prepare-package phase, to build the UI at the latest possible time and avoid building it when only compiling Java code -->
+        <!-- this helps Eclipse IDE to compile Java code faster -->
         <executions>
           <execution>
             <id>Install node and npm</id>
             <goals>
               <goal>install-node-and-npm</goal>
             </goals>
-            <phase>generate-resources</phase>
+            <phase>prepare-package</phase>
           </execution>
 
           <execution>
-            <id>npm ci</id>
+            <id>npm install</id>
             <goals>
               <goal>npm</goal>
             </goals>
+            <phase>prepare-package</phase>
             <configuration>
-              <arguments>ci</arguments>
+              <arguments>install --save false</arguments>
             </configuration>
           </execution>
 
           <execution>
-            <id>npm run build-prod</id>
+            <id>npm run build:mvn</id>
             <goals>
               <goal>npm</goal>
             </goals>
+            <phase>prepare-package</phase>
             <configuration>
-              <arguments>run build-prod ${project.version}</arguments>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>org.codehaus.mojo</groupId>
-        <artifactId>build-helper-maven-plugin</artifactId>
-        <executions>
-          <execution>
-            <goals>
-              <goal>add-resource</goal>
-            </goals>
-            <phase>generate-resources</phase>
-            <configuration>
-              <resources>
-                <resource>
-                  <directory>web/www</directory>
-                  <targetPath>app</targetPath>
-                </resource>
-              </resources>
+              <arguments>run build:mvn ${project.version}</arguments>
             </configuration>
           </execution>
         </executions>

bundles/org.openhab.ui/web/build/build.js

@@ -10,12 +10,14 @@ const config = require('./webpack.config.js');
 
 const env = process.env.NODE_ENV || 'development';
 const target = process.env.TARGET || 'web';
+const maven = process.env.MAVEN || false;
+const outPath = maven ? '../target/classes/app' : 'www';
 
 const spinner = ora(env === 'production' ? chalk.cyan('Building for production...') : chalk.cyan('Building development version...'));
 spinner.start();
 
 exec(`npm run generate-build-info ${process.argv[2]}`).then(() => {
-  return rm('./www/')
+  return rm(outPath)
 }).then(() => {
   webpack(config, (err, stats) => {
     if (err) throw err;

bundles/org.openhab.ui/web/build/webpack.config.js

@@ -19,6 +19,8 @@ function resolvePath(dir) {
 const env = process.env.NODE_ENV || 'development'
 const target = process.env.TARGET || 'web'
 const buildSourceMaps = process.env.SOURCE_MAPS || false
+const maven = process.env.MAVEN || false
+const outPath = maven ? '../target/classes/app' : 'www'
 
 const apiBaseUrl = process.env.OH_APIBASE || 'http://localhost:8080'
 
@@ -31,7 +33,7 @@ module.exports = {
     './src/js/app.js'
   ],
   output: {
-    path: resolvePath('www'),
+    path: resolvePath(outPath),
     filename: 'js/app.[contenthash].js',
     publicPath: '/',
     hotUpdateChunkFilename: 'hot/[id].[fullhash].hot-update.js',
@@ -263,15 +265,15 @@ module.exports = {
       patterns: [
         {
           from: resolvePath('src/res'),
-          to: resolvePath('www/res')
+          to: resolvePath(`${outPath}/res`)
         },
         {
           from: resolvePath('src/manifest.json'),
-          to: resolvePath('www/manifest.json')
+          to: resolvePath(`${outPath}/manifest.json`)
         },
         {
           from: resolvePath('src/robots.txt'),
-          to: resolvePath('www/robots.txt')
+          to: resolvePath(`${outPath}/robots.txt`)
         }
       ]
     }),

bundles/org.openhab.ui/web/package.json

@@ -24,7 +24,8 @@
   },
   "scripts": {
     "generate-build-info": "node build/generate-build-info.mjs",
-    "build-prod": "cross-env NODE_ENV=production node ./build/build.js",
+    "build:prod": "cross-env NODE_ENV=production node ./build/build.js",
+    "build:mvn": "cross-env NODE_ENV=production cross-env MAVEN=true node ./build/build.js",
     "webpack-analyzer": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 node ./build/build.js",
     "webpack-analyzer-report": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 WEBPACK_ANALYZER_REPORT=1 node ./build/build.js",
     "webpack-analyzer-report-stats": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 WEBPACK_ANALYZER_REPORT=1 WEBPACK_ANALYZER_REPORT_STATS=1 node ./build/build.js",