Introduction

Pourquoi cette formation Remix.js + NestJS ?

En 4 ans de développement, je n'ai pas encore trouvé une stack qui me plaît. Il y a toujours un élément qui manque (une fonctionnalité, ou une limitation technique).

En tant que développeur fullstack, je souhaite bénéficier du meilleur des deux mondes.

Je souhaite utiliser une technologie :

• simple à utiliser
• qui me permet d'implémenter une fonctionnalité rapidement
• qui me permet d'avoir un contrôle total sur la logique, front comme back

Pourquoi Remix.js ?

Remix répond à mes attentes. C'est un framework frontend qui me permet d'utiliser Javascript et React pour créer des sites web performants et ergonomiques.

Cependant, il n'a pas suffisamment de maturité. Il manque plein de features, comme les middleware (qui sont très utiles pour ne pas recopier la même logique de protection des routes)

J'utilise donc NestJS comme serveur séparé jusqu'à présent.

Pourquoi NestJS ?

Ce framework Node.JS me permet d'utiliser Javascript pour configurer une base de donnée, des routes et toute la logique métier.

Ensuite, j'appelle chaque route dans Remix. Mais c'est sujet à beaucoup d'erreurs d'inattention, ou de perte de synchronisation. J'informe Remix des réponses API de NestJS en déclarant un schéma Zod, qui peut être erroné, et générer des erreurs.

Je perd donc pas mal de temps à :

• déclarer des schémas Zod
• réparer des bugs, erreurs d'inattention
• déclarer des méthodes pour appeler mes routes

Pourquoi un monorepo ?

Utiliser cette stack va t'éviter toutes ces erreurs ! Car tu peux intégrer ce serveur NestJS avec Remix. Cela remplace entièrement le serveur de Remix.

Voici les avantages :

• aucune duplication de code
• aucun schéma zod
• aucun bug de ce style à régler

C'est un gain de temps énorme. Les types seront partagés entre le serveur et le client. Tu pourras même utiliser les mêmes fonctions côté back et front.

Ressources utilisées

• Repository Github
• Documentation de Remix
• Documentation de NestJS
• Documentation de Turborepo
• Documentation de Prisma
• Formation vidéo sur YouTube

Présentation de la stack technique

Nous allons utiliser les technologies suivantes pour créer notre application :

Frontend

• Remix
• React
• ShadcnUI
• TailwindCSS
• Conform

Backend

• NestJS
• Prisma ORM
• Redis
• Passport.js
• express-session

Librairies communes

• Turborepo
• Typescript
• Zod

Qualité de code

• Prettier
• Eslint

Déploiement

• Github Actions
• VPS (serveur hébergé) chez Hostinger
• Caddy Server
• Docker