Simplify intergration of Serenity into an existing NX Project

[omeany]

Hi,

we need a refactoring of the app which makes integration of Serenity more simple for an existing Project with NX+Angular (see also https://nx.dev/ and https://nx.dev/getting-started/nx-and-angular). The idea is to put the components which are currently in the root of app folder into a separate component and a separate module. And inject the menu config, the config and the runtime config into that module.

We have already done that refactoring in our code base and would just give you the changes in some way.
The code of serenity is proprietary, as much as we know. Is it although possible to contribute to serenity or somehow make that refactoring upstream?

Details about why do we need that refactoring:

To

• have the important features of Serenity (especially menu and the theme-settings in dev mode) in the monorepo

• have multiple apps in the monorepo using different theme setup

we had to integrate the components of in the root app directory in a shared library by making not only copy-paste, but also a lot of patching, especially enabling such setup parameters like:

• menu setup (menu config)

• enable topbar (config)

• enable avatar (config)

• toggle breadcrumbs (runtime config)

• user name input (runtime config)

With the refactoring above we also just have to copy-paste the components when serenity updates.

What are possible options for that refactoring?

[omeany]

The idea is to put the components which are currently in the root of app folder into a separate component and a separate module. And inject the menu config, the config and the runtime config into that module.

Not sure if that formulation is clear. So I put an example below.

The separate component would then look e.g. like this:

Code: Select all

import { Component } from '@angular/core';

@Component({
  selector: 'app-shell',
  template: `<app-main></app-main>`,
})
export class AppShellComponent {}

And the separate module would then look e.g. like this:

Code: Select all

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppModule } from './app.module';
import { AppShellComponent } from './app-shell.component';

@NgModule({
  declarations: [
    AppShellComponent,
  ],
  imports: [
    CommonModule,

    AppModule,
  ],
  exports: [
    AppShellComponent,
  ]
})
export class AppShellModule { }

So the module of e.g. our demo app which uses the app shell coming from serenity injects the configurations to that app shell. This module then would look e.g. like this:

Code: Select all

// Angular
@NgModule({
  declarations: [
    AppShellDemoComponent,
  ],
  imports: [
    CommonModule,
    AppShellModule,

    RouterModule.forRoot([{
	// The route configuration of the current app
    },], {scrollPositionRestoration: 'enabled'}),
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    { provide: MENU_CONFIG_TOKEN, useValue: MENU_CONFIG },
    { provide: APP_CONFIG_TOKEN, useValue: APP_CONFIG },
    { provide: AbstractRuntimeConfigService, useClass: RuntimeConfigService },
  ],
  exports: [
    AppShellDemoComponent,
    RouterModule,
  ]
})
export class AppShellDemoModule { }

[yigitfindikli]

The idea is to put the components which are currently in the root of app folder into a separate component and a separate module. And inject the menu config, the config and the runtime config into that module.

Not sure if that formulation is clear. So I put an example below.

The separate component would then look e.g. like this:

Code: Select all

import { Component } from '@angular/core';

@Component({
  selector: 'app-shell',
  template: `<app-main></app-main>`,
})
export class AppShellComponent {}

And the separate module would then look e.g. like this:

Code: Select all

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppModule } from './app.module';
import { AppShellComponent } from './app-shell.component';

@NgModule({
  declarations: [
    AppShellComponent,
  ],
  imports: [
    CommonModule,

    AppModule,
  ],
  exports: [
    AppShellComponent,
  ]
})
export class AppShellModule { }

So the module of e.g. our demo app which uses the app shell coming from serenity injects the configurations to that app shell. This module then would look e.g. like this:

Code: Select all

// Angular
@NgModule({
  declarations: [
    AppShellDemoComponent,
  ],
  imports: [
    CommonModule,
    AppShellModule,

    RouterModule.forRoot([{
	// The route configuration of the current app
    },], {scrollPositionRestoration: 'enabled'}),
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    { provide: MENU_CONFIG_TOKEN, useValue: MENU_CONFIG },
    { provide: APP_CONFIG_TOKEN, useValue: APP_CONFIG },
    { provide: AbstractRuntimeConfigService, useClass: RuntimeConfigService },
  ],
  exports: [
    AppShellDemoComponent,
    RouterModule,
  ]
})
export class AppShellDemoModule { }

Hi,

Our new folder structure and new enhancements are on the way. Our new folder structure and imports are close to your structure. So you won't have any problems with the next releases.

Best Regards.