Add microfrontend support to vue.

[mshima]

Vue modularization for microservice:

• Implement entities component. Declare every entity service here instead of at main.
• Implement entities menu component. So gateway will not need to add menus when adding entities.
• Move global variables to declarations.d.ts

Webpack:

• Don’t set custom names. Defaults are optimized for features like cachings.
• Remove additional entry points. They are not required and conflicts with module federation.
• Remove custom chunks definitions.
• Don’t add HotModulePlugin. Added automatically by webpack when hot is true.
• Don’t add NoEmitOnErrorPlugin. A missing page seems worse than a broken page.
• Remove fallback config. Not required anymore. Node features are not exported by webpack anymore.
• Migrate from deprecated url-loader to assets module.
• Move devServer config to common, so it's possible to webpack serve --mode production

Microfrontend details:

• Microfrontends needs to be started and functional, remote is loaded eagerly.
  I've tried different approaches to lazy load without success.
• Gateway doesn't need to be regenerated when adding new entities.
• Entity page is using microservice/entity instead of just entity. Example http://localhost:8080/blog/post.

Closes #16276.

---

Please make sure the below checklist is followed for Pull Requests.

• All continuous integration tests are green
• Tests are added where necessary
• The JDL part is updated if necessary
• jhipster-online is updated if necessary
• Documentation is added/updated where necessary
• Coding Rules & Commit Guidelines as per our CONTRIBUTING.md document are followed

When you are still working on the PR, consider converting it to Draft (below reviewers) and adding skip-ci label, you can still see CI build result at your branch.

[mshima]

Just missing entities-menu test.

[mraible]

I'll look into this as soon as I can. It might take until Monday.

[pascalgrimaud]

@mshima @mraible : it looks like a really complex PR. Keep in mind, we should not introduce breaking change in existing v7. If it's the case, it should be done on v8 branch

[mshima]

@pascalgrimaud I think this is not a breaking change.
IMO it's much less disruptive than a minor spring release or bootstrap 5 or dropping java 1.8 support.
The PR is big but most of the changes are new implementations or prettier.
Some adjusts to the build stack like removing deprecated webpack plugins and cleanup.

Anyway, if you want I can try to make more changes optional to microfrontend.

IMO breaking changes to JHipster should be jdl, the generators and some generated source features, not the source itself.
It's quite easy to keep old code with .yo-resove:

src/main/webapp skip
src/test/javascript skip

[mshima]

@mraible I've always used reused https://github.com/mshima/generator-jhipster/blob/main/test-integration/jdl-samples/blog-store/blog-store.jdl and used --client-framework vue.
I didn't realized the jdl is removing clientFramework and setting the default afterwards. So it needs change:

generator-jhipster/jdl/jhipster/default-application-options.js

Lines 172 to 176 in dffe240

	delete options[CLIENT_FRAMEWORK];
	delete options[CLIENT_THEME];
	delete options[CLIENT_THEME_VARIANT];
	delete options[SKIP_SERVER];
	delete options[WITH_ADMIN_UI];

[mshima]

@mraible jdl should be fixed now.

[mraible]

I tried it again a few minutes ago. If I just start the gateway and store, the gateway UI fails because it can't find blog. Is that expected? I think it'd be nice if you could just start the gateway + the microservice you want to work on.

If I start the blog app, everything works fine. However, the blog's i18n translations don't seem to come through. They work fine on the product entity.

[mshima]

I tried it again a few minutes ago. If I just start the gateway and store, the gateway UI fails because it can't find blog. Is that expected? I think it'd be nice if you could just start the gateway + the microservice you want to work on.

You can start the gateway and use the microservice frontend standalone.
I couldn't find a way to make vue gateway happy with the missing remote. Probably we would need vue3 suspense component https://v3.vuejs.org/guide/migration/suspense.html.
I have tried various approaches.

If I start the blog app, everything works fine. However, the blog's i18n translations don't seem to come through. They work fine on the product entity.

That's weird, if store app (product) works, blog app should work too.

[mshima]

I tried it again a few minutes ago. If I just start the gateway and store, the gateway UI fails because it can't find blog. Is that expected? I think it'd be nice if you could just start the gateway + the microservice you want to work on.

Did another try, and I've managed to workaround the missing remote.

If I start the blog app, everything works fine. However, the blog's i18n translations don't seem to come through. They work fine on the product entity.

Indeed, microservice translations of one app was been loaded before the gateway and been overridden.

[mraible]

I'm testing this again with the latest changes.

[mraible]

I tested this again today and things seem to work well. I did notice a couple of minor issues:

1. The UI seems to need a bit more padding. The buttons and alerts stretch to the edge of the screen.

2. The view screen shows everything jumbled together instead of stacked neatly.

[mraible]

I couldn't find where the index.html message is set, but I think we should change it from:

Microfrontends packages don't provide a stand-alone front-end. Packaged microfrontend should be accessed through a JHipster gateway.

To:

JHipster's microfrontends implementation doesn't provide a stand-alone UI. Packaged microfrontends should be accessed through a JHipster gateway.

[mshima]

Ought I've removed global.scss in some rebase.

[pascalgrimaud]

@mraible @mshima : plz, don't forget to add some documentation. See #17016

We have a lot of new features the last months, but no documentation at all :-(