Use one template for client common files

Removes also unused *.css from Vue.
And Vue 404.html is not using redundant shortcut in link any more as Angular and React are not using.
For index.html this PR:
* applies the following fixes also for Vue: jhipster#8124, jhipster#10106, jhipster#11817
* uses buildTool variable instead of hardcoded mvnw
* removes redundant div with classes lds-css (not existing) and ng-scope (old AngularJS relict) also from Angular and React

generators/client/files-angular.js

@@ -50,19 +50,6 @@ const files = {
       templates: ['content/scss/_bootstrap-variables.scss', 'content/scss/global.scss', 'content/scss/vendor.scss'],
     },
   ],
-  commonWeb: [
-    {
-      path: CLIENT_MAIN_SRC_DIR,
-      templates: [
-        'WEB-INF/web.xml',
-        { file: 'favicon.ico', method: 'copy' },
-        'robots.txt',
-        '404.html',
-        'index.html',
-        'content/css/loading.css',
-      ],
-    },
-  ],
   angularApp: [
     {
       path: CLIENT_MAIN_SRC_DIR,

generators/client/files-common.js

@@ -53,6 +53,12 @@ const commonFiles = {
         { file: 'content/images/jhipster_family_member_3_head-384.png', method: 'copy' },
         { file: 'content/images/jhipster_family_member_3_head-512.png', method: 'copy' },
         { file: 'content/images/logo-jhipster.png', method: 'copy' },
+        { file: 'favicon.ico', method: 'copy' },
+        'content/css/loading.css',
+        'WEB-INF/web.xml',
+        'robots.txt',
+        '404.html',
+        'index.html',
       ],
     },
     {

generators/client/files-react.js

@@ -51,19 +51,6 @@ const files = {
       templates: ['postcss.config.js'],
     },
   ],
-  commonWeb: [
-    {
-      path: CLIENT_MAIN_SRC_DIR,
-      templates: [
-        'WEB-INF/web.xml',
-        { file: 'favicon.ico', method: 'copy' },
-        'robots.txt',
-        '404.html',
-        'index.html',
-        'content/css/loading.css',
-      ],
-    },
-  ],
   reactApp: [
     {
       path: REACT_DIR,

generators/client/files-vue.js

@@ -51,24 +51,12 @@ const vueFiles = {
       templates: ['tsconfig.e2e.json'],
     },
   ],
-  css: [
-    {
-      path: CLIENT_MAIN_SRC_DIR,
-      templates: ['content/css/loading.css'],
-    },
-  ],
   sass: [
     {
       path: CLIENT_MAIN_SRC_DIR,
       templates: ['content/scss/_bootstrap-variables.scss', 'content/scss/global.scss', 'content/scss/vendor.scss'],
     },
   ],
-  commonWeb: [
-    {
-      path: CLIENT_MAIN_SRC_DIR,
-      templates: ['WEB-INF/web.xml', { file: 'favicon.ico', method: 'copy' }, 'robots.txt', '404.html', 'index.html'],
-    },
-  ],
   vueApp: [
     {
       path: VUE_DIR,

generators/client/index.js

@@ -85,6 +85,7 @@ module.exports = class JHipsterClientGenerator extends BaseBlueprintGenerator {
         // Make constants available in templates
         this.LOGIN_REGEX = constants.LOGIN_REGEX_JS;
         this.ANGULAR = ANGULAR;
+        this.REACT = REACT;
         this.VUE = VUE;
         this.HUSKY_VERSION = constants.HUSKY_VERSION;
         this.LINT_STAGED_VERSION = constants.LINT_STAGED_VERSION;

generators/client/templates/angular/src/main/webapp/index.html.ejs → generators/client/templates/common/src/main/webapp/index.html.ejs

@@ -28,7 +28,9 @@
     <%_ } _%>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
+    <%_ if (clientFramework === ANGULAR) { _%>
     <base href="/" />
+    <%_ } _%>
     <link rel="icon" href="favicon.ico" />
     <link rel="manifest" href="manifest.webapp" />
     <link rel="stylesheet" href="content/css/loading.css" />
@@ -40,13 +42,15 @@
         You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
       </p>
     <![endif]-->
+    <%_ if (clientFramework === ANGULAR) { _%>
     <<%= jhiPrefixDashed %>-main>
+    <%_ } else { _%>
+    <div id="<% if (clientFramework === REACT) { %>root<% } else { %>app<% } %>">
+    <%_ } _%>
       <div class="app-loading">
-        <div class="lds-css ng-scope">
-          <div class="lds-pacman">
-            <div><div></div><div></div><div></div></div>
-            <div><div></div><div></div><div></div></div>
-          </div>
+        <div class="lds-pacman">
+          <div><div></div><div></div><div></div></div>
+          <div><div></div><div></div><div></div></div>
         </div>
       </div>
       <div class="app-loading">
@@ -90,12 +94,16 @@
           <!-- end of troubleshooting content -->
         </div>
       </div>
+    <%_ if (clientFramework === ANGULAR) { _%>
     </<%= jhiPrefixDashed %>-main>
+    <%_ } else { _%>
+    </div>
+    <%_ } _%>
     <noscript>
       <h1>You must enable JavaScript to view this page.</h1>
     </noscript>
     <script type="text/javascript">
-      // show an error message if the app loading takes more than 5 sec
+      // show an error message if the app loading takes more than 4 sec
       window.onload = function () {
         setTimeout(showError, 4000);
       };
@@ -106,6 +114,19 @@
         }
       }
     </script>
+    <%_ if (clientFramework !== ANGULAR) { _%>
+    <!-- uncomment this for adding service worker
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function() {
+          navigator.serviceWorker.register('/service-worker.js')
+            .then(function () {
+              console.log('Service Worker Registered');
+            });
+        });
+      }
+    </script>
+    <%_ } _%>
     <!-- Google Analytics: uncomment and change UA-XXXXX-X to be your site's ID.
     <script>
       (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=