Merge pull request #17128 from mshima/skip_ci-microfrontend

Improvements to microfrontend support.

cli/import-jdl.js

@@ -433,8 +433,8 @@ class JDLProcessor {
         applicationWithEntities.config.applications = Object.fromEntries(
           relatedApplications.map(([baseName, config]) => {
             config.gatewayServerPort = gatewayServerPort;
-            const { serverPort, applicationIndex, devServerPort } = config;
-            return [baseName, { serverPort, applicationIndex, devServerPort }];
+            const { clientFramework, serverPort, applicationIndex, devServerPort } = config;
+            return [baseName, { clientFramework, serverPort, applicationIndex, devServerPort }];
           })
         );
       }

generators/app/index.js

@@ -373,7 +373,7 @@ module.exports = class JHipsterAppGenerator extends BaseBlueprintGenerator {
 
         this.configOptions.logo = false;
         if (this.jhipsterConfig.applicationType === MICROSERVICE) {
-          this.jhipsterConfig.skipClient = !this.jhipsterConfig.microfrontend;
+          this.jhipsterConfig.skipClient = !this.jhipsterConfig.clientFramework;
           this.jhipsterConfig.withAdminUi = false;
           this.jhipsterConfig.skipUserManagement = true;
         }

generators/bootstrap/index.js

@@ -21,8 +21,8 @@ const _ = require('lodash');
 const {
   createConflicterCheckTransform,
   createConflicterStatusTransform,
-  createYoRcTransform,
-  createYoResolveTransform,
+  createYoRcTransform: createForceYoRcTransform,
+  createYoResolveTransform: createApplyYoResolveTransform,
   patternFilter,
   patternSpy,
 } = require('yeoman-environment/transform');
@@ -148,6 +148,9 @@ module.exports = class extends BaseGenerator {
    * @return {Promise}
    */
   async _commitSharedFs(stream = this.env.sharedFs.stream(), skipPrettier = this.options.skipPrettier) {
+    const { skipYoResolve } = this.options;
+    const { withGeneratedFlag } = this.jhipsterConfig;
+
     // JDL writes directly to disk, set the file as modified so prettier will be applied
     stream = stream.pipe(
       patternSpy(file => {
@@ -170,29 +173,29 @@ module.exports = class extends BaseGenerator {
       ],
     };
 
-    const yoResolveTranform = this.options.skipYoResolve ? [] : [createYoResolveTransform(this.env.conflicter)];
-    const transformStreams = [
-      // multi-step changes the file path, should be executed earlier in the pipeline
-      new MultiStepTransform(),
-      ...yoResolveTranform,
-      createYoRcTransform(),
-      patternSpy(file => {
-        file.conflicter = 'force';
-      }, '**/.jhipster/*.json').name('jhipster:config-files:force'),
-    ];
-
-    if (this.jhipsterConfig.withGeneratedFlag) {
-      transformStreams.push(generatedAnnotationTransform(this));
-    }
-
-    if (!skipPrettier) {
+    const createApplyPrettierTransform = () => {
       const prettierOptions = { packageJson: true, java: !this.skipServer && !this.jhipsterConfig.skipServer };
       // Prettier is clever, it uses correct rules and correct parser according to file extension.
       const ignoreErrors = this.options.commandName === 'upgrade' || this.options.ignoreErrors;
-      transformStreams.push(prettierTransform(prettierOptions, this, ignoreErrors));
-    }
+      return prettierTransform(prettierOptions, this, ignoreErrors);
+    };
+
+    const createForceWriteConfigFiles = () =>
+      patternSpy(file => {
+        file.conflicter = 'force';
+      }, '**/.jhipster/*.json').name('jhipster:config-files:force');
 
-    transformStreams.push(createConflicterCheckTransform(this.env.conflicter, conflicterStatus), createConflicterStatusTransform());
+    const transformStreams = [
+      // multi-step changes the file path, should be executed earlier in the pipeline
+      new MultiStepTransform(),
+      ...(skipYoResolve ? [] : [createApplyYoResolveTransform(this.env.conflicter)]),
+      createForceYoRcTransform(),
+      createForceWriteConfigFiles(),
+      ...(withGeneratedFlag ? [generatedAnnotationTransform(this)] : []),
+      ...(skipPrettier ? [] : [createApplyPrettierTransform()]),
+      createConflicterCheckTransform(this.env.conflicter, conflicterStatus),
+      createConflicterStatusTransform(),
+    ];
 
     await this.env.fs.commit(transformStreams, stream);
   }

generators/client/index.js

@@ -297,11 +297,11 @@ module.exports = class JHipsterClientGenerator extends BaseBlueprintGenerator {
       },
 
       loadEntities() {
-        if (!this.configOptions.sharedEntities || (this.applicationTypeGateway && this.microfrontend)) {
+        if (!this.configOptions.sharedEntities) {
           this.localEntities = [];
           return;
         }
-        this.localEntities = Object.values(this.configOptions.sharedEntities).filter(entity => !entity.builtIn);
+        this.localEntities = Object.values(this.configOptions.sharedEntities).filter(entity => !entity.builtIn && !entity.skipClient);
       },
 
       insight() {

generators/client/needle-api/needle-client-angular.js

@@ -236,7 +236,7 @@ module.exports = class extends needleClientBase {
 
       if (!isSpecificEntityAlreadyGenerated) {
         const modulePath =
-          this.generator.jhipsterConfig.microfrontend && this.generator.jhipsterConfig.applicationType === 'gateway' && microserviceName
+          this.generator.microfrontend && this.generator.applicationTypeGateway && microserviceName
             ? `${microserviceName}/${entityFileName}`
             : `./${entityFolderName}/${entityFileName}.module`;
         const moduleName = microserviceName

generators/client/templates/vue/src/main/webapp/app/declarations.d.ts.ejs

@@ -26,10 +26,10 @@ declare const VERSION: string;
 declare const I18N_HASH: string;
 <%_ } _%>
 <%_ if (applicationTypeGateway && microfrontend) { _%>
-  <%_ for (const remote of remotes) { _%>
+  <%_ for (const remote of microfrontends) { _%>
 
 declare module '@<%= remote.lowercaseBaseName %>/entities-router' {
-  const _default: [];
+  const _default: unknown;
   export default _default;
 }
 

generators/client/templates/vue/src/main/webapp/app/main.ts.ejs

@@ -5,7 +5,7 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 import App from './app.vue';
 import Vue2Filters from 'vue2-filters';
 import { ToastPlugin } from 'bootstrap-vue';
-import router from './router';
+import router<% if (applicationTypeGateway && microfrontend) { %>, { lazyRoutes }<% } %> from './router';
 import * as config from './shared/config/config';
 import * as bootstrapVueConfig from './shared/config/config-bootstrap-vue';
 import JhiItemCountComponent from './shared/jhi-item-count.vue';
@@ -69,13 +69,18 @@ const translationService = new TranslationService(store, i18n);
 const loginService = new LoginService();
 const accountService = new AccountService(store, <%_ if (enableTranslation) { _%>translationService, <%_ } _%><%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>(<any>Vue).cookie, <%_ } _%><%_ if (communicationSpringWebsocket) { _%>trackerService, <%_ } _%>router);
 
-router.beforeEach((to, from, next) => {
-
+router.beforeEach(async (to, from, next) => {
   if (!to.matched.length) {
-    next('/not-found');
-  }
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+    await lazyRoutes;
+    if (router.match(to.fullPath).matched.length > 0) {
+      next(to.fullPath);
+      return;
+    }
 
-  if (to.meta && to.meta.authorities && to.meta.authorities.length > 0) {
+<%_ } _%>
+    next('/not-found');
+  } else if (to.meta && to.meta.authorities && to.meta.authorities.length > 0) {
     accountService.hasAnyAuthorityAndCheckAuth(to.meta.authorities).then(value => {
       if (!value) {
         sessionStorage.setItem('requested-url', to.fullPath);

generators/client/templates/vue/src/main/webapp/app/router/entities.ts.ejs

@@ -13,7 +13,7 @@ const <%= entity.entityAngularName %>Details = () => import('@/entities/<%= enti
 <%_ } _%>
 // jhipster-needle-add-entity-to-router-import - JHipster will import entities to the router here
 
-export default [
+export default
   {
     path: '/<%= applicationTypeMicroservice ? baseName.toLowerCase() : '' %>',
     component: Entities,
@@ -48,5 +48,4 @@ export default [
 <%_ } _%>
       // jhipster-needle-add-entity-to-router - JHipster will add entities to the router here
     ],
-  },
-];
+  };

generators/client/templates/vue/src/main/webapp/app/router/index.ts.ejs

@@ -5,7 +5,7 @@ Component.registerHooks([
   'beforeRouteLeave',
   'beforeRouteUpdate' // for vue-router 2.2+
 ])
-import Router from 'vue-router';
+import Router, { RouteConfig } from 'vue-router';
 
 const Home = () => import('@/core/home/home.vue');
 const Error = () => import('@/core/error/error.vue');
@@ -15,17 +15,11 @@ import account from "@/router/account";
 import admin from "@/router/admin";
 import entities from "@/router/entities";
 import pages from "@/router/pages";
-<%_ if (applicationTypeGateway && microfrontend) { _%>
-
-  <%_ for (const remote of remotes) { _%>
-const <%= remote.lowercaseBaseName %>Router = await import('@<%= remote.lowercaseBaseName %>/entities-router').then(module => module.default).catch(() => []);
-  <%_ } _%>
-<%_ } _%>
 
 Vue.use(Router);
 
 // prettier-ignore
-export default new Router({
+const router = new Router({
   mode: 'history',
   routes: [
     {
@@ -49,12 +43,23 @@ export default new Router({
     ...account,
 <%_ } _%>
     ...admin,
-    ...entities,
-<%_ if (applicationTypeGateway && microfrontend) { _%>
-  <%_ for (const remote of remotes) { _%>
-    ...<%= remote.lowercaseBaseName %>Router,
-  <%_ } _%>
-<%_ } _%>
+    entities,
     ...pages
   ]
 });
+
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+export const lazyRoutes = Promise.all([
+  <%_ for (const remote of microfrontends) { _%>
+  import('@<%= remote.lowercaseBaseName %>/entities-router')
+    .then(<%= remote.lowercaseBaseName %>Router => {
+      router.addRoute(<%= remote.lowercaseBaseName %>Router.default as RouteConfig);
+      return <%= remote.lowercaseBaseName %>Router.default;
+    }).catch(() => {
+      console.log("Error loading <%= remote.lowercaseBaseName %> menus. Make sure it's up.");
+    }),
+  <%_ } _%>
+]);
+
+<%_ } _%>
+export default router;

generators/client/templates/vue/src/test/javascript/jest.conf.js.ejs

@@ -17,8 +17,8 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/$1',
     ...pathsToModuleNameMapper(paths, { prefix: `<rootDir>/${baseUrl}/` }),
-<%_ if (applicationTypeGateway) { _%>
-    '^@(<%= remotes.map(remote => remote.lowercaseBaseName).join('|') %>)/(.*)$': '<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/app/microfrontends/$2',
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+    '^@(<%= microfrontends.map(remote => remote.lowercaseBaseName).join('|') %>)/(.*)$': '<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/app/microfrontends/$2',
 <%_ } _%>
   },
   reporters: [

generators/client/templates/vue/tsconfig.json.ejs

@@ -24,5 +24,5 @@
     "include": [
         "<%= CLIENT_MAIN_SRC_DIR %>app"
     ],
-    "exclude": ["node_modules"<% if (!cypressTests) { %>,"<%= CLIENT_TEST_SRC_DIR %>cypress"<% } %>]
+    "exclude": ["node_modules"<% if (cypressTests) { %>,"<%= CLIENT_TEST_SRC_DIR %>cypress"<% } %>]
 }

generators/client/templates/vue/tsconfig.spec.json.ejs

@@ -22,7 +22,7 @@
     "outDir": "<%= BUILD_DIR %>out-tsc/spec",
 <%_ if (microfrontend && applicationTypeGateway) { _%>
     "paths": {
-  <%_ for (const remote of remotes) { _%>
+  <%_ for (const remote of microfrontends) { _%>
       "@<%= remote.lowercaseBaseName %>/*": ["<%= CLIENT_TEST_SRC_DIR %>spec/app/microfrontends/*"],
   <%_ } _%>
       "@/*": ["*"]

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

@@ -24,7 +24,7 @@ const { DefinePlugin } = require('webpack');
 <&_ if (fragment.moduleFederationSection) { -&>
 <%_ if (applicationTypeGateway) { _%>
         remotes: {
-  <%_ for (const remote of remotes) { _%>
+  <%_ for (const remote of microfrontends) { _%>
           '@<%= remote.lowercaseBaseName %>': `<%= remote.lowercaseBaseName %>@/<%= remote.endpointPrefix %>/remoteEntry.js`,
   <%_ } _%>
         },

generators/cypress/templates/cypress.json.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 {
-  "baseUrl": "http://localhost:<%= serverPort %>/",
+  "baseUrl": "http://localhost:<%= gatewayServerPort || serverPort %>/",
   "testFiles": "**/*.spec.ts",
   "supportFile": "<%= CLIENT_TEST_SRC_DIR %>cypress/support/index.ts",
   "video": false,

generators/entity-client/files.js

@@ -437,11 +437,7 @@ function addSampleRegexTestingStrings(generator) {
 function writeFiles() {
   return {
     writeClientFiles() {
-      if (
-        this.skipClient ||
-        (this.jhipsterConfig.microfrontend && this.jhipsterConfig.applicationType === 'gateway' && this.microserviceName)
-      )
-        return undefined;
+      if (this.skipClient || (this.microfrontend && this.applicationTypeGateway && this.microserviceName)) return undefined;
       if (this.protractorTests) {
         addSampleRegexTestingStrings(this);
       }
@@ -483,7 +479,7 @@ function addToMenu() {
   if (!this.embedded) {
     this.addEntityToModule();
     this.addEntityToMenu(
-      this.entityStateName,
+      this.entityPage,
       this.enableTranslation,
       this.clientFramework,
       this.entityTranslationKeyMenu,

generators/entity-client/index.js

@@ -157,11 +157,7 @@ module.exports = class extends BaseBlueprintGenerator {
       },
 
       replaceTranslations() {
-        if (
-          this.skipClient ||
-          (this.jhipsterConfig.microfrontend && this.jhipsterConfig.applicationType === 'gateway' && this.microserviceName)
-        )
-          return undefined;
+        if (this.skipClient || (this.microfrontend && this.applicationTypeGateway && this.microserviceName)) return undefined;
         return replaceTranslations.call(this);
       },
     };

generators/entity-client/templates/common/src/test/javascript/cypress/integration/entity/entity.spec.ts.ejs

@@ -14,7 +14,7 @@ import {
 } from '../../support/entity';
 <%_
 
-const baseApi = (applicationTypeGateway && locals.microserviceName) ? 'services/' + microserviceName.toLowerCase() + '/api/' : 'api/';
+const baseApi = entityApi + 'api/';
 
 const entityFakeData = generateFakeData('cypress');
 const requiredRelationships = relationships.filter(rel => rel.relationshipRequired || rel.id);

generators/entity/index.js

@@ -204,7 +204,6 @@ class EntityGenerator extends BaseBlueprintGenerator {
         const context = this.context;
 
         if (this.jhipsterConfig.applicationType === MICROSERVICE) {
-          context.skipClient = context.skipClient || !this.jhipsterConfig.microfrontend;
           context.microserviceName = this.entityConfig.microserviceName = this.jhipsterConfig.baseName;
           if (!this.entityConfig.clientRootFolder) {
             context.clientRootFolder = this.entityConfig.clientRootFolder = this.entityConfig.microserviceName;
@@ -232,6 +231,13 @@ class EntityGenerator extends BaseBlueprintGenerator {
               ? ''
               : this.entityConfig.microserviceName;
           }
+
+          if (this.jhipsterConfig.applications && !this.entityConfig.skipClient) {
+            const remoteConfig = this.jhipsterConfig.applications[this.entityConfig.microserviceName];
+            if (remoteConfig.clientFramework === 'vue') {
+              this.entityConfig.skipClient = true;
+            }
+          }
         }
       },
 

generators/generator-base.js

@@ -2666,7 +2666,7 @@ templates: ${JSON.stringify(existingTemplates, null, 2)}`;
     }
 
     if (options.microfrontend) {
-      this.jhipsterConfig.microfrontend = options.microfrontend;
+      this.warning('Microfrontend option is deprecated.');
     }
 
     if (options.reactive !== undefined) {
@@ -2747,7 +2747,6 @@ templates: ${JSON.stringify(existingTemplates, null, 2)}`;
     dest.pages = config.pages;
     dest.skipJhipsterDependencies = !!config.skipJhipsterDependencies;
     dest.withAdminUi = config.withAdminUi;
-    dest.microfrontend = config.microfrontend;
     dest.gatewayServerPort = config.gatewayServerPort;
 
     dest.capitalizedBaseName = config.capitalizedBaseName;
@@ -2777,6 +2776,12 @@ templates: ${JSON.stringify(existingTemplates, null, 2)}`;
     dest.applicationTypeMonolith = dest.applicationType === MONOLITH;
     dest.applicationTypeMicroservice = dest.applicationType === MICROSERVICE;
 
+    if (dest.remotes) {
+      dest.microfrontends = dest.remotes.filter(r => !r.skipClient);
+      dest.microfrontend =
+        (dest.applicationTypeMicroservice && !dest.skipClient) || (dest.applicationTypeGateway && dest.microfrontends.length > 0);
+    }
+
     // Application name modified, using each technology's conventions
     if (dest.baseName) {
       dest.camelizedBaseName = _.camelCase(dest.baseName);

generators/server/index.js

@@ -446,7 +446,7 @@ module.exports = class JHipsterServerGenerator extends BaseBlueprintGenerator {
     return {
       packageJsonScripts() {
         const packageJsonConfigStorage = this.packageJson.createStorage('config').createProxy();
-        packageJsonConfigStorage.backend_port = this.serverPort;
+        packageJsonConfigStorage.backend_port = this.gatewayServerPort || this.serverPort;
         packageJsonConfigStorage.packaging = this.defaultPackaging;
         packageJsonConfigStorage.default_environment = this.defaultEnvironment;
       },