Improvements to microfrontend support.

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/templates/vue/src/main/webapp/app/declarations.d.ts.ejs

@@ -29,7 +29,7 @@ declare const I18N_HASH: string;
   <%_ 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 microfrontends) { _%>
-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,
+    entities,
+    ...pages
+  ]
+});
+
 <%_ if (applicationTypeGateway && microfrontend) { _%>
+export const lazyRoutes = Promise.all([
   <%_ for (const remote of microfrontends) { _%>
-    ...<%= remote.lowercaseBaseName %>Router,
+  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.");
+    }),
   <%_ } _%>
+]);
+
 <%_ } _%>
-    ...pages
-  ]
-});
+export default router;

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/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

@@ -479,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/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

@@ -231,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/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;
       },

test-integration/jdl-samples/vue-blog-store-microfrontend/blog-store.jdl

@@ -27,8 +27,8 @@ application {
     clientFramework vue
     authenticationType oauth2
     prodDatabaseType postgresql
-    searchEngine elasticsearch
     serverPort 8081
+    testFrameworks [cypress]
     creationTimestamp 1617901618887
     jwtSecretKey "ZjY4MTM4YjI5YzMwZjhjYjI2OTNkNTRjMWQ5Y2Q0Y2YwOWNmZTE2NzRmYzU3NTMwM2NjOTE3MTllOTM3MWRkMzcyYTljMjVmNmQ0Y2MxOTUzODc0MDhhMTlkMDIxMzI2YzQzZDM2ZDE3MmQ3NjVkODk3OTVmYzljYTQyZDNmMTQ="
   }
@@ -42,11 +42,9 @@ application {
     applicationType microservice
     clientFramework vue
     authenticationType oauth2
-    databaseType mongodb
-    devDatabaseType mongodb
-    prodDatabaseType mongodb
-    enableHibernateCache false
+    prodDatabaseType postgresql
     serverPort 8082
+    testFrameworks [cypress]
     creationTimestamp 1617901618888
     jwtSecretKey "ZjY4MTM4YjI5YzMwZjhjYjI2OTNkNTRjMWQ5Y2Q0Y2YwOWNmZTE2NzRmYzU3NTMwM2NjOTE3MTllOTM3MWRkMzcyYTljMjVmNmQ0Y2MxOTUzODc0MDhhMTlkMDIxMzI2YzQzZDM2ZDE3MmQ3NjVkODk3OTVmYzljYTQyZDNmMTQ="
   }

test/client/__snapshots__/angular.spec.js.snap

@@ -65,9 +65,6 @@ Object {
   "src/main/webapp/WEB-INF/web.xml": Object {
     "stateCleared": "modified",
   },
-  "src/main/webapp/app/admin/admin-routing.module.ts": Object {
-    "stateCleared": "modified",
-  },
   "src/main/webapp/app/admin/configuration/configuration.component.html": Object {
     "stateCleared": "modified",
   },
@@ -92,21 +89,6 @@ Object {
   "src/main/webapp/app/admin/configuration/configuration.service.ts": Object {
     "stateCleared": "modified",
   },
-  "src/main/webapp/app/admin/docs/docs.component.html": Object {
-    "stateCleared": "modified",
-  },
-  "src/main/webapp/app/admin/docs/docs.component.scss": Object {
-    "stateCleared": "modified",
-  },
-  "src/main/webapp/app/admin/docs/docs.component.ts": Object {
-    "stateCleared": "modified",
-  },
-  "src/main/webapp/app/admin/docs/docs.module.ts": Object {
-    "stateCleared": "modified",
-  },
-  "src/main/webapp/app/admin/docs/docs.route.ts": Object {
-    "stateCleared": "modified",
-  },
   "src/main/webapp/app/admin/health/health.component.html": Object {
     "stateCleared": "modified",
   },

test/client/__snapshots__/vue.spec.js.snap

@@ -473,6 +473,9 @@ Object {
   "src/test/javascript/spec/app/core/ribbon/ribbon.component.spec.ts": Object {
     "stateCleared": "modified",
   },
+  "src/test/javascript/spec/app/entities/entities-menu.spec.ts": Object {
+    "stateCleared": "modified",
+  },
   "src/test/javascript/spec/app/microfrontends/entities-menu.component.ts": Object {
     "stateCleared": "modified",
   },

test/client/angular.spec.js

@@ -2,6 +2,10 @@ const expect = require('expect');
 const path = require('path');
 const { skipPrettierHelpers: helpers } = require('../utils/utils');
 const { OAUTH2 } = require('../../jdl/jhipster/authentication-types');
+const { MICROSERVICE } = require('../../jdl/jhipster/application-types');
+const { ANGULARX } = require('../../jdl/jhipster/client-framework-types');
+
+const commonOptions = { clientFramework: ANGULARX };
 
 describe('JHipster angular generator', () => {
   describe('microfrontend', () => {
@@ -12,10 +16,11 @@ describe('JHipster angular generator', () => {
         .withOptions({
           skipInstall: true,
           auth: OAUTH2,
-          microfrontend: true,
+          applicationType: MICROSERVICE,
           enableTranslation: true,
           nativeLanguage: 'en',
           languages: ['fr', 'en'],
+          ...commonOptions,
         })
         .run();
     });

test/client/react.spec.js

@@ -2,6 +2,7 @@ const expect = require('expect');
 const path = require('path');
 const { skipPrettierHelpers: helpers } = require('../utils/utils');
 const { OAUTH2 } = require('../../jdl/jhipster/authentication-types');
+const { MICROSERVICE } = require('../../jdl/jhipster/application-types');
 const { REACT } = require('../../jdl/jhipster/client-framework-types');
 
 const commonOptions = { clientFramework: REACT };
@@ -15,8 +16,8 @@ describe('JHipster react generator', () => {
           .withOptions({
             skipInstall: true,
             auth: OAUTH2,
-            microfrontend: true,
             enableTranslation: true,
+            applicationType: MICROSERVICE,
             nativeLanguage: 'en',
             languages: ['fr', 'en'],
             ...commonOptions,

test/client/vue.spec.js

@@ -2,6 +2,7 @@ const expect = require('expect');
 const path = require('path');
 const { skipPrettierHelpers: helpers } = require('../utils/utils');
 const { OAUTH2 } = require('../../jdl/jhipster/authentication-types');
+const { MICROSERVICE } = require('../../jdl/jhipster/application-types');
 const { VUE } = require('../../jdl/jhipster/client-framework-types');
 
 const commonOptions = { clientFramework: VUE };
@@ -13,9 +14,9 @@ describe('JHipster vue generator', () => {
       runResult = await helpers
         .create(path.join(__dirname, '../../generators/client'))
         .withOptions({
+          applicationType: MICROSERVICE,
           skipInstall: true,
           auth: OAUTH2,
-          microfrontend: true,
           enableTranslation: true,
           nativeLanguage: 'en',
           languages: ['fr', 'en'],

test/needle-api/needle-client-vue.spec.js

@@ -124,30 +124,30 @@ const entityNameDetails = () => import('@/entities/entityFolderName/entityFileNa
     assert.fileContent(
       `${CLIENT_MAIN_SRC_DIR}app/router/entities.ts`,
       `
-      {
-        path: 'entityFileName',
-        name: 'entityName',
-        component: entityName,
-        meta: { authorities: [Authority.USER] },
-      },
-      {
-        path: 'entityFileName/new',
-        name: 'entityNameCreate',
-        component: entityNameUpdate,
-        meta: { authorities: [Authority.USER] },
-      },
-      {
-        path: 'entityFileName/:entityInstanceId/edit',
-        name: 'entityNameEdit',
-        component: entityNameUpdate,
-        meta: { authorities: [Authority.USER] },
-      },
-      {
-        path: 'entityFileName/:entityInstanceId/view',
-        name: 'entityNameView',
-        component: entityNameDetails,
-        meta: { authorities: [Authority.USER] },
-      },
+    {
+      path: 'entityFileName',
+      name: 'entityName',
+      component: entityName,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'entityFileName/new',
+      name: 'entityNameCreate',
+      component: entityNameUpdate,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'entityFileName/:entityInstanceId/edit',
+      name: 'entityNameEdit',
+      component: entityNameUpdate,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'entityFileName/:entityInstanceId/view',
+      name: 'entityNameView',
+      component: entityNameDetails,
+      meta: { authorities: [Authority.USER] },
+    },
 `
     );
   });