Need to modularize routes

[yacosta738]

Overview of the feature request

Congratulations Jhipster Team. It would be great if the routes could be modularized. I explain when the project grows it becomes very difficult to maintain all the routes generated by jhipster and the ones created in the app. In addition, each time the generator is used to add a new entity or modify any field, the generator duplicates even its own routes.
The idea is to create a module for the default routes that jhipster creates, which I think would be easier to keep for you and the generator and for the index to import them as well as the own routes that the developers want to incorporate.

Motivation for or Use Case

The main reason is to be able to keep apps that are extremely large, for example, a module could be created for admin routes, another for entities, and so on. This allows the jhipster-vuejs generator when adding a new entity just modify this module and not duplicate the routes. Besides that it would be easier to maintain

Example

Here is how one can organize that:

router/index.ts

import moduleRoutes1 from "./path/to/moduleRoutes1"
import moduleRoutes2 from "./path/to/moduleRoutes2"

const router = new Router({
mode: 'history',
routes: [
...moduleRoutes1,
...moduleRoutes2
//etc.

  //Note '...' here is "spread operator" and not ellipsis
]

router/moduleRoutes1

let VuePage1 = () => import(/* webpackChunkName: MyChunk / '@/path/to/VuePage1')
let VuePage2 = () => import(/ webpackChunkName: MyChunk */ '@/path/to/VuePage2')

import moduleRoutes1_1 from "./path/to/moduleRoutes1_1"

export default [
{
path: '/some/path/1',
name: 'pathName1',
component: VuePage1,
},
{
path: '/some/path/2',
name: 'pathName2',
component: VuePage2,
},
...moduleRoutes1_1 //dividing modules further if needed
]
router/moduleRoutes2

... //now it's ellipsis

[pascalgrimaud]

The duplication of routes is indeed a problem, and it should not happened as there should be a regexp replace

About your feature request, do you have a quick example of what you have in mind ? I'd like to understand better

[yacosta738]

@pascalgrimaud I leave you an example with the idea.

Here is how one can organize that:

router/index.ts

import moduleRoutes1 from "./path/to/moduleRoutes1"
import moduleRoutes2 from "./path/to/moduleRoutes2"

const router = new Router({
    mode: 'history',
    routes: [
      ...moduleRoutes1,
      ...moduleRoutes2
      //etc. 

      //Note '...' here is "spread operator" and not ellipsis
    ]

router/moduleRoutes1

let VuePage1 = () => import(/* webpackChunkName: MyChunk */ '@/path/to/VuePage1')
let VuePage2 = () => import(/* webpackChunkName: MyChunk */ '@/path/to/VuePage2')

import moduleRoutes1_1 from "./path/to/moduleRoutes1_1"

export default [
    {
        path: '/some/path/1',
        name: 'pathName1',
        component: VuePage1,
    },
    {
        path: '/some/path/2',
        name: 'pathName2',
        component: VuePage2,
    },
    ...moduleRoutes1_1 //dividing modules further if needed
]

router/moduleRoutes2

... //now it's ellipsis

Note that moduleRoutes1 can be the default routes generated by jhipster, this allows the generator to only modify those routes and it would be easier for you and us to maintain when the app grows and needs modifications. The routes could be divided by more modules, example a module for the routes of admin, another for the routes of entities ... It can be modularized to the point that you want

You've got the idea.

For more details consult https://medium.com/@disjfa/lets-route-a-vue-app-aa9c3f3dbdf8

[pascalgrimaud]

@yuniel-acosta : thanks !
I agree with you, the router/index.ts is too big, if we can improve it, it will be better :-)

It would be really cool if you can contribute.
As at the moment, we have few contributors in this blueprint, so your help will be really welcome

[yacosta738]

@pascalgrimaud I would like to contribute, but I need to study how the generator works and how it is programmed. They have some guide to start.

[pascalgrimaud]

Here some steps, which can help you:

• fork the project
• clone your fork
• add the remote upstream
• try to generate locally a Vue.js project with your fork
• do a minor update (change one question or prompt for example)
• generate another project and check if the change is correctly applied -> so you're sure your local env works

Then, you'll be ready to start the contribute to this feature.
It's better to:

• generate and modify a generated project -> project A
• report the change from the generated project to the template in Vue.js blueprint
• generate a new project (project B) with your fork, and check the diff between project A and project B

[adilabed]

@pascalgrimaud I would like to contribute, but I need to study how the generator works and how it is programmed. They have some guide to start.

If you have any questions or need help, feel free to ask me or @nassimerrahoui .

[yacosta738]

Hi @pascalgrimaud and @adilabed i have problem with the blueprint in my local environment.
Where can I ask my doubts about the project, do you have any internal slack or gitter channels for those who develop the blueprint.

This is my error

jhipster -d --blueprints vuejs

INFO! Using JHipster version installed globally
INFO! No custom **sharedOptions** found within blueprint: generator-jhipster-vuejs at /home/acosta/.nvm/versions/node/v12.16.1/lib/node_modules/generator-jhipster-vuejs
events.js:288
      throw er; // Unhandled 'error' event
      ^

TypeError: jhipsterUtils.getAllJhipsterConfig is not a function
    at new module.exports (/home/acosta/Projects/jhipster/jhipster-vuejs/generators/page/index.js:29:45)
    at Environment.instantiate (/home/acosta/Projects/jhipster/generator-jhipster/node_modules/yeoman-environment/lib/environment.js:673:23)
    at Environment.create (/home/acosta/Projects/jhipster/generator-jhipster/node_modules/yeoman-environment/lib/environment.js:645:19)
    at /home/acosta/Projects/jhipster/generator-jhipster/cli/cli.js:74:31
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (/home/acosta/Projects/jhipster/generator-jhipster/cli/cli.js:62:29)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
Emitted 'error' event on Environment instance at:
    at Environment.error (/home/acosta/Projects/jhipster/generator-jhipster/node_modules/yeoman-environment/lib/environment.js:293:12)
    at Environment.create (/home/acosta/Projects/jhipster/generator-jhipster/node_modules/yeoman-environment/lib/environment.js:647:19)
    at /home/acosta/Projects/jhipster/generator-jhipster/cli/cli.js:74:31
    [... lines matching original stack trace ...]
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)

[pascalgrimaud]

@yuniel-acosta : do you have a fork of generator-jhipster locally ? If it's the case, you need to use v6.10.1 tag, instead of master. It's because we remove this function for v7
Tell me if you still have problems

[yacosta738]

@pascalgrimaud I finished. I am doing the last tests. What is the next step

[pascalgrimaud]

@yuniel-acosta : open a pull request :)

[yacosta738]

@pascalgrimaud ok, pull request waiting for review