Generating a Micro Frontend architecture with Vue and the Quartz theme has issues

[mraible]

Overview of the issue

At dev2next today, I generated a microservices architecture with micro frontends using the following JDL:

application {
  config {
    baseName gateway
    packageName org.jhipster.gateway
    applicationType gateway
    authenticationType oauth2
    buildTool maven
    clientFramework vue
    clientTheme quartz
    clientThemeVariant dark
    prodDatabaseType postgresql
    serviceDiscoveryType consul
    testFrameworks [cypress]
    microfrontends [blog, store]
  }
}

application {
  config {
    baseName blog
    packageName org.jhipster.blog
    applicationType microservice
    authenticationType oauth2
    buildTool maven
    clientFramework vue
    databaseType neo4j
    enableHibernateCache false
    serverPort 8081
    serviceDiscoveryType consul
    testFrameworks [cypress]
  }
  entities Blog, Post, Tag
}

application {
  config {
    baseName store
    packageName org.jhipster.store
    applicationType microservice
    authenticationType oauth2
    buildTool maven
    clientFramework vue
    databaseType mongodb
    enableHibernateCache false
    serverPort 8082
    serviceDiscoveryType consul
    testFrameworks [cypress]
  }
  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 with builtInEntity
  Post{blog(name)} to Blog
}

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

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

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

deployment {
  deploymentType kubernetes
  appsFolders [gateway, blog, store]
  clusteredDbApps [store]
  kubernetesNamespace demo
  kubernetesUseDynamicStorage true
  kubernetesStorageClassName ""
  serviceDiscoveryType consul
  dockerRepositoryName "mraible"
}

The differences between this JDL and reactive-mf.jdl is 1) it uses Spring MVC, 2) it uses Maven, and 3) it uses Vue.

Everything worked with Spring MVC, which is awesome. The gateway didn't compile with Vue because I was using the Quartz theme.

[INFO] ERROR in ./src/main/webapp/content/scss/vendor.scss (../node_modules/css-loader/dist/cjs.js??clonedRuleSet-7.use[1]!../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-7.use[2]!../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-7.use[3]!./src/main/webapp/content/scss/vendor.scss)
[INFO] Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
[INFO] Can't find stylesheet to import.
[INFO]   ╷
[INFO] 9 │ @import 'bootswatch/dist/quartz/variables';
[INFO]   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[INFO]   ╵
[INFO]   src/main/webapp/content/scss/vendor.scss 9:9  root stylesheet

I was able to fix this by changing vendor.scss to comment out the quartz imports:

//@import 'bootswatch/dist/quartz/variables';
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-vue/src/index.scss';
//@import 'bootswatch/dist/quartz/bootswatch';

The second issue I experienced was running npm start in any of the projects. They all displayed the following screen and I had to click the X in the top right to dismiss it. There are many more errors than those shown in the screenshot below.

Motivation for or Use Case

It should be possible to demonstrate a microservices and micro frontends app with React, Angular, or Vue. This was my first time using Vue for this demo, so I did warn the audience.

Reproduce the error

Generate apps using the JDL above. Run ./mvnw in the gateway to see the compilation error. Then run npm start in the same directory to see the warnings screen.

Related issues

#26484

JHipster Version(s)

8.7.1

• Checking this box is mandatory (this is just to show you read everything)

[qmonmert]

@mraible our version of bootswatch is 4.6.2 and quartz theme no longer seems to be present https://bootswatch.com/4/ but it is present in version 5 https://bootswatch.com/

[mraible]

Is Vue using 4.6.2 while others are using v5? I've used the Quartz theme with Angular and React recently w/o these issues.

[qmonmert]

@mraible yes

[mshima]

To use vue with Bootstrap 5 support is tracked in #23865.

[mraible]

I did another presentation today and used React this time. There is still an annoying issue when running npm start. It's a jarring error and made it difficult to show how hot-reloading works.

Here's the JDL I used:

application {
  config {
    baseName gateway
    packageName org.jhipster.gateway
    applicationType gateway
    authenticationType oauth2
    buildTool gradle
    clientFramework react
    clientTheme quartz
    clientThemeVariant dark
    prodDatabaseType postgresql
    serviceDiscoveryType consul
    testFrameworks [cypress]
    microfrontends [blog, store]
  }
}

application {
  config {
    baseName blog
    packageName org.jhipster.blog
    applicationType microservice
    authenticationType oauth2
    buildTool gradle
    clientFramework react
    databaseType neo4j
    enableHibernateCache false
    serverPort 8081
    serviceDiscoveryType consul
    testFrameworks [cypress]
  }
  entities Blog, Post, Tag
}

application {
  config {
    baseName store
    packageName org.jhipster.store
    applicationType microservice
    authenticationType oauth2
    buildTool gradle
    clientFramework react
    databaseType mongodb
    enableHibernateCache false
    serverPort 8082
    serviceDiscoveryType consul
    testFrameworks [cypress]
  }
  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 with builtInEntity
  Post{blog(name)} to Blog
}

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

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

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

deployment {
  deploymentType kubernetes
  appsFolders [gateway, blog, store]
  clusteredDbApps [store]
  kubernetesNamespace demo
  kubernetesUseDynamicStorage true
  kubernetesStorageClassName ""
  serviceDiscoveryType consul
  dockerRepositoryName "mraible"
}

To reproduce:

1. Copy the JDL above to reactive-mf.jdl
2. Run jhipster jdl reactive-mf.jdl --monorepository --workspaces
3. cd into the gateway and start it with ./gradlew. Once it's up, start the UI with npm start.

[mshima]

twbs/bootstrap#40849