Исключая все / api маршруты в Nest.js для обслуживания приложения React - PullRequest
Новая
       17

Исключая все / api маршруты в Nest.js для обслуживания приложения React

1 голос
/ 25 марта 2019

Я разрабатываю серверную часть в Nest.js, которая должна обслуживать React, сгенерированный index.html на всех маршрутах корневого уровня (/about, /contact-us и т. Д.), Но не на тех, которые начинаются с /api.Это то, что я сейчас делаю в AppController: 

@Get('/')
@Get('/contact')
@Get('/about-us')
fileServingRoutes(@Res() res: Response) {
  return res.sendFile('index.html', { root: AppModule.getStaticAssetsRootPath() });
}

Есть ли способ сделать это, не задавая вручную все маршруты, которые должны отправить файл обратно?

Ответы [ 2 ]

1 голос
/ 26 марта 2019

Я немного изменил решение Kim для своих нужд (я использую версию 5.8.0), поэтому в случае, если вы получите ошибку, что ваше промежуточное ПО не реализует интерфейс NestMiddleware должным образом (из-за метода resolve), Вы можете использовать функциональное промежуточное ПО ; 

export function FrontendMiddleware(req, res, next) {
  const { baseUrl } = req;
  if (baseUrl.indexOf('/api') === 0) {
    next();
  } else {
    res.sendFile(<path to your index.html file>);
  }
}

Я также использовал baseUrl вместо url свойства, которое возвращало /, когда я пытался получить доступ к /api маршруту.

1 голос
/ 25 марта 2019

Я бы рекомендовал следовать замечательной статье Бо об обслуживании СПА.Настройка имеет в виду Angular, но для приложения React то же самое.

Gist

Определите функцию промежуточного программного обеспечения, которая перенаправляет все маршруты, кроме /api, на ваш index.html. 

@Middleware()
export class FrontendMiddleware implements NestMiddleware {
  use(req, res, next) {
    const { url } = req;
    if (url.indexOf('/api') === 1) {
      next();
    } else {
      res.sendFile(resolvePath('index.html'));
    }
  }
}

Зарегистрируйте его для всех маршрутов в вашем AppModule: 

export class ApplicationModule implements NestModule {
  configure(consumer: MiddlewaresConsumer): void {
    consumer.apply(FrontendMiddleware).forRoutes(
      {
        path: '/**',
        method: RequestMethod.ALL,
      },
    );
  }
}
...