CODEWITHSUNDEEP
angulartypescriptroutesnestjsfastify
jcorekinASRC
jcorekinASRC

Reputation: 21

Routing Issue when using static content (Angular 8) with NestJS and Fastify

I've been searching for the last several days for a way to fix a routing issue when using static content with NestJS and Fastify. Specifically I am trying to use Angular 8 hosted by NestJS with Fastify under the hood. I've been following the example given in by the tutorial: https://www.djamware.com/post/5d2898430707cc5968d9d57f/build-a-web-app-using-nestjs-fastify-mongodb-and-angular-8

The issue is that if you try to navigate directly to a specific URL, such as http://localhost:3000/articles, the Fastify server responds with a JSON string containing a 404 error message. I've narrowed down the issue to something specifically problematic with Fastify by cloning the tutorial's GitHub repo and doing nothing more to it than is required to replace Fastify with Express, which does work.

I'm posting my code in the hope that someone can tell me what I am doing wrong. I'd like to use Fastify instead of Express, because if the speed claims are accurate I could really use the increased performance. I've left the commented out code that I used to switch the project of Express. Thank you to anyone who takes the time to look this over and even try to help.

EDIT: I just realized that I forgot to provide a link to the GitHub repo, here it is: https://github.com/didinj/nestjs-fastify-mongodb-angular8.git

main.ts

import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { AppModule } from './app.module';
import { join } from 'path';


async function bootstrap() {
  // const app = await NestFactory.create(AppModule);

  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter({
      wildcard: false,
      logger: {
        level: 'trace',
        file: '/Users/jcorekin/fastify.log' // Will use pino.destination()
      }
    }),
  );
  app.useStaticAssets({
    root: join(__dirname, '../client/dist/
  });

  await app.listen(3000, '0.0.0.0');
}
bootstrap();

app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ArticleModule } from './article/article.module';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: 
  [
    // ArticleModule,
    // ServeStaticModule.forRoot({
    //   rootPath: join(__dirname, '../client/dist/client'),
    // }),
  ],
  // controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

app.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}

Upvotes: 2

Views: 1118

Answers (1)

Adam Pine
Adam Pine

Reputation: 387

I found a solution, but annoyingly it requires replacing Fastify with Express. It seems that Fastify has some issues with routing.

main.ts

import { NestExpressApplication } from '@nestjs/platform-express';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.setGlobalPrefix('api');
  await app.listen(3000);
}
bootstrap();

app.module.ts

import { CommentModule } from './comment/comment.module';
import { Module, HttpModule } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ProfessorModule } from './professor/professor.module';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', '..', 'client/dist/client'),
    }),
    HttpModule,
    ...
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

I really wanted to keep Fastify, but I spent the whole day today trying to figure out why the routing was broken, when I could simply change to express and it works perfectly!

I will also admit that I didn't try this exact solution with fastify, so it may work with fastify, if you just keep the old fastify app creation code, get rid of that weird "useStaticAssets" call, and just use serve-static on app.module.ts

Upvotes: 1

Related Questions