Configuration du projet NestJS

Nous configurons un nouveau projet NestJS ainsi que l'adapter Remix pour servir toutes nos routes.

3 min read

Configuration du projet

Commençons par créer un nouveau dossier qui va contenir nos deux projets.

Terminal
1
mkdir ~/stack-remix-nestjs # Créer un dossier nommé stack-remix-nestjs à la racine de votre dossier personnel

Nous allons d'abord créer le projet NestJS, qui va se charger par la suite d'exécuter le code source de Remix.

Terminal
1
 nest new backend # Crée un projet NestJS nommé backend

Nous utiliserons npm comme package manager.

Nous allons ensuite ouvrir le dossier stack-remix-nestjs dans un éditeur de code (personnellement, j'utilise VSCode).

Configuration de NestJS

Une fois ouvert, notre interface ressemble à ceci

éditeur de code VSCode avec NestJS d'ouvert

Nous pouvons supprimer le fichier src/app.controller.spec.ts et le dossier test car nous n'en aurons pas besoin.

Création du RemixController

À l'intérieur du fichier src, nous allons créer un dossier nommé remix et à l'intérieur de ce dossier, un fichier remix.controller.ts.

Nous allons créer une route catch-all, qui va rediriger toutes les requêtes vers l'application Remix. (Nous verrons plus tard comment configurer Remix pour qu'il puisse gérer ces requêtes).

src/remix/remix.controller.ts
1
import { All, Controller, Next, Req, Res } from '@nestjs/common';

2
import { createRequestHandler } from '@remix-run/express';

3
import { NextFunction, Request, Response } from 'express';

4


5
@Controller()

6
export class RemixController {

7
	constructor() {}

8


9
	@All('*')

10
	async handler(

11
		@Req() request: Request,

12
		@Res() response: Response,

13
		@Next() next: NextFunction

14
	) {

15
		// Pour le moment, on ne fait rien.

16
	}

17
}

Nous allons installer une dépendance supplémentaire pour servir l'application Remix.

Configuration de l'adapter Remix

Nous allons installer la librairie @remix-run/express dans notre projet NestJS.

Terminal
1
cd backend # Pour se déplacer dans le dossier backend

2
npm install @remix-run/express # Pour installer l'adapter Remix

Cette librairie va nous permettre de communiquer avec l'application Remix depuis NestJS.

Modifions le controlleur pour ajouter le handler de Remix.

src/remix/remix.controller.ts
1
import { All, Controller, Next, Req, Res } from '@nestjs/common';

2
import { createRequestHandler } from '@remix-run/express';

3
import { NextFunction, Request, Response } from 'express';

4


5
@Controller()

6
export class RemixController {

7
	constructor() {}

8


9
	@All('*')

10
	async handler(

11
		@Req() request: Request,

12
		@Res() response: Response,

13
		@Next() next: NextFunction

14
	) {

15
		return createRequestHandler({

16
			build: '', // <= TODO: Nous devons définir le chemin du build de Remix

17
			getLoadContext: () => ({

18
				toto: 'Salut, ça va ?',

19
			}),

20
		})(request, response, next);

21
	}

22
}

N'oublions pas d'importer ce contrôleur dans le fichier app.module.ts, pour qu'il soit détecté par NestJS.

src/app.module.ts
1
import { Module } from '@nestjs/common';

2
import { RemixController } from './remix/remix.controller';

3


4
@Module({

5
	imports: [],

6
	controllers: [RemixController],

7
	providers: [],

8
})

9
export class AppModule {}

Maintenant, on a besoin de générer le build de l'application Remix pour le servir depuis NestJS.