generator-jhipster 8.0.0-rc.1 → 8.0.0

package/dist/generators/languages/generator.mjs

@@ -53,6 +53,7 @@ export default class LanguagesGenerator extends BaseApplicationGenerator {
     composedBlueprints;
     languageCommand;
     writeJavaLanguageFiles;
+    regenerateLanguages;
     constructor(args, options, features) {
         super(args, options, features);
         this.languageCommand = this.options.commandName === 'languages';
@@ -177,7 +178,7 @@ export default class LanguagesGenerator extends BaseApplicationGenerator {
         return this.asPreparingTaskGroup({
             prepareForTemplates({ application, source }) {
                 if (application.enableTranslation) {
-                    if (!this.languageCommand) {
+                    if (!this.languageCommand || this.regenerateLanguages) {
                         this.languagesToApply = application.languages;
                     }
                     else {
@@ -204,17 +205,21 @@ export default class LanguagesGenerator extends BaseApplicationGenerator {
     get default() {
         return this.asDefaultTaskGroup({
             async loadNativeLanguage({ application, control }) {
+                if (application.skipClient)
+                    return;
                 control.translations = control.translations ?? {};
                 this.translationData = new TranslationData({ generator: this, translations: control.translations });
                 const { clientSrcDir, enableTranslation, nativeLanguage } = application;
                 const fallbackLanguage = 'en';
                 this.queueLoadLanguages({ clientSrcDir, enableTranslation, nativeLanguage, fallbackLanguage });
                 const filter = createTranslationsFilter({ clientSrcDir, nativeLanguage, fallbackLanguage });
-                this.env.sharedFs.on('change', filePath => {
+                const listener = filePath => {
                     if (filter(filePath)) {
+                        this.env.sharedFs.removeListener('change', listener);
                         this.queueLoadLanguages({ clientSrcDir, enableTranslation, nativeLanguage, fallbackLanguage });
                     }
-                });
+                };
+                this.env.sharedFs.on('change', listener);
                 control.getWebappTranslation = (...args) => this.translationData.getClientTranslation(...args);
             },
             insight() {
@@ -305,7 +310,7 @@ export default class LanguagesGenerator extends BaseApplicationGenerator {
                 if (application.enableTranslation &&
                     application.generateUserManagement &&
                     !application.skipServer &&
-                    (application.backendTypeSpringBoot || this.writeJavaLanguageFiles)) {
+                    application.backendTypeSpringBoot) {
                     updateLanguagesInJava.call(this, { application, control });
                 }
             },
@@ -317,6 +322,8 @@ export default class LanguagesGenerator extends BaseApplicationGenerator {
     get postWritingEntities() {
         return this.asPostWritingEntitiesTaskGroup({
             addEntities({ application, entities, source }) {
+                if (application.skipClient)
+                    return;
                 const languagesToApply = application.enableTranslation ? this.languagesToApply : [...new Set([application.nativeLanguage, 'en'])];
                 for (const entity of entities.filter(entity => !entity.skipClient && !entity.builtIn)) {
                     for (const language of languagesToApply) {
@@ -346,16 +353,16 @@ export default class LanguagesGenerator extends BaseApplicationGenerator {
         this.queueTask({
             method: async () => {
                 const filter = createTranslationsFileFilter({ clientSrcDir, nativeLanguage, fallbackLanguage });
-                await this.env.applyTransforms([this.translationData.loadFromStreamTransform({ clientSrcDir, nativeLanguage, fallbackLanguage })], {
+                await this.pipeline({
                     name: 'loading translations',
-                    streamOptions: { filter },
-                });
-                if (!enableTranslation) {
-                    await this.env.applyTransforms([this.translationData.clearTranslationsStatusTransform({ clientSrcDir, nativeLanguage, fallbackLanguage })], {
-                        name: 'clearing translations',
-                        streamOptions: { filter },
-                    });
-                }
+                    filter: file => file.path.startsWith(this.destinationPath()) && filter(file),
+                    refresh: true,
+                }, this.translationData.loadFromStreamTransform({
+                    enableTranslation,
+                    clientSrcDir,
+                    nativeLanguage,
+                    fallbackLanguage,
+                }));
             },
             taskName: 'loadingTranslations',
             queueName: QUEUES.LOADING_TRANSLATIONS_QUEUE,

package/dist/generators/languages/translation-data.mjs

@@ -18,9 +18,8 @@
  */
 import { inspect } from 'node:util';
 import * as _ from 'lodash-es';
-import { passthrough } from '@yeoman/transform';
+import { transform } from '@yeoman/transform';
 import { Minimatch } from 'minimatch';
-import { clearFileState } from 'mem-fs-editor/state';
 const { get } = _;
 export const createTranslationsFilter = ({ clientSrcDir, nativeLanguage, fallbackLanguage }) => {
     const pattern = !fallbackLanguage || nativeLanguage === fallbackLanguage
@@ -42,22 +41,18 @@ export default class TranslationData {
         this.generator = generator;
         this.translations = translations;
     }
-    loadFromStreamTransform({ clientSrcDir, nativeLanguage, fallbackLanguage = 'en' }) {
+    loadFromStreamTransform({ enableTranslation, clientSrcDir, nativeLanguage, fallbackLanguage = 'en' }) {
         const filter = createTranslationsFileFilter({ clientSrcDir, nativeLanguage, fallbackLanguage });
         const minimatchNative = new Minimatch(`**/${clientSrcDir}i18n/${nativeLanguage}/*.json`);
-        return passthrough(file => {
-            if (filter(file)) {
+        return transform(file => {
+            if (filter(file) && file.contents) {
                 const contents = JSON.parse(file.contents.toString());
                 this.mergeTranslation(contents, !minimatchNative.match(file.path));
+                if (!enableTranslation) {
+                    return undefined;
+                }
             }
-        });
-    }
-    clearTranslationsStatusTransform({ clientSrcDir, nativeLanguage, fallbackLanguage = 'en' }) {
-        const filter = createTranslationsFileFilter({ clientSrcDir, nativeLanguage, fallbackLanguage });
-        return passthrough(file => {
-            if (filter(file)) {
-                clearFileState(file);
-            }
+            return file;
         });
     }
     mergeTranslation(translation, fallback) {

package/dist/generators/liquibase/generator.mjs

@@ -35,6 +35,8 @@ export default class LiquibaseGenerator extends BaseEntityChangesGenerator {
     recreateInitialChangelog;
     numberOfRows;
     databaseChangelogs = [];
+    injectBuildTool = true;
+    injectLogs = true;
     constructor(args, options, features) {
         super(args, options, { skipParseOptions: false, ...features });
         this.argument('entities', {
@@ -137,7 +139,7 @@ export default class LiquibaseGenerator extends BaseEntityChangesGenerator {
                         prepareEntity(entity, this, application);
                         prepareEntityForServer(entity);
                         if (!entity.embedded && !entity.primaryKey) {
-                            prepareEntityPrimaryKeyForTemplates(entity, this);
+                            prepareEntityPrimaryKeyForTemplates.call(this, { entity, application });
                         }
                         for (const field of entity.fields ?? []) {
                             prepareField(entity, field, this);
@@ -222,13 +224,15 @@ export default class LiquibaseGenerator extends BaseEntityChangesGenerator {
     get postWriting() {
         return this.asPostWritingTaskGroup({
             customizeSpring({ source }) {
+                if (!this.injectLogs)
+                    return;
                 source.addLogbackMainLog?.({ name: 'liquibase', level: 'WARN' });
                 source.addLogbackMainLog?.({ name: 'LiquibaseSchemaResolver', level: 'INFO' });
                 source.addLogbackTestLog?.({ name: 'liquibase', level: 'WARN' });
                 source.addLogbackTestLog?.({ name: 'LiquibaseSchemaResolver', level: 'INFO' });
             },
             customizeMaven({ source, application }) {
-                if (!application.buildToolMaven)
+                if (!application.buildToolMaven || !this.injectBuildTool)
                     return;
                 if (!application.javaDependencies) {
                     throw new Error('Some application fields are be mandatory');
@@ -331,7 +335,7 @@ export default class LiquibaseGenerator extends BaseEntityChangesGenerator {
                 }
             },
             injectGradle({ source, application }) {
-                if (!application.buildToolGradle)
+                if (!application.buildToolGradle || !this.injectBuildTool)
                     return;
                 if (!application.javaDependencies) {
                     throw new Error('Some application fields are be mandatory');

package/dist/generators/project-name/generator.mjs

@@ -114,7 +114,7 @@ export default class ProjectNameGenerator extends BaseApplicationGenerator {
      * @returns Boolean
      */
     validateBaseName(input) {
-        if (!/^([\w-]*)$/.test(input)) {
+        if (!/^([\w]*)$/.test(input)) {
             return 'Your base name cannot contain special characters or a blank space';
         }
         if (/_/.test(input)) {

package/dist/generators/react/generator.mjs

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 import * as _ from 'lodash-es';
-import { isFilePending } from 'mem-fs-editor/state';
+import { isFileStateModified } from 'mem-fs-editor/state';
 import chalk from 'chalk';
 import BaseApplicationGenerator from '../base-application/index.mjs';
 import { GENERATOR_CLIENT, GENERATOR_LANGUAGES, GENERATOR_REACT } from '../generator-list.mjs';
@@ -54,7 +54,7 @@ export default class ReactGenerator extends BaseApplicationGenerator {
         });
     }
     get [BaseApplicationGenerator.LOADING]() {
-        return this.asLoadingTaskGroup(this.delegateTasksToBlueprint(() => this.loading));
+        return this.delegateTasksToBlueprint(() => this.loading);
     }
     get preparing() {
         return this.asPreparingTaskGroup({
@@ -84,18 +84,26 @@ export default class ReactGenerator extends BaseApplicationGenerator {
     get [BaseApplicationGenerator.PREPARING_EACH_ENTITY]() {
         return this.asPreparingEachEntityTaskGroup(this.delegateTasksToBlueprint(() => this.preparingEachEntity));
     }
-    get writing() {
-        return {
-            cleanupOldFilesTask,
-            writeFiles,
+    get default() {
+        return this.asDefaultTaskGroup({
             queueTranslateTransform({ control, application }) {
                 if (!application.enableTranslation) {
-                    this.queueTransformStream(translateReactFilesTransform(control.getWebappTranslation), {
-                        name: 'translating webapp',
-                        streamOptions: { filter: file => isFilePending(file) && isTranslatedReactFile(file) },
-                    });
+                    this.queueTransformStream({
+                        name: 'translating react application',
+                        filter: file => isFileStateModified(file) && file.path.startsWith(this.destinationPath()) && isTranslatedReactFile(file),
+                        refresh: false,
+                    }, translateReactFilesTransform(control.getWebappTranslation));
                 }
             },
+        });
+    }
+    get [BaseApplicationGenerator.DEFAULT]() {
+        return this.delegateTasksToBlueprint(() => this.default);
+    }
+    get writing() {
+        return {
+            cleanupOldFilesTask,
+            writeFiles,
         };
     }
     get [BaseApplicationGenerator.WRITING]() {

package/dist/generators/react/resources/package.json

@@ -4,7 +4,7 @@
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@reduxjs/toolkit": "1.9.7",
-    "axios": "1.5.1",
+    "axios": "1.6.0",
     "bootstrap": "5.3.2",
     "bootswatch": "5.3.2",
     "lodash": "4.17.21",
@@ -16,7 +16,7 @@
     "react-loadable": "5.5.0",
     "react-redux": "8.1.3",
     "react-redux-loading-bar": "5.0.4",
-    "react-router-dom": "6.16.0",
+    "react-router-dom": "6.18.0",
     "react-toastify": "9.1.3",
     "react-transition-group": "4.4.5",
     "reactstrap": "9.2.0",
@@ -27,31 +27,32 @@
     "uuid": "9.0.1"
   },
   "devDependencies": {
+    "@module-federation/utilities": "3.0.3-0",
     "@testing-library/react": "14.0.0",
-    "@types/jest": "29.5.5",
-    "@types/lodash": "4.14.199",
-    "@types/node": "18.18.5",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13",
-    "@types/react-redux": "7.1.27",
+    "@types/jest": "29.5.7",
+    "@types/lodash": "4.14.200",
+    "@types/node": "18.18.8",
+    "@types/react": "18.2.34",
+    "@types/react-dom": "18.2.14",
+    "@types/react-redux": "7.1.28",
     "@types/redux": "3.6.31",
-    "@types/webpack-env": "1.18.2",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@types/webpack-env": "1.18.3",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
     "autoprefixer": "10.4.16",
     "browser-sync": "2.29.3",
     "browser-sync-webpack-plugin": "2.3.0",
     "copy-webpack-plugin": "11.0.0",
-    "core-js": "3.33.0",
+    "core-js": "3.33.2",
     "cross-env": "7.0.3",
     "css-loader": "6.8.1",
     "css-minimizer-webpack-plugin": "5.0.1",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-webpack-plugin": "4.0.1",
     "folder-hash": "4.0.4",
-    "fork-ts-checker-webpack-plugin": "9.0.0",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "html-webpack-plugin": "5.5.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
@@ -66,10 +67,10 @@
     "react-infinite-scroll-component": "6.1.0",
     "redux-mock-store": "1.5.4",
     "rimraf": "5.0.5",
-    "sass": "1.69.3",
+    "sass": "1.69.5",
     "sass-loader": "13.3.2",
     "simple-progress-webpack-plugin": "2.0.0",
-    "sinon": "16.1.0",
+    "sinon": "17.0.1",
     "source-map-loader": "4.0.1",
     "sourcemap-istanbul-instrumenter-loader": "0.2.0",
     "style-loader": "3.3.3",
@@ -78,10 +79,10 @@
     "ts-jest": "29.1.1",
     "ts-loader": "9.5.0",
     "typescript": "5.2.2",
-    "webpack": "5.88.2",
+    "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "webpack-merge": "5.9.0",
+    "webpack-merge": "5.10.0",
     "webpack-notifier": "1.15.0",
     "workbox-webpack-plugin": "7.0.0"
   }

package/dist/generators/react/templates/package.json.ejs

@@ -45,6 +45,7 @@
     "react-loadable": "<%= nodeDependencies['react-loadable'] %>",
     "react-redux": "<%= nodeDependencies['react-redux'] %>",
     "react-redux-loading-bar": "<%= nodeDependencies['react-redux-loading-bar'] %>",
+    "react-router": "<%= nodeDependencies['react-router-dom'] %>",
     "react-router-dom": "<%= nodeDependencies['react-router-dom'] %>",
     "react-toastify": "<%= nodeDependencies['react-toastify'] %>",
     "react-transition-group": "<%= nodeDependencies['react-transition-group'] %>",
@@ -64,6 +65,9 @@
     <%_ } _%>
   },
   "devDependencies": {
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+    "@module-federation/utilities": "<%= nodeDependencies['@module-federation/utilities'] %>",
+<%_ } _%>
     "@testing-library/react": "<%= nodeDependencies['@testing-library/react'] %>",
     "@types/jest": "<%= nodeDependencies['@types/jest'] %>",
     "@types/lodash": "<%= nodeDependencies['@types/lodash'] %>",
@@ -104,11 +108,6 @@
 <%_ if (enableI18nRTL) { _%>
     "postcss-rtlcss": "<%= nodeDependencies['postcss-rtlcss'] %>",
 <%_ } _%>
-    "prettier": "<%= nodeDependencies['prettier'] %>",
-<%_ if (!skipServer) { _%>
-    "prettier-plugin-java": "<%= nodeDependencies['prettier-plugin-java'] %>",
-<%_ } _%>
-    "prettier-plugin-packagejson": "<%= nodeDependencies['prettier-plugin-packagejson'] %>",
     "react-infinite-scroll-component": "<%= nodeDependencies['react-infinite-scroll-component'] %>",
     "redux-mock-store": "<%= nodeDependencies['redux-mock-store'] %>",
     "rimraf": "<%= nodeDependencies['rimraf'] %>",

package/dist/generators/react/templates/src/main/webapp/app/config/icon-loader.ts.ejs

@@ -16,39 +16,41 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
-import { faBan } from '@fortawesome/free-solid-svg-icons/faBan';
-import { faAsterisk } from '@fortawesome/free-solid-svg-icons/faAsterisk';
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
-import { faBell } from '@fortawesome/free-solid-svg-icons/faBell';
-import { faBook } from '@fortawesome/free-solid-svg-icons/faBook';
-import { faCloud } from '@fortawesome/free-solid-svg-icons/faCloud';
-import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
-import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
-import { faFlag } from '@fortawesome/free-solid-svg-icons/faFlag';
-import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
-import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
-import { faList } from '@fortawesome/free-solid-svg-icons/faList';
-import { faLock } from '@fortawesome/free-solid-svg-icons/faLock';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
-import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
-import { faSave } from '@fortawesome/free-solid-svg-icons/faSave';
-import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
-import { faSort } from '@fortawesome/free-solid-svg-icons/faSort';
-import { faSync } from '@fortawesome/free-solid-svg-icons/faSync';
-import { faRoad } from '@fortawesome/free-solid-svg-icons/faRoad';
-import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt';
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
-import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons/faTachometerAlt';
-import { faTasks } from '@fortawesome/free-solid-svg-icons/faTasks';
-import { faThList } from '@fortawesome/free-solid-svg-icons/faThList';
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
-import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
-import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
-import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
-import { faUsers } from '@fortawesome/free-solid-svg-icons/faUsers';
-import { faUsersCog } from '@fortawesome/free-solid-svg-icons/faUsersCog';
-import { faWrench } from '@fortawesome/free-solid-svg-icons/faWrench';
+import {
+  faCogs,
+  faBan,
+  faAsterisk,
+  faArrowLeft,
+  faBell,
+  faBook,
+  faCloud,
+  faDatabase,
+  faEye,
+  faFlag,
+  faHeart,
+  faHome,
+  faList,
+  faLock,
+  faPencilAlt,
+  faPlus,
+  faSave,
+  faSearch,
+  faSort,
+  faSync,
+  faRoad,
+  faSignInAlt,
+  faSignOutAlt,
+  faTachometerAlt,
+  faTasks,
+  faThList,
+  faTimesCircle,
+  faTrash,
+  faUser,
+  faUserPlus,
+  faUsers,
+  faUsersCog,
+  faWrench,
+} from '@fortawesome/free-solid-svg-icons';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 

package/dist/generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_-update.tsx.ejs

@@ -148,13 +148,18 @@ export const <%= entityReactName %>Update = () => {
     }
   }, [updateSuccess]);
 
+  // eslint-disable-next-line complexity
   const saveEntity = values => {
-<%_ for (field of fields.filter(field => !field.id)) {
+<%_ for (field of fields) {
     const fieldName = field.fieldName;
 _%>
   <%_ if (field.fieldTypeTimed)  { _%>
     values.<%= fieldName %> = convertDateTimeToServer(values.<%= fieldName %>);
-  <%_ } _%>
+  <%_ } else if (field.fieldTypeNumeric) { _%>
+    if (values.<%= fieldName %> !== undefined && typeof values.<%= fieldName %> !== 'number') {
+      values.<%= fieldName %> = Number(values.<%= fieldName %>);
+    }
+  <%_ } _%>  
 <%_ } _%>
 
     const entity = {

package/dist/generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.reducer.ts.ejs

@@ -48,7 +48,7 @@ const initialState: EntityState<I<%= entityReactName %>> = {
 
 const apiUrl = '<%= entityApi %>api/<%= entityApiUrl %>';
 <%_ if (searchEngineAny) { _%>
-const apiSearchUrl = '<%= entityApi %>api/_search/<%= entityApiUrl %>';
+const apiSearchUrl = '<%= entityApi %>api/<%= entityApiUrl %>/_search';
 <%_ } _%>
 
 // Actions

package/dist/generators/react/templates/src/main/webapp/app/entities/_entityFolder_/_entityFile_.tsx.ejs

@@ -491,7 +491,7 @@ _%>
                           <Button tag={Link} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/edit<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} color="primary" size="sm" data-cy="entityEditButton">
                             <FontAwesomeIcon icon="pencil-alt" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.edit">Edit</Translate></span>
                           </Button>
-                          <Button tag={Link} to={`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/delete<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} color="danger" size="sm" data-cy="entityDeleteButton">
+                          <Button onClick={() => location.href=`/<%= entityPage %>/${<%= entityInstance %>.<%= primaryKey.name %>}/delete<%_ if (paginationPagination) { _%>?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}<%_ } _%>`} color="danger" size="sm" data-cy="entityDeleteButton">
                             <FontAwesomeIcon icon="trash" /> <span className="d-none d-md-inline"><Translate contentKey="entity.action.delete">Delete</Translate></span>
                           </Button>
 <%_ } _%>

package/dist/generators/react/templates/src/main/webapp/app/modules/home/home.tsx.ejs

@@ -50,7 +50,7 @@ export const Home = () => {
         <span className="hipster rounded" />
       </Col>
       <Col md="9">
-        <h2><Translate contentKey="home.title">Welcome, <%= backendType %> Hipster!</Translate></h2>
+        <h1 className="display-4"><Translate contentKey="home.title">Welcome, <%= backendType %> Hipster!</Translate></h1>
         <p className="lead"><Translate contentKey="home.subtitle">This is your homepage</Translate></p>
         {
           (account?.login) ? (

package/dist/generators/react/templates/src/main/webapp/app/routes.tsx.ejs

@@ -19,6 +19,9 @@
 import React<% if (applicationTypeGateway && microfrontend) { %>, { Suspense }<% } %> from 'react';
 import { Route <% if (communicationSpringWebsocket) { %>, useLocation <% } %>} from 'react-router-dom';
 import Loadable from 'react-loadable';
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+import { importRemote } from '@module-federation/utilities';
+<%_ } _%>
 
 <%_ if (!authenticationTypeOauth2) { _%>
 import Login from 'app/modules/login/login';
@@ -59,10 +62,14 @@ const Admin = Loadable({
 <%_ if (applicationTypeGateway && microfrontend) { _%>
 
   <%_ for (const remote of microfrontends) { _%>
-const <%= remote.capitalizedBaseName %>Routes = React.lazy(() => import('@<%= remote.lowercaseBaseName %>/entities-routes').catch(() => import('app/shared/error/error-loading')));
+const <%= remote.capitalizedBaseName %>Routes = React.lazy(() => importRemote<any>({
+  url: `./services/<%= remote.lowercaseBaseName %>`,
+  scope: '<%= remote.lowercaseBaseName %>',
+  module: './entities-routes',
+}).catch(() => import('app/shared/error/error-loading')));
+
   <%_ } _%>
 <%_ } _%>
-
 const AppRoutes = () => {
 <%_ if (communicationSpringWebsocket) { _%>
   const pageLocation = useLocation();

package/dist/generators/react/templates/src/main/webapp/app/shared/layout/header/header-components.tsx.ejs

@@ -36,7 +36,7 @@ export const Brand = () => (
 <NavbarBrand tag={Link} to="/" className="brand-logo">
   <BrandIcon />
   <span className="brand-title"><Translate contentKey="global.title"><%= capitalizedBaseName %></Translate></span>
-  <span className="navbar-version">{VERSION}</span>
+  <span className="navbar-version">{VERSION.toLowerCase().startsWith('v') ? VERSION : `v${VERSION}`}</span>
 </NavbarBrand>
 );
 

package/dist/generators/react/templates/src/main/webapp/app/shared/layout/header/header.scss.ejs

@@ -33,7 +33,7 @@ Developement Ribbon
   transform: rotate(-45deg);
   overflow: hidden;
   position: absolute;
-  top: 30px;
+  top: 40px;
   white-space: nowrap;
   width: 15em;
   z-index: 99999;
@@ -105,7 +105,7 @@ Navbar styles
 }
 
 .navbar-version {
-  font-size: 10px;
+  font-size: 0.65em;
   color: $header-color-secondary;
   padding: 0 0 0 10px;
 }
@@ -119,13 +119,14 @@ Navbar styles
     width: auto;
     display: inline-block;
     img {
-      height: 45px;
+      width: 45px;
     }
   }
 }
 
 .brand-title {
-  font-size: 24px;
+  font-size: 1.25rem;
+  margin-left: .25rem;
   color: $header-color;
   &:hover {
     color: $header-color-hover;

package/dist/generators/react/templates/src/main/webapp/app/shared/layout/menus/entities.tsx.ejs

@@ -19,12 +19,21 @@
 import React<% if (microfrontend) { %>, { Suspense }<% } %> from 'react';
 import { translate } from 'react-jhipster';
 import { NavDropdown } from './menu-components';
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+import { importRemote } from '@module-federation/utilities';
+<%_ } _%>
 <%_ if (microfrontend) { _%>
 
 const EntitiesMenuItems = React.lazy(() => import('app/entities/menu').catch(() => import('app/shared/error/error-loading')));
+
   <%_ if (applicationTypeGateway) { _%>
     <%_ for (const remote of microfrontends) { _%>
-const <%= remote.capitalizedBaseName %>EntitiesMenuItems = React.lazy(() => import('@<%= remote.lowercaseBaseName %>/entities-menu').catch(() => import('app/shared/error/error-loading')));
+const <%= remote.capitalizedBaseName %>EntitiesMenuItems = React.lazy(async () => importRemote<any>({
+  url: `./services/<%= remote.lowercaseBaseName %>`,
+  scope: '<%= remote.lowercaseBaseName %>',
+  module: './entities-menu',
+}).catch(() => import('app/shared/error/error-loading')));
+
     <%_ } _%>
   <%_ } _%>
 <%_ } else { _%>

package/dist/generators/react/templates/tsconfig.test.json.ejs

@@ -18,7 +18,7 @@
 -%>
 {
   "extends": "./tsconfig",
-  "include": ["<%= this.relativeDir(clientRootDir, clientSrcDir) %>app", "<%= this.relativeDir(clientRootDir, clientSrcDir) %>microfrontend"],
+  "include": ["<%= this.relativeDir(clientRootDir, clientSrcDir) %>app", "<%= this.relativeDir(clientRootDir, clientSrcDir) %>microfrontends"],
   "exclude": [],
   "compilerOptions": {
     "paths": {