NestJS deliver static files based on language of browser

Question

Nestjs should deliver an Angular application based on the language defined in the browser.

The Angular application is located on dist/public/en or dist/public/de.

If the user is accessing / with an English browser, nestjs should deliver files from folder dist/public/en. The path in the browser should point in this case to fqdn/en/.

I already use this with single language Angular App:

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, 'public'));
  await app.listen(process.env.PORT || 3000);
}
bootstrap();

I also had a look into i18next which looks promising.

But I'm not really sure if this is the right direction to go.

Any tip is warmly welcome.

Answer 1

Better than serving your dist folder statically would be to redirect all non-api routes to index.html so that your Angular SPA can take care of the routing. See this answer for more details.

---

You can adapt the middleware from the linked answer above by taking the factors into account with which you want to detect the user's language e.g. the ACCEPT-LANGUAGE header or a certain cookie:

@Middleware()
export class FrontendMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: Function) {
    // Some way of detecting the user's language
    const languages = req.header('ACCEPT-LANGUAGE') || 'en-US';

    if (languages.contains('de-DE')) {
      res.sendFile(join(__dirname, 'public', 'de' ,'index.html'));
    } else {
      res.sendFile(join(__dirname, 'public', 'en', 'index.html'));
    }
  }
}