Streamlining Development with `nestjs-ember-static`

When working on multiple projects, I kept running into the same challenge: serving EmberJS SPAs within a NestJS backend. The existing @nestjs/serve-static module didn't quite cut it, so I created nestjs-ember-static.

Why nestjs-ember-static?

Live Reloading:
Keep your development smooth with live reloading, so you see changes instantly.

Config Injection:
Inject configuration directly into the index.html file, allowing dynamic adjustments.

Perfect for Mono Repositories:
Easily manage both front-end and back-end codebases in a single repository.

Easy Setup

Basic Configuration:

import { Module } from '@nestjs/common';
import { join } from 'path';
import { EmberModule } from 'nestjs-ember-static';

@Module({
  imports: [
    EmberModule.forRoot({
      rootPath: join(__dirname, '../frontend/dist'),
    }),
  ],
})
export class AppModule {}

Advanced Configuration:

import { Module } from '@nestjs/common';
import { join } from 'path';
import { EmberModule } from 'nestjs-ember-static';
import { ConfigService } from '@nestjs/config';

@Module({
  imports: [
    EmberModule.forRootAsync({
      useFactory: async (configService: ConfigService) => {
        const env = configService.get('env', { infer: true });
        return {
          rootPath: env['name'] === 'development'
            ? join(env['appRoot'], '../frontend/dist')
            : join(env['appRoot'], 'client'),
        };
      },
      inject: [ConfigService],
    }),
  ],
})
export class AppModule {}

Custom Inject Helpers

Make custom changes to your HTML with inject helpers:

export abstract class AbstractInjectionHelper {
  public abstract process(htmlElement: HTMLElement): void;
}

export class TitleInjectionHelper extends AbstractInjectionHelper {
  constructor(private title: string) {
    super();
  }

  public process(htmlElement: HTMLElement): void {
    htmlElement.querySelector('title')!.textContent = this.title;
  }
}

Conclusion

nestjs-ember-static makes developing with EmberJS and NestJS easier by providing live reloading, config injection, and is perfect for mono repositories. Give it a try to streamline your development process!

Check it out on npm.