Démarrage du projet Remix & NestJS : structure et outils

Dans ce module Démarrage du projet Remix & NestJS : structure et outils, vous allez découvrir comment organiser et lancer votre application full-stack. Nous verrons la stack technique, l’architecture générale et la structure des dossiers pour le frontend (Remix) et le backend (NestJS). Vous serez ainsi prêt·e à coder en toute sérénité.

Stack technique

Ce projet s’appuie sur :

Remix pour le rendu côté client et serveur.
NestJS pour construire une API modulable et maintenable.
TypeScript pour la robustesse du typage.
Docker pour uniformiser les environnements.
Socket.IO pour la communication temps réel.
Stripe pour la gestion des paiements.
AWS S3, cronjobs et email pour compléter les fonctionnalités backend.

Tip

Cette combinaison vous permet de monter en compétence sur une stack moderne, évolutive et pleine de bonnes pratiques.

Architecture du projet

Le projet est organisé en deux répertoires principaux à la racine :

tree.txt

1.
2├── backend
3│   ├── src
4│   │   ├── auth
5│   │   ├── chat
6│   │   ├── socket
7│   │   ├── stripe
8│   │   └── user
9│   ├── .env
10│   ├── Dockerfile
11│   └── tsconfig.json
12└── frontend
13    ├── app
14    │   ├── routes
15    │   ├── components
16    │   └── styles
17    ├── remix.config.js
18    ├── package.json
19    └── tsconfig.json

backend/ contient votre API NestJS, organisée en modules (AuthModule, ChatModule, etc.).
frontend/ contient votre app Remix, avec des loaders, des actions et des composants partagés.

Exemple de configuration NestJS

backend/src/app.module.ts

1import { Module } from '@nestjs/common';
2import { ConfigModule } from '@nestjs/config';
3import { AppGateway } from './app.gateway';
4import { AuthModule } from './auth/auth.module';
5import { ChatModule } from './chat/chat.module';
6import { SocketModule } from './socket/socket.module';
7import { StripeModule } from './stripe/stripe.module';
8import { UserModule } from './user/user.module';
9
10@Module({
11  imports: [
12    ConfigModule.forRoot({ isGlobal: true }),
13    UserModule,
14    AuthModule,
15    ChatModule,
16    SocketModule,
17    StripeModule,
18  ],
19  providers: [AppGateway],
20})
21export class AppModule {}

Exemple de loader Remix

app/root.tsx

1export const loader = async ({ request }) => {
2  const user = await getOptionalUser({ request });
3  const env = envSchema.parse({
4    WEBSOCKET_URL: process.env.WEBSOCKET_URL ?? 'ws://localhost:8001',
5  });
6  return json({ user, env });
7};

Note

Dès le démarrage, vous alignez vos configurations frontend et backend pour assurer une communication fluide (URLs, clés, sockets… )

Dans les sections qui suivent, nous décortiquerons chaque partie pour que vous sachiez :

Mettre en place Docker et vos variables d’environnement.
Naviguer et comprendre le monorepo.
Configurer vos modules NestJS et vos routes Remix.
Lancer votre projet en local et y connecter votre client.