GUACAMOLE-773: Migrate to NPM for AngularJS portion of webapp build.

guacamole/.ratignore

@@ -0,0 +1,2 @@
+src/main/frontend/dist/**/*
+src/main/frontend/generated/**/*

guacamole/pom.xml

@@ -80,9 +80,18 @@
 
                     <webResources>
 
-                        <!-- Filter translation strings -->
+                        <!-- Add frontend folder to war package ... -->
                         <resource>
-                            <directory>src/main/webapp</directory>
+                            <directory>src/main/frontend/dist</directory>
+                            <excludes>
+                                <exclude>translations/*.json</exclude>
+                                <exclude>index.html</exclude>
+                            </excludes>
+                        </resource>
+
+                        <!-- ... but filter index.html and translation strings -->
+                        <resource>
+                            <directory>src/main/frontend/dist</directory>
                             <filtering>true</filtering>
                             <includes>
                                 <include>translations/*.json</include>
@@ -119,81 +128,43 @@
                 </executions>
             </plugin>
 
-            <!-- Pre-cache Angular templates with maven-angular-plugin -->
+            <!-- Build AngularJS portion of application using NPM -->
             <plugin>
-                <groupId>com.keithbranton.mojo</groupId>
+                <groupId>com.github.eirslett</groupId>
-                <artifactId>angular-maven-plugin</artifactId>
+                <artifactId>frontend-maven-plugin</artifactId>
-                <version>0.3.4</version>
+                <version>1.6</version>
+                <configuration>
+                    <workingDirectory>src/main/frontend</workingDirectory>
+                    <installDirectory>${project.build.directory}</installDirectory>
+                </configuration>
                 <executions>
                     <execution>
+                        <id>install-node-and-npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                        </goals>
+                        <configuration>
+                            <nodeVersion>v14.16.0</nodeVersion>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm-ci</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>ci</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm-build</id>
                         <phase>generate-resources</phase>
                         <goals>
-                            <goal>html2js</goal>
+                            <goal>npm</goal>
                         </goals>
-                    </execution>
-                </executions>
                         <configuration>
-                    <sourceDir>${basedir}/src/main/webapp/app/</sourceDir>
+                            <arguments>run build</arguments>
-                    <include>**/*.html</include>
-                    <target>${basedir}/src/main/webapp/generated/templates-main/templates.js</target>
-                    <prefix>app</prefix>
                         </configuration>
-            </plugin>
-
-            <!-- JS/CSS Minification Plugin -->
-            <plugin>
-                <groupId>com.github.buckelieg</groupId>
-                <artifactId>minify-maven-plugin</artifactId>
-                <executions>
-                    <execution>
-                        <id>default-cli</id>
-                        <configuration>
-                            <charset>UTF-8</charset>
-
-                            <webappSourceDir>${project.build.directory}/${project.build.finalName}</webappSourceDir>
-
-                            <cssSourceDir>/</cssSourceDir>
-                            <cssTargetDir>/</cssTargetDir>
-                            <cssFinalFile>guacamole.css</cssFinalFile>
-
-                            <cssSourceFiles>
-                                <cssSourceFile>license.txt</cssSourceFile>
-                            </cssSourceFiles>
-                            
-                            <cssSourceIncludes>
-                                <cssSourceInclude>app/**/*.css</cssSourceInclude>
-                            </cssSourceIncludes>
-
-                            <jsSourceDir>/</jsSourceDir>
-                            <jsTargetDir>/</jsTargetDir>
-                            <jsFinalFile>guacamole.js</jsFinalFile>
-                            
-                            <jsSourceFiles>
-                                <jsSourceFile>license.txt</jsSourceFile>
-                                <jsSourceFile>guacamole-common-js/all.js</jsSourceFile>
-                            </jsSourceFiles>
-
-                            <jsSourceIncludes>
-                                <jsSourceInclude>app/**/*.js</jsSourceInclude>
-                                <jsSourceInclude>generated/**/*.js</jsSourceInclude>
-                            </jsSourceIncludes>
-
-                            <!-- Do not minify and include tests -->
-                            <jsSourceExcludes>
-                                <jsSourceExclude>**/*.test.js</jsSourceExclude>
-                            </jsSourceExcludes>
-                            <jsEngine>CLOSURE</jsEngine>
-
-                            <!-- Disable warnings for JSDoc annotations -->
-                            <closureWarningLevels>
-                                <misplacedTypeAnnotation>OFF</misplacedTypeAnnotation>
-                                <nonStandardJsDocs>OFF</nonStandardJsDocs>
-                            </closureWarningLevels>
-
-                        </configuration>
-                        <goals>
-                            <goal>minify</goal>
-                        </goals>
                     </execution>
                 </executions>
             </plugin>
@@ -249,117 +220,6 @@
             <scope>runtime</scope>
         </dependency>
 
-        <!-- WebJars servlet (for serving org.webjars.* resources) -->
-        <dependency>
-            <groupId>org.webjars</groupId>
-            <artifactId>webjars-servlet-2.x</artifactId>
-            <version>1.5</version>
-        </dependency>
-
-        <!-- Polyfills for the Blob and FileSaver APIs -->
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>blob-polyfill</artifactId>
-            <version>1.0.20150320</version>
-            <scope>runtime</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>filesaver</artifactId>
-            <version>1.3.3</version>
-            <scope>runtime</scope>
-        </dependency>
-
-        <!-- Lodash -->
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>lodash</artifactId>
-            <version>4.17.10</version>
-            <scope>runtime</scope>
-        </dependency>
-
-        <!-- jQuery -->
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>jquery</artifactId>
-            <version>3.3.1</version>
-            <scope>runtime</scope>
-        </dependency>
-
-        <!-- AngularJS -->
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>angular</artifactId>
-            <version>1.6.9</version>
-            <scope>runtime</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>angular-route</artifactId>
-            <version>1.6.9</version>
-            <scope>runtime</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>angular-touch</artifactId>
-            <version>1.6.9</version>
-            <scope>runtime</scope>
-        </dependency>
-
-        <!-- Shim allowing arbitrary retrieval/creation order for AngularJS modules -->
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>angular-module-shim</artifactId>
-            <version>0.0.4</version>
-            <scope>runtime</scope>
-            <exclusions>
-                <exclusion>
-                    <groupId>org.webjars.bower</groupId>
-                    <artifactId>angular</artifactId>
-                </exclusion>
-            </exclusions>
-        </dependency>
-
-        <!-- Translation support for AngularJS -->
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>angular-translate</artifactId>
-            <version>2.16.0</version>
-            <scope>runtime</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>angular-translate-interpolation-messageformat</artifactId>
-            <version>2.16.0</version>
-            <scope>runtime</scope>
-            <exclusions>
-                <exclusion>
-                    <groupId>org.webjars.bower</groupId>
-                    <artifactId>messageformat</artifactId>
-                </exclusion>
-            </exclusions>
-        </dependency>
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>messageformat</artifactId>
-            <version>1.0.2</version>
-            <scope>runtime</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.webjars.bower</groupId>
-            <artifactId>angular-translate-loader-static-files</artifactId>
-            <version>2.16.0</version>
-            <scope>runtime</scope>
-        </dependency>
-
-        <!-- Polyfill for <datalist> element support -->
-        <dependency>
-            <groupId>org.webjars.npm</groupId>
-            <artifactId>datalist-polyfill</artifactId>
-            <version>1.14.0</version>
-            <scope>runtime</scope>
-        </dependency>
-
         <!-- Jetty 8 servlet API (websocket)  -->
         <dependency>
             <groupId>org.eclipse.jetty</groupId>
@@ -474,20 +334,6 @@
             <artifactId>guava</artifactId>
         </dependency>
 
-        <!-- JSTZ for TimeZone Detection -->
-        <dependency>
-            <groupId>org.webjars.npm</groupId>
-            <artifactId>jstz</artifactId>
-            <version>1.0.10</version>
-        </dependency>
-
-        <!-- Pickr (JavaScript color picker) -->
-        <dependency>
-            <groupId>org.webjars.npm</groupId>
-            <artifactId>simonwep__pickr</artifactId>
-            <version>1.2.6</version>
-        </dependency>
-
     </dependencies>
 
 </project>

guacamole/src/main/frontend/.gitignore

@@ -0,0 +1,4 @@
+*~
+node_modules
+dist
+generated

guacamole/src/main/frontend/externs.js

@@ -16,3 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+/**
+ * @fileoverview External APIs referenced by the source of the Guacamole webapp
+ * and its dependencies.
+ * @externs
+ */
+
+// guacamole-common-js
+const Guacamole = {};
+
+// Web Storage API
+const localStorage = {};
+
+// matchMedia() function of Window object
+const matchMedia = function matchMedia(str) {}
+

guacamole/src/main/frontend/gulpfile.js

@@ -0,0 +1,105 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const angularFilesort = require('gulp-angular-filesort');
+const cleanCss = require('gulp-clean-css');
+const concat = require('gulp-concat');
+const del = require('del');
+const gulp = require('gulp');
+const ngHtml2Js = require("gulp-ng-html2js");
+const sourcemaps = require('gulp-sourcemaps');
+const webpack = require('webpack-stream');
+
+// Clean build files
+gulp.task('clean', (callback) => del([
+    'dist',
+    'generated'
+], callback));
+
+// Build monolithic, minified CSS source
+gulp.task('build-css',
+    () => gulp.src([
+            'node_modules/@simonwep/pickr/dist/themes/monolith.min.css',
+            'src/app/**/*.css'
+        ])
+        .pipe(sourcemaps.init())
+        .pipe(concat('guacamole.min.css'))
+        .pipe(cleanCss())
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest('dist'))
+);
+
+// Pre-cache AngularJS templates
+gulp.task('build-template-js',
+    () => gulp.src('src/app/**/*.html')
+        .pipe(ngHtml2Js({
+            moduleName: 'templates-main',
+            prefix: 'app/'
+        }))
+        .pipe(concat('templates.js'))
+        .pipe(gulp.dest('generated'))
+);
+
+// Build monolithic combined JavaScript source containing all pre-cached
+// templates and all AngularJS module declarations in the proper order
+gulp.task('build-combined-js',
+    () => gulp.src([
+            'src/app/**/*.js',
+            'generated/templates.js'
+        ])
+        .pipe(angularFilesort())
+        .pipe(sourcemaps.init())
+        .pipe(concat('guacamole.js'))
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest('generated'))
+);
+
+// Process monolithic JavaScript source through WebPack to produce a bundle
+// that contains all required dependencies
+gulp.task('build-webpack-bundle',
+    () => gulp.src('generated/guacamole.js')
+        .pipe(webpack(require('./webpack.config.js')))
+        .pipe(gulp.dest('dist'))
+);
+
+// Build all JavaScript for the entire application
+gulp.task('build-js',  gulp.series(
+    'build-template-js',
+    'build-combined-js',
+    'build-webpack-bundle'
+));
+
+// Copy plain, static contents of application
+gulp.task('copy-static',
+    () => gulp.src([
+        'src/relocateParameters.js',
+        'src/index.html',
+        'src/fonts/**/*',
+        'src/images/**/*',
+        'src/layouts/**/*',
+        'src/translations/**/*'
+    ], { base: './src' })
+    .pipe(gulp.dest('dist'))
+);
+
+gulp.task('default', gulp.series(
+    'clean',
+    gulp.parallel('build-css', 'build-js', 'copy-static')
+));
+

guacamole/src/main/frontend/package.json

@@ -0,0 +1,36 @@
+{
+    "private": true,
+    "scripts": {
+        "build": "gulp"
+    },
+    "dependencies": {
+        "@simonwep/pickr": "1.2.6",
+        "angular": "1.6.9",
+        "angular-route": "1.6.9",
+        "angular-touch": "1.6.9",
+        "angular-translate": "2.16.0",
+        "angular-translate-interpolation-messageformat": "2.16.0",
+        "angular-translate-loader-static-files": "2.16.0",
+        "blob-polyfill": "1.0.20150320",
+        "datalist-polyfill": "1.14.0",
+        "file-saver": "1.3.3",
+        "jquery": "3.3.1",
+        "jstz": "1.0.10",
+        "lodash": "4.17.10",
+        "messageformat": "1.0.2"
+    },
+    "devDependencies": {
+        "closure-webpack-plugin": "^2.5.0",
+        "del": "^6.0.0",
+        "google-closure-compiler": "^20210302.0.0",
+        "gulp": "^4.0.2",
+        "gulp-angular-filesort": "^1.2.1",
+        "gulp-clean-css": "^4.3.0",
+        "gulp-concat": "^2.6.1",
+        "gulp-ng-html2js": "^0.2.3",
+        "gulp-sourcemaps": "^3.0.0",
+        "source-map-loader": "^1.1.3",
+        "webpack": "^4.46.0",
+        "webpack-stream": "^6.1.2"
+    }
+}