client: add client bundler for internal organization. (#27507)

Author: mshima

.blueprint/generate-sample/templates/samples/mf-simple.jdl

@@ -0,0 +1,58 @@
+/*
+ * Microservice stack sample to test compilation and base microfrontend functionality.
+ *
+ * @example
+ * jhipster.cjs generate-sample mf-simple.jdl --client-framework vue
+ */
+
+application {
+  config {
+    applicationType gateway
+    baseName gateway
+    clientFramework angular
+    creationTimestamp 1617901618886
+    databaseType no
+    jwtSecretKey "ZjY4MTM4YjI5YzMwZjhjYjI2OTNkNTRjMWQ5Y2Q0Y2YwOWNmZTE2NzRmYzU3NTMwM2NjOTE3MTllOTM3MWRkMzcyYTljMjVmNmQ0Y2MxOTUzODc0MDhhMTlkMDIxMzI2YzQzZDM2ZDE3MmQ3NjVkODk3OTVmYzljYTQyZDNmMTQ="
+    packageName jhipster.tech.gateway
+    serviceDiscoveryType eureka
+    testFrameworks [cypress]
+    microfrontends [notification]
+  }
+}
+
+application {
+  config {
+    applicationType microservice
+    baseName notification
+    creationTimestamp 1617901618887
+    clientFramework angular
+    jwtSecretKey "ZjY4MTM4YjI5YzMwZjhjYjI2OTNkNTRjMWQ5Y2Q0Y2YwOWNmZTE2NzRmYzU3NTMwM2NjOTE3MTllOTM3MWRkMzcyYTljMjVmNmQ0Y2MxOTUzODc0MDhhMTlkMDIxMzI2YzQzZDM2ZDE3MmQ3NjVkODk3OTVmYzljYTQyZDNmMTQ="
+    packageName jhipster.tech.notification
+    prodDatabaseType postgresql
+    serverPort 8081
+    serviceDiscoveryType eureka
+    testFrameworks [cypress]
+  }
+  entities Notification
+}
+
+@ChangelogDate(20210408164814)
+entity Notification {
+  title String required
+}
+
+deployment {
+  deploymentType docker-compose,
+  appsFolders [gateway, notification]
+  dockerRepositoryName "hipsterslabs"
+  monitoring no
+  serviceDiscoveryType eureka
+}
+
+deployment {
+  deploymentType kubernetes,
+  appsFolders [gateway, notification]
+  dockerRepositoryName "hipsterslabs"
+  monitoring no
+  serviceDiscoveryType eureka
+}

.github/workflows/angular.yml

@@ -144,10 +144,12 @@ jobs:
         run: npm install
         timeout-minutes: 7
       - name: 'TESTS: packaging'
+        id: packaging
         if: steps.compare.outputs.equals != 'true'
         run: npm run ci:e2e:package
         timeout-minutes: 12
       - name: 'TESTS: frontend'
+        id: frontend
         if: steps.compare.outputs.equals != 'true' && matrix.skip-frontend-tests != 'true' && (matrix.sonar-analyse == 'true' || needs.build-matrix.outputs.client != 'false')
         run: npm run ci:frontend:test
         timeout-minutes: 15
@@ -160,6 +162,21 @@ jobs:
         if: steps.compare.outputs.equals != 'true'
         run: npm run ci:e2e:run --if-present
         timeout-minutes: 15
+      - name: Store the application
+        uses: actions/upload-artifact@v4
+        if: always() && (steps.backend.outcome == 'failure' || steps.e2e.outcome == 'failure' || steps.frontend.outcome == 'failure' || steps.packaging.outcome == 'failure')
+        with:
+          name: app-${{ matrix.name }}
+          include-hidden-files: true
+          path: |
+            ${{ github.workspace }}/app/**/*
+            !**/app/build/**
+            !**/app/*/build/**
+            !**/app/.gradle/**
+            !**/app/*/.gradle/**
+            !**/app/target/**
+            !**/app/*/target/**
+            !**/node_modules/**
       - name: 'BACKEND: Store failure logs'
         uses: actions/upload-artifact@v4
         if: always() && steps.backend.outcome == 'failure'

.github/workflows/react.yml

@@ -144,10 +144,12 @@ jobs:
         run: npm install
         timeout-minutes: 7
       - name: 'TESTS: packaging'
+        id: packaging
         if: steps.compare.outputs.equals != 'true'
         run: npm run ci:e2e:package
         timeout-minutes: 12
       - name: 'TESTS: frontend'
+        id: frontend
         if: steps.compare.outputs.equals != 'true' && matrix.skip-frontend-tests != 'true' && needs.build-matrix.outputs.client != 'false'
         run: npm run ci:frontend:test
         timeout-minutes: 15
@@ -160,6 +162,21 @@ jobs:
         if: steps.compare.outputs.equals != 'true'
         run: npm run ci:e2e:run --if-present
         timeout-minutes: 15
+      - name: Store the application
+        uses: actions/upload-artifact@v4
+        if: always() && (steps.backend.outcome == 'failure' || steps.e2e.outcome == 'failure' || steps.frontend.outcome == 'failure' || steps.packaging.outcome == 'failure')
+        with:
+          name: app-${{ matrix.name }}
+          include-hidden-files: true
+          path: |
+            ${{ github.workspace }}/app/**/*
+            !**/app/build/**
+            !**/app/*/build/**
+            !**/app/.gradle/**
+            !**/app/*/.gradle/**
+            !**/app/target/**
+            !**/app/*/target/**
+            !**/node_modules/**
       - name: 'BACKEND: Store failure logs'
         uses: actions/upload-artifact@v4
         if: always() && steps.backend.outcome == 'failure'

.github/workflows/vue.yml

@@ -144,10 +144,12 @@ jobs:
         run: npm install
         timeout-minutes: 7
       - name: 'TESTS: packaging'
+        id: packaging
         if: steps.compare.outputs.equals != 'true'
         run: npm run ci:e2e:package
         timeout-minutes: 12
       - name: 'TESTS: frontend'
+        id: frontend
         if: steps.compare.outputs.equals != 'true' && matrix.skip-frontend-tests != 'true' && needs.build-matrix.outputs.client != 'false'
         run: npm run ci:frontend:test
         timeout-minutes: 15
@@ -160,6 +162,21 @@ jobs:
         if: steps.compare.outputs.equals != 'true'
         run: npm run ci:e2e:run --if-present
         timeout-minutes: 15
+      - name: Store the application
+        uses: actions/upload-artifact@v4
+        if: always() && (steps.backend.outcome == 'failure' || steps.e2e.outcome == 'failure' || steps.frontend.outcome == 'failure' || steps.packaging.outcome == 'failure')
+        with:
+          name: app-${{ matrix.name }}
+          include-hidden-files: true
+          path: |
+            ${{ github.workspace }}/app/**/*
+            !**/app/build/**
+            !**/app/*/build/**
+            !**/app/.gradle/**
+            !**/app/*/.gradle/**
+            !**/app/target/**
+            !**/app/*/target/**
+            !**/node_modules/**
       - name: 'BACKEND: Store failure logs'
         uses: actions/upload-artifact@v4
         if: always() && steps.backend.outcome == 'failure'

generators/app/__snapshots__/generator.spec.ts.snap

@@ -254,6 +254,10 @@ exports[`generator - app with default config should match snapshot 1`] = `
   "capitalizedBaseName": "Jhipster",
   "caret": undefined,
   "cjsExtension": ".cjs",
+  "clientBundler": "webpack",
+  "clientBundlerAny": true,
+  "clientBundlerVite": false,
+  "clientBundlerWebpack": true,
   "clientDistDir": "target/classes/static/",
   "clientFramework": "angular",
   "clientFrameworkAngular": true,
@@ -894,6 +898,10 @@ exports[`generator - app with gateway should match snapshot 1`] = `
   "capitalizedBaseName": "Jhipster",
   "caret": undefined,
   "cjsExtension": ".cjs",
+  "clientBundler": "webpack",
+  "clientBundlerAny": true,
+  "clientBundlerVite": false,
+  "clientBundlerWebpack": true,
   "clientDistDir": "target/classes/static/",
   "clientFramework": "angular",
   "clientFrameworkAngular": true,
@@ -1529,10 +1537,15 @@ exports[`generator - app with microservice should match snapshot 1`] = `
   "capitalizedBaseName": "Jhipster",
   "caret": undefined,
   "cjsExtension": ".cjs",
+  "clientBundler": undefined,
+  "clientBundlerAny": true,
+  "clientBundlerVite": false,
+  "clientBundlerWebpack": false,
   "clientDistDir": "target/classes/static/",
   "clientFramework": "no",
   "clientFrameworkAngular": false,
   "clientFrameworkAny": false,
+  "clientFrameworkBuiltIn": false,
   "clientFrameworkNo": true,
   "clientFrameworkReact": false,
   "clientFrameworkVue": false,

generators/base-core/generator.ts

@@ -259,7 +259,7 @@ export default class CoreGenerator extends YeomanGenerator<JHipsterGeneratorOpti
       enableGradleEnterprise: false,
       pages: [],
     });
-    return configWithDefaults;
+    return configWithDefaults as ApplicationConfiguration;
   }
 
   /**

generators/bootstrap-application-base/generator.ts

@@ -183,6 +183,7 @@ export default class BootstrapApplicationBase extends BaseApplicationGenerator {
 
           backendTypeSpringBoot: ({ backendType }) => backendType === 'Java',
           backendTypeJavaAny: ({ backendTypeSpringBoot }) => backendTypeSpringBoot,
+          clientFrameworkBuiltIn: ({ clientFramework }) => ['angular', 'vue', 'react'].includes(clientFramework),
         });
       },
       userRelationship({ applicationDefaults }) {

generators/client/command.ts

@@ -63,6 +63,28 @@ const command = {
       ],
       scope: 'storage',
     },
+    clientTheme: {
+      cli: {
+        type: String,
+        hide: true,
+      },
+      scope: 'storage',
+    },
+    clientThemeVariant: {
+      cli: {
+        type: String,
+        hide: true,
+      },
+      scope: 'storage',
+    },
+    clientBundler: {
+      cli: {
+        type: String,
+        hide: true,
+      },
+      choices: ['webpack', 'vite'],
+      scope: 'storage',
+    },
     microfrontend: {
       description: 'Enable microfrontend support',
       cli: {

generators/client/generator.ts

@@ -154,7 +154,6 @@ export default class JHipsterClientGenerator extends BaseApplicationGenerator {
 
       prepareForTemplates({ application }) {
         application.webappLoginRegExp = LOGIN_REGEX_JS;
-        application.clientFrameworkBuiltIn = [ANGULAR, VUE, REACT].includes(application.clientFramework);
       },
 
       addExternalResource({ application, source }) {
@@ -244,7 +243,7 @@ export default class JHipsterClientGenerator extends BaseApplicationGenerator {
       },
 
       microfrontend({ application, source }) {
-        if (!application.microfrontend || !application.clientFrameworkBuiltIn) {
+        if (!application.microfrontend || !application.clientFrameworkBuiltIn || !application.clientBundlerWebpack) {
           return;
         }
         if (application.clientFrameworkAngular) {

generators/client/templates/webpack/webpack.microfrontend.js.jhi.ejs

@@ -28,6 +28,7 @@ _&>
 
 const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 <&- fragments.importsSection() &>
+<%_ if (!clientFrameworkVue) { _%>
 const packageJson = require('../package.json');
 // Microfrontend api, should match across gateway and microservices.
 const apiVersion = '0.0.1';
@@ -41,6 +42,7 @@ const shareDependencies = ({ skipList = [] } = {}) =>
       .filter(([dependency]) => !skipList.includes(dependency))
       .map(([dependency, version]) => [dependency, { ...sharedDefaults, version, requiredVersion: version }]),
   );
+<%_ } _%>
 
 module.exports = () => {
   return {
@@ -51,14 +53,20 @@ module.exports = () => {
     },
 <&- fragments.configSection() &>
     plugins: [
-      new ModuleFederationPlugin({
-<%_ if (applicationTypeMicroservice) { _%>
+      new ModuleFederationPlugin(
+<%_ if (clientFrameworkVue) { _%>
+        require('../module-federation.config.cjs'),
+<%_ } else { -%>
+        {
+  <%_ if (applicationTypeMicroservice) { _%>
         name: '<%= lowercaseBaseName %>',
         filename: 'remoteEntry.js',
-<%_ } _%>
+  <%_ } _%>
         shareScope: 'default',
 <&- fragments.moduleFederationSection() &>
-      }),
+      }
+<%_ } -%>
+      ),
 <&- fragments.pluginsSection() &>
     ],
     output: {

generators/gradle/generators/node-gradle/templates/buildSrc/src/main/groovy/jhipster.node-gradle-conventions.gradle.ejs

@@ -66,23 +66,29 @@ task webapp_test(type: NpmTask) {
     inputs.files("tsconfig.json", "tsconfig.app.json")
         .withPropertyName("tsconfig")
         .withPathSensitivity(PathSensitivity.RELATIVE)
-    <%_ if (microfrontend) { _%>
 
-    def webpackDevFiles = fileTree("<%= CLIENT_WEBPACK_DIR %>")
-    webpackDevFiles.exclude("webpack.prod.js")
-    inputs.files(webpackDevFiles)
-        .withPropertyName("webpack-dir")
+    inputs.files(".postcssrc")
+        .withPropertyName("postcssrc")
         .withPathSensitivity(PathSensitivity.RELATIVE)
-    <%_ } else { _%>
+  <%_ } _%>
+  <%_ if (clientBundlerVite && clientFrameworkBuiltIn) { _%>
 
-    inputs.files("vite.config.ts")
+    inputs.files("vite.config.mts")
         .withPropertyName("vite")
         .withPathSensitivity(PathSensitivity.RELATIVE)
+  <%_ } _%>
+  <%_ if (clientFrameworkVue) { _%>
+    <%_ if (clientBundlerWebpack) { _%>
+    def webpackDevFiles = fileTree("<%= CLIENT_WEBPACK_DIR %>")
+    webpackDevFiles.exclude("webpack.prod.js")
+    inputs.files(webpackDevFiles)
+        .withPropertyName("webpack-dir")
     <%_ } _%>
-
-    inputs.files(".postcssrc")
-        .withPropertyName("postcssrc")
+    <%_ if (microfrontend) { _%>
+    inputs.files("module-federation.config.cjs")
+        .withPropertyName("module-federation")
         .withPathSensitivity(PathSensitivity.RELATIVE)
+    <%_ } _%>
   <%_ } _%>
 
     outputs.dir("build/test-results/jest/")

generators/java/generators/bootstrap/command.ts

@@ -50,6 +50,13 @@ const command = {
       scope: 'storage',
       description: 'The package name for the generated application',
     },
+    packageFolder: {
+      cli: {
+        type: String,
+        hide: true,
+      },
+      scope: 'storage',
+    },
   },
   import: [],
 } as const satisfies JHipsterCommandDefinition;

generators/maven/generators/frontend-plugin/generator.ts

@@ -40,6 +40,9 @@ export default class FrontendPluginGenerator extends BaseApplicationGenerator {
           clientFrameworkAngular,
           clientFrameworkReact,
           clientFrameworkVue,
+          clientFrameworkBuiltIn,
+          clientBundlerVite,
+          clientBundlerWebpack,
           microfrontend,
           srcMainWebapp,
         } = application;
@@ -52,15 +55,20 @@ export default class FrontendPluginGenerator extends BaseApplicationGenerator {
           'tsconfig.json',
         ];
         if (clientFrameworkAngular) {
-          checksumIncludedFiles.push('tsconfig.app.json', 'webpack/*.*');
+          checksumIncludedFiles.push('tsconfig.app.json');
         } else if (clientFrameworkReact) {
-          checksumIncludedFiles.push('.postcss.config.js', 'webpack/*.*');
+          checksumIncludedFiles.push('.postcss.config.js');
         } else if (clientFrameworkVue) {
           checksumIncludedFiles.push('.postcssrc.js', 'tsconfig.app.json');
           if (microfrontend) {
+            checksumIncludedFiles.push('module-federation.config.cjs');
+          }
+        }
+        if (clientFrameworkBuiltIn) {
+          if (clientBundlerWebpack) {
             checksumIncludedFiles.push('webpack/*.*');
-          } else {
-            checksumIncludedFiles.push('vite.config.ts');
+          } else if (clientBundlerVite) {
+            checksumIncludedFiles.push('vite.config.mts');
           }
         }
         source.addMavenDefinition!({