Retour aux articles

Comment configurer un monorepo avec Remix, NestJS et Turborepo

Découvre la stack Remix + NestJS monorepo
2 minutes de lecture- 334 vues

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

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.

Ce framework est full-stack, signifiant que tu n'as pas besoin de configurer un serveur pour ajouter une logique backend. Tu peux appeler une base de donnée, intégrer l'authentification, et plein d'autres fonctionnalités.

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. 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

MAIS c'est terminé ! J'ai découvert une stack qui me permet d'intégrer ce serveur NestJS avec Remix. Cela remplace le serveur de Remix (celui qui faisait les appels à NestJS) par le serveur NestJS, directement.

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.

Et dans cette vidéo d'une heure, je te montre comment j'ai configuré cette stack pour que tu puisses l'utiliser dans tes projets.

Convaincu ? Abonne-toi pour ne rien louper

Tu peux accéder au repository en cliquant sur ce lien

Voici le sommaire de la vidéo :

Articles similaires
Gère les erreurs avec le framework Remix.js
6 minutes de lecture - 326 vuesRemixReactJS

Comment gérer les erreurs avec Remix ? (ErrorBoundary)

Avoir des erreurs Javascript ne fait jamais plaisir. Mais il existe le composant ErrorBoundary). Dans ce guide, tu vas découvrir comment afficher un composant d'erreur personnalisé en pour protéger toutes les pages de ton application.

Rejoins la

newsletter