#ServeStatic seems to no longer working in v11 - Sends out 404 not found

18 messages · Page 1 of 1 (latest)

thin yew
#

Hello,

I recently upgraded NestJS to v11 with fastify.
I serve my react app with the @nestjs/serve-static package.

When I use the url http://localhost:3000 it shows me my app, but if I try to access it from a different url like http://localhost:3000/login it sends me a 404 not found error.

It was falling back to index.html prior upgrade.
It seems to no longer do it. I really don't know how to troubleshoot the issue.

I am not using any global prefix.

Here is my bootstrap:

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter());

  app.enableShutdownHooks();

  app.useGlobalPipes(
    new ValidationPipe({
      whitelist: true,
      transformOptions: {
        exposeUnsetFields: false,
      },
    }),
  );

  await app.register(secureSession, {
    secret: process.env.APPLICATION_SECRET,
    salt: process.env.APPLICATION_SALT,
    cookie: {
      path: '/',
      httpOnly: true,
      maxAge: 365 * 24 * 60 * 60,
    },
  });

  await app.listen(process.env.APPLICATION_PORT, '::');
}

Here is my AppModule:

@Module({
  imports: [
    ConfigModule.forRoot({
      envFilePath: ['.env'],
      isGlobal: true,
      load: [configuration],
    }),
    ScheduleModule.forRoot(),
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '../public'),
    }),
    EventEmitterModule.forRoot(),
    // Other custom modules below...
  ],
  controllers: [],
})
export class AppModule {}

Versions

"@fastify/secure-session": "8.1.1",
"@fastify/static": "8.1.0",
"@nestjs/common": "11.0.8",
"@nestjs/config": "4.0.0",
"@nestjs/core": "11.0.8",
"@nestjs/cqrs": "11.0.1",
"@nestjs/event-emitter": "3.0.0",
"@nestjs/platform-fastify": "11.0.8",
"@nestjs/schedule": "5.0.1",
"@nestjs/serve-static": "5.0.2",
glass kiln
#

so before the upgrade, your app likely fell back to index.html for unknown routes which is typical for spas like reat

#

the upgrade night have changed how @nestjs/serve-static works with fastify

#

so um... jsut i'd like to say to you try explicitly enabling index.html fallback

#

you know, fastify's static plugin doesnt automatically serve index.html for unknow routes in an spa

#

so you need to explicitly tell it to do so

#

update your ServeStaticMoudle config

# 
ServeStaticModule.forRoot({
  rootPath: join(__dirname, '../public'),
  serveRoot: '/', // Ensure it's serving from root
  renderPath: '*', // This will serve index.html for unknown routes
}),
#

or in other way is to use catch-all middleware

#

if the above doesnt work, try adding a global middleware to catch to all routes and serve index.html

# 
import { FastifyInstance } from 'fastify';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter());

  app.use((req, res, next) => {
    if (req.method === 'GET' && !req.url.startsWith('/api')) {
      res.sendFile('index.html', join(__dirname, '../public'));
    } else {
      next();
    }
  });

  await app.listen(process.env.APPLICATION_PORT, '::');
}
#

if then, this ensures that react routes like umm.. /login return index.html instead of a 404

thin yew
#

Thanks for your reply, I tried the ServeStaticModule update, it doesn't work

#

I end up with an internal server error with the middleware, res.sendFile doesn't exist

#

I completely removed ServeStaticModule and registered the fastify static by hand

#

It doesn't work

#

It works for all my assets, the index fallback doesn't work