Add Browsersync support for micro frontends

[mraible]

Overview of the issue

If you create a micro frontend architecture with the following command, when you modify the blog's files, there's no hot-reloading. The change is recognized in the blog project and recompilation happens, but the gateway is not aware of it and doesn't refresh the browser. If you manually refresh, it works.

Motivation for or Use Case

It'd be cool if you could modify files in the blog project and those files would be hot-reloaded.

Reproduce the error

Using the following JDL:

application {
  config {
    baseName gateway
    reactive true
    packageName com.okta.developer.gateway
    applicationType gateway
    authenticationType oauth2
    buildTool gradle
    prodDatabaseType postgresql
    serviceDiscoveryType eureka
    testFrameworks [cypress]
  }
  entities Blog, Post, Tag, Product
}

application {
  config {
    baseName blog
    reactive true
    packageName com.okta.developer.blog
    applicationType microservice
    authenticationType oauth2
    buildTool gradle
    databaseType neo4j
    devDatabaseType neo4j
    prodDatabaseType neo4j
    enableHibernateCache false
    serverPort 8081
    serviceDiscoveryType eureka
  }
  entities Blog, Post, Tag
}

application {
  config {
    baseName store
    reactive true
    packageName com.okta.developer.store
    applicationType microservice
    authenticationType oauth2
    buildTool gradle
    databaseType mongodb
    devDatabaseType mongodb
    prodDatabaseType mongodb
    enableHibernateCache false
    serverPort 8082
    serviceDiscoveryType eureka
  }
  entities Product
}

entity Blog {
  name String required minlength(3)
  handle String required minlength(2)
}

entity Post {
  title String required
  content TextBlob required
  date Instant required
}

entity Tag {
  name String required minlength(2)
}

entity Product {
  title String required
  price BigDecimal required min(0)
  image ImageBlob
}

relationship ManyToOne {
  Blog{user(login)} to User
  Post{blog(name)} to Blog
}

relationship ManyToMany {
  Post{tag(name)} to Tag{post}
}

paginate Post, Tag with infinite-scroll
paginate Product with pagination

microservice Product with store
microservice Blog, Post, Tag with blog

deployment {
  deploymentType docker-compose
  appsFolders [gateway, blog, store]
  dockerRepositoryName "mraible"
}

Create apps with it.

jhipster jdl mf.jdl --microfrontend

Then, start all apps with:

npm run ci:e2e:package
npm run ci:e2e:prepare

Start the gateway and blog frontends:

npm start

Modify a file in the blog app and notice that it's not hot-reloaded in the gateway. Manually refresh the gateway and you'll see the change.

JHipster Version(s)

main branch as of June 13, 2021.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[mraible]

Keep it open please.

On Sun, Aug 1, 2021 at 6:05 PM github-actions[bot] @.***> wrote:

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs 😃. Comment or this will be closed in 7 days

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/15311#issuecomment-890612679, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAELZGDBPVBNKKUK7P2LVTT2XONPANCNFSM46UBWXAQ .

[shershen08]

can't reproduce the initial command

$: jhipster jdl mf.jdl --microfrontend

error I get:

INFO! Using JHipster version installed globally
INFO! Downloading file: https://raw.githubusercontent.com/jhipster/jdl-samples/v7.1.0/mf.jdl
INFO! Error downloading https://raw.githubusercontent.com/jhipster/jdl-samples/v7.1.0/mf.jdl: 404 - Not Found
INFO! Downloading file: https://raw.githubusercontent.com/jhipster/jdl-samples/main/mf.jdl
ERROR! Error downloading https://raw.githubusercontent.com/jhipster/jdl-samples/main/mf.jdl: 404 - Not Found
Error: Error downloading https://raw.githubusercontent.com/jhipster/jdl-samples/main/mf.jdl: 404 - Not Found

[mraible]

@shershen08 You have to copy the JDL in this post to a mf.jdl file for this to work. Otherwise, the jdl command tries to pull from https://github.com/jhipster/jdl-samples.

[shershen08]

@shershen08 You have to copy the JDL in this post to a mf.jdl file for this to work. Otherwise, the jdl command tries to pull from https://github.com/jhipster/jdl-samples.

yes, indeed I was missing a correctly named file

[shershen08]

from brief analysis plugin is imported but not activated

const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

in store/webpack/webpack.custom.js and blog/webpack/webpack.custom.js

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[mraible]

Keep it open as I think it'd be really cool to develop a microservice in isolation.

[mshima]

I have this particularly implemented somewhere. Will finish this week.

[mshima]

Now I remember why I didn't finished it. I wasn't sure about the implementation.

https://github.com/jhipster/generator-jhipster/pull/16214 requires to execute gateway using devserver/browser sync npm start. Which is what the issue suggests.

Another approach is to start the gateway without devServer (using docker or ./mvnw) and implement at the microfrontend a browser sync that points to the gateway ui.

1. gateway (devServer + browser sync) / microfrontend (devServer which forwards rebuilds to gateway browser sync)
2. gateway (inside a docker or ./mvnw) / microfrontend (devServer + browser sync pointing to gateway).

I think approach 2 is more useful since the gateway can be shared as a container instead of source.

[mshima]

@mraible what do you think?

[mraible]

@mshima I like option #2 as well.

[mshima]

@pascalgrimaud bounty claimed https://opencollective.com/generator-jhipster/expenses/50252.

[pascalgrimaud]

@mshima : approved