[{"_1":2,"_810":-5,"_811":-5},"loaderData",{"_3":4,"_243":244,"_788":789},"root",{"_5":6,"_7":8,"_15":-5,"_16":17,"_196":197,"_214":215,"_216":217,"_230":-5,"_231":232},"isDev",false,"honeypotInputProps",{"_9":10,"_11":12,"_13":14},"nameFieldName","name__confirm","validFromFieldName","from__confirm","encryptedValidFrom","4TkfO8C9g4GfqsmkopMIkWVvVc8N7rf+nv2AMahhbQPXMO5zS26H6gU=","toastItem","latestArticles",{"_18":19,"_37":137},"articles",{"_18":20,"_129":130},[21,77,99],{"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_48":49,"_53":54,"_57":58,"_55":56,"_67":68},"published",true,"id","cmayadxmp0004pu2e6tic9ost","title","Quel ordinateur choisir pour coder en 2025 ?","slug","quel-ordinateur-choisir-pour-coder-en-2025-guide-complet-pour-debutants-en-developpement-web","description","Choisir le bon ordinateur est une étape essentielle quand on débute en développement web. Pas besoin d’un matériel ultra-performant, mais il faut un équipement fiable et adapté à vos besoins pour coder efficacement et progresser sans frustration. Dans cet article, je vous aide à choisir l’ordinateur idéal, que vous soyez étudiant, débutant ou en reconversion.","datePublished",["D",1747785600000],"content","## 1. PC, Mac ou Linux : quel système choisir ?\n\n* **PC Windows** : très répandu, souvent moins cher, compatible avec la majorité des logiciels et outils de développement. Idéal pour débuter avec un bon rapport qualité-prix.\n* **Mac** : apprécié des développeurs pour sa stabilité et son environnement Unix natif, pratique pour coder. Plus cher, mais souvent recommandé pour certains types de développement (iOS, macOS).\n* **Linux** : système open-source, très apprécié des développeurs avancés. Moins courant pour les débutants car nécessite un peu plus d’apprentissage.\n\nSi vous débutez, un PC Windows ou un Mac récent suffira largement.\n\n## 2. Les caractéristiques techniques importantes\n\nPour coder confortablement, certaines caractéristiques matérielles sont essentielles :\n\n* **Processeur (CPU)** : privilégiez au minimum un Intel i5 ou équivalent AMD Ryzen 5. Un processeur plus puissant accélère les compilations et exécutions.\n* **Mémoire RAM** : 8 Go est le minimum recommandé. Pour travailler sur plusieurs projets ou machines virtuelles, 16 Go est idéal.\n* **Stockage** : un disque SSD (256 Go ou plus) est essentiel pour la rapidité du système et des logiciels. Évitez les disques durs mécaniques lents.\n* **Écran** : un écran de 14 à 15 pouces avec une bonne résolution (Full HD minimum) est confortable pour coder plusieurs heures. Pour plus de confort, un deuxième écran peut être ajouté.\n* **Clavier et autonomie** : un clavier agréable et une bonne autonomie (au moins 6 heures) sont importants si vous travaillez souvent en déplacement.\n\n## 3. Ordinateurs recommandés pour débuter en développement web\n\nVoici quelques modèles adaptés selon votre budget :\n\n* **Entrée de gamme (moins de 700 €)** : Lenovo IdeaPad, Acer Aspire avec i5, 8 Go RAM, SSD 256 Go.\n* **Milieu de gamme (700–1200 €)** : Dell Inspiron, HP Pavilion, MacBook Air M1 (modèle 2020) pour un bon compromis performance/portabilité.\n* **Haut de gamme (plus de 1200 €)** : MacBook Pro, Dell XPS, Razer Blade, pour les développeurs qui souhaitent investir dans un matériel durable et puissant.\n\n## 4. Pourquoi ne pas prendre un ordinateur trop puissant au départ ?\n\nPour un débutant, investir dans un ordinateur très cher n’est pas toujours nécessaire. L’essentiel est d’avoir une machine fiable qui tourne bien avec les outils de base (VS Code, navigateurs, terminal). Vous pourrez toujours upgrader ou changer plus tard selon vos besoins.\n\n## 5. Accessoires utiles pour coder confortablement\n\n* **Souris ergonomique** : pour éviter les douleurs au poignet.\n* **Support ordinateur portable** : pour une meilleure posture.\n* **Disque dur externe ou clé USB** : pour sauvegarder vos projets.\n* **Casque audio** : idéal pour se concentrer en environnement bruyant.\n\n## Conclusion : faites un choix adapté à vos besoins et à votre budget\n\nChoisir un ordinateur pour coder ne doit pas être un casse-tête. Commencez par un PC ou Mac avec au moins 8 Go de RAM, un processeur i5 ou Ryzen 5, et un SSD rapide. Pensez aussi au confort d’utilisation avec un bon écran et clavier.\n\nPour aller plus loin, retrouvez mes conseils en vidéo sur ma chaîne YouTube[ Virgile Rietsch](https://www.youtube.com/@Virgile-Rietsch) et découvrez mes ressources sur[ Algomax.fr](https://algomax.fr/).","youtubeVideo","categories",[39,42,45],{"_24":40,"_26":41},"cma0ygz000008yk67urmvvgxl","Docker",{"_24":43,"_26":44},"cma0ygyuu0003yk679pggj8v0","NestJS",{"_24":46,"_26":47},"cma0ygyss0001yk67s6tvyf8q","ReactJS","author",{"_24":50,"_51":52},"cma0ygz43000byk6730758t6t","name","Algomax","_count",{"_55":56},"views",1,"readTime",{"_59":60,"_61":62,"_63":64,"_65":66},"text","3 min read","minutes",2.57,"time",154200,"words",514,"featuredImage",{"_69":70,"_71":72,"_73":74,"_75":76},"url","https://algomax-public.s3.eu-west-3.amazonaws.com/45d6e322-e186-4d34-b5ea-c3df39ae91bd.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=7218a6d8d559b0daaf9a97c956dd241e33b43aef96ba041bbd5074e288fffb36&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","alt","Quel ordinateur choisir pour coder en 2025 ? Guide complet pour débutants en développement web","width",1200,"height",675,{"_22":23,"_24":78,"_26":79,"_28":80,"_30":81,"_32":82,"_34":83,"_36":-5,"_37":84,"_48":88,"_53":89,"_57":90,"_55":56,"_67":95},"cmaya7b3k0003pu2ew8l9fghm","Comment devenir développeur web : le guide complet pour bien démarrer en 2025","comment-devenir-developpeur-web-:-le-guide-complet-pour-bien-demarrer-en-2025","Découvrez comment devenir développeur web facilement en 2025 grâce à ce guide complet. Matériel, formations, technologies clés, conseils pratiques et astuces pour débuter et réussir dans le développement web.",["D",1747785600000],"## 1. Le matériel et les équipements indispensables pour coder efficacement\n\nPour bien débuter en développement web, un matériel adapté est essentiel. Pas besoin d’ordinateur très puissant, mais certaines caractéristiques facilitent le travail :\n\n* **Un ordinateur avec au moins 8 Go de RAM**, capable de faire tourner un éditeur de code (Visual Studio Code), un navigateur web, et d’autres outils simultanément.\n* **Une connexion internet stable** pour accéder aux ressources en ligne, suivre des tutoriels et tester vos projets sur le web.\n* **Un éditeur de code gratuit et performant**, comme Visual Studio Code, qui offre de nombreuses extensions pour les débutants et les professionnels.\n* **Un navigateur moderne** (Chrome, Firefox, Edge) équipé d’outils de développement pour tester et déboguer vos sites.\n\nPour plus d’informations sur le matériel, consultez notre article détaillé [Quel ordinateur choisir pour coder ?.](https://algomax.fr/blog/quel-ordinateur-choisir-pour-coder-en-2025-guide-complet-pour-debutants-en-developpement-web \"Ordinateur débutant\")\n\n## 2. Les meilleures formations pour apprendre le développement web en 2025\n\nLe développement web peut s’apprendre de plusieurs façons :\n\n* **Formations gratuites en ligne** : plateformes comme FreeCodeCamp, OpenClassrooms ou Codecademy proposent des cours complets pour maîtriser HTML, CSS et JavaScript, sans dépenser un centime.\n* **Formations diplômantes et bootcamps intensifs** : pour ceux qui veulent un apprentissage encadré, des diplômes comme le BTS Services Informatiques ou des bootcamps (Le Wagon, Ironhack) sont de bonnes options pour entrer rapidement sur le marché du travail.\n* **Auto-apprentissage et ressources complémentaires** : ma chaîne YouTube Algomax vous propose des tutoriels pas à pas pour progresser à votre rythme.\n\nN’hésitez pas à combiner plusieurs ressources pour un apprentissage efficace.\n\n## 3. Les technologies incontournables pour débuter en développement web\n\nPour bien débuter, il est important de maîtriser ces technologies de base :\n\n* **HTML** : structure de base des pages web.\n* **CSS** : styles et mise en forme.\n* **JavaScript** : interactivité et dynamisme.\n* **Git et GitHub** : gestion de version et collaboration.\n\nUne fois ces bases acquises, explorez les frameworks modernes comme **React** pour le front-end ou **Node.js** pour le back-end, très demandés par les recruteurs.\n\n## 4. Comment se lancer concrètement : conseils pratiques pour débutants\n\n* **Réalisez vos premiers projets** : créez un portfolio en ligne, un site vitrine, ou une petite application web pour mettre en pratique vos connaissances.\n* **Pratiquez tous les jours** : même 30 minutes par jour peuvent faire une grande différence. La régularité est clé pour progresser rapidement.\n* **Rejoignez des communautés en ligne** : forums, groupes Facebook, serveurs Discord dédiés au développement web sont d’excellents moyens d’échanger et de trouver du soutien.\n* **Cherchez des expériences professionnelles** : stages, missions freelance, ou contributions open source renforceront votre CV et votre expérience.\n\n## 5. Surmonter les difficultés du développement web : astuces et motivation\n\nLe chemin vers le métier de développeur web comporte des obstacles :\n\n* **Comprendre les concepts complexes** : fonctions, objets, API peuvent sembler difficiles, mais avec de la patience et de la pratique, ils deviennent accessibles.\n* **Faire face aux bugs** : les erreurs sont inévitables. Apprenez à utiliser les outils de débogage et à chercher des solutions sur internet.\n* **Maintenir la motivation** : fixez-vous des objectifs réalisables, suivez vos progrès et n’hésitez pas à demander de l’aide. La persévérance est la clé de la réussite.\n\n## Conclusion : lancez-vous dans le développement web dès aujourd’hui !\n\nLe développement web est un métier accessible à tous ceux qui ont la curiosité et la motivation d’apprendre. Avec le bon matériel, des formations adaptées, une pratique régulière, et une bonne dose de patience, vous pouvez rapidement devenir développeur web.\n\nPour continuer votre apprentissage, rendez-vous sur[ Algomax.fr](https://algomax.fr/), où vous trouverez des ressources, des tutoriels, et des conseils pour progresser. N’oubliez pas de vous abonner à ma chaîne YouTube[ Virgile Rietsch](https://www.youtube.com/@Virgile-Rietsch) pour suivre mes vidéos pas à pas.\n\nChaque ligne de code vous rapproche un peu plus de votre objectif : lancez-vous dès maintenant !",[85],{"_24":86,"_26":87},"cma0ygz0z0009yk67nztcrh2s","Terminal",{"_24":50,"_51":52},{"_55":56},{"_59":91,"_61":92,"_63":93,"_65":94},"4 min read",3.23,193800,646,{"_69":96,"_71":79,"_73":97,"_75":98},"https://algomax-public.s3.eu-west-3.amazonaws.com/2cf18040-41f4-49e2-8acb-f4657f145f38.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=3ad323e6f0f4d77889fd131bf373fd8ce624e024b91acf23213b9c18a83bcd89&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",6000,4001,{"_22":23,"_24":100,"_26":101,"_28":102,"_30":103,"_32":104,"_34":105,"_36":-5,"_37":106,"_48":114,"_53":117,"_57":119,"_55":118,"_67":124},"cma0ygz5s000dyk67f34wo2ts","Les 10 meilleurs hooks avec React Router 7 (anciennement Remix)","les-10-meilleurs-hooks-avec-react-router-7-anciennement-remix","Voici 10 hooks que j'utilise le plus dans mes applications Remix / React Router 7. ",["D",1736640000000],"Dans cet article, je partage avec vous mes **hooks** préférés pour [React Router 7](https://reactrouter.com/) (anciennement [Remix](https://remix.run)), que j’utilise dans quasiment tous mes projets.\n\n## 1. useOptionalUser\n\nC'est le hook que j'utilise le plus. Il permet de récupérer les informations optionnelles d'un utilisateur. Pour le faire fonctionner, il suffit de renvoyer un utilisateur dans le fichier `app/routes/root.tsx` (fichier racine d'une application Remix). Toute donnée chargée dans `root` est présente partout dans l'application (comme un contexte global).\n\n```tsx\nuseOptionalUser.tsx\nimport { useRouteLoaderData } from \"@remix-run/react\";\nimport type { loader } from \"app/root\";\n\nexport const useOptionalUser = () => {\n const data = useRouteLoaderData(\"root\");\n if (data?.user) {\n return data.user;\n }\n return null;\n};\n\nexport function useUser() {\n const maybeUser = useOptionalUser();\n if (!maybeUser) {\n throw new Error(\n \"No user found in root loader, but user is required by useUser. If user is optional, try useOptionalUser instead.\",\n );\n }\n return maybeUser;\n}\n```\n\nComme on utilise le type générique du hook `useRouteLoaderData`, ce hook renvoie une donnée typée. Merci Typescript !\n\n> Notez que l'on exporte également un hook `useUser` qui exploite le hook `useOptionalUser`, mais qui renvoie une erreur en cas d'utilisateur déconnecter. Cela permet de protéger les pages côté client en renvoyant une erreur en cas d'utilisateur non identifié.\n\n## 2. useTailwindScreenSizes\n\nJ'utilise ce hook pour afficher un bandeau indiquant la taille d'écran active de TailwindCSS. Ces dimensions utilises les valeurs par défaut, qu'on retrouve dans la [documentation officielle de TailwindCSS](https://tailwindcss.com/docs/responsive-design) \n\n```tsx\nuseTailwindScreenSizes\nimport React from \"react\";\n\nexport const useTailwindScreenSizes = ({\n initialWidth = 1280,\n}: {\n initialWidth?: number;\n}) => {\n const [currentWidth, setCurrentWidth] = React.useState(initialWidth);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleScreenResize = () => {\n const width = window.innerWidth;\n setCurrentWidth(width);\n };\n handleScreenResize();\n\n window.addEventListener(\"resize\", handleScreenResize);\n return () => {\n window.removeEventListener(\"resize\", handleScreenResize);\n };\n }, []);\n\n const getResponsive = () => {\n if (currentWidth > 1536) {\n return \"2xl\";\n }\n\n if (currentWidth > 1280) {\n return \"xl\";\n }\n\n if (currentWidth > 1024) {\n return \"lg\";\n }\n\n if (currentWidth > 768) {\n return \"md\";\n }\n if (currentWidth > 640) {\n return \"sm\";\n }\n\n return \"very small\";\n };\n return { currentWidth, getResponsive };\n};\n```\n\nJ'appelle ensuite ce hook dans un composant nommé `DevTool` que je place de manière absolue. Dans le fichier `root` par exemple.\n\n```tsx\nDevtool.tsx\nimport { useIsClient } from \"hooks/useIsClient.tsx\";\nimport { useTailwindScreenSizes } from \"hooks/useTailwindScreenSizes.tsx\";\n\nconst Devtool = ({\n initialScreenWidth = 1280,\n}: {\n initialScreenWidth?: number;\n}) => {\n const { currentWidth, getResponsive } = useTailwindScreenSizes({\n initialWidth: initialScreenWidth,\n });\n\n const isClient = useIsClient();\n if (!isClient) return null;\n return (\n \n {currentWidth}\n {getResponsive()}\n \n );\n};\n\nexport default Devtool;\n```\n\n## 3. useIsClient\n\nCe hook utilise-lui même un hook nommé `useIsClient`, n'affichant rien côté serveur (on affiche ce composant côté client).\n\n```tsx\nuseIsClient.tsx\nimport { useEffect, useState } from \"react\";\n\nexport function useIsClient() {\n const [isClient, setClient] = useState(false);\n\n useEffect(() => {\n setClient(true);\n }, []);\n\n return isClient;\n}\n```\n\n## 4. useGetUserPosition\n\nAvez-vous déjà eu besoin de connaître la position géographique des utilisateurs de votre site ? On parle ici de *latitude* et *longitude*, qui permettent de calculer la distance kilométrique entre deux points. \n\nC'est notamment utile pour géolocaliser l'utilisateur et lui proposer des données locales (c'est utilisé sur [Leboncoin](https://leboncoin.fr), [Airbnb](https://airbnb.com), [Uber](https://uber.com) ... \n\nJ'ai utilisé ce hook pour la recherche d'adresse de [GoodCollect](https://goodcollect.co).\n\n```tsx\nuseGetUserPosition.tsx\nimport { useState } from \"react\";\nimport { useToast } from \"components/shadcn-ui/use-toast.ts\";\n\nexport const useGetUserPosition = ({\n successFn = () => {},\n}: {\n successFn?: ({ lat, lng }: { lat: number; lng: number }) => void;\n}) => {\n const [latLng, setLatLng] = useState<{\n loading: boolean;\n latitude: number | null;\n longitude: number | null;\n canGeoLocate: boolean;\n }>({\n loading: false,\n latitude: null,\n longitude: null,\n canGeoLocate: true,\n });\n\n const { toast } = useToast();\n\n const getUserPosition = () => {\n if (!navigator.geolocation) {\n setLatLng((oldValues) => ({\n ...oldValues,\n canGeoLocate: false,\n }));\n return;\n }\n setLatLng((oldValues) => ({ ...oldValues, loading: true }));\n\n navigator.geolocation.getCurrentPosition(\n (position) => {\n const { latitude, longitude } = position.coords;\n\n setLatLng((oldValues) => ({\n ...oldValues,\n latitude,\n longitude,\n loading: false,\n }));\n\n successFn?.({ lat: latitude, lng: longitude });\n },\n (error) => {\n if (error.PERMISSION_DENIED) {\n toast({\n description:\n \"Votre navigateur n'a pas les permissions pour vous localiser. Vous pouvez l'activer dans les paramètres de votre navigateur.\",\n variant: \"error\",\n });\n } else if (error.TIMEOUT) {\n toast({\n description:\n \"La géolocalisation a pris trop de temps. Veuillez réessayer.\",\n variant: \"error\",\n });\n } else if (error.POSITION_UNAVAILABLE) {\n toast({\n description:\n \"Votre position n'a pas pu être déterminée. Veuillez réessayer.\",\n variant: \"error\",\n });\n } else {\n toast({\n description: \"Une erreur est survenue. Veuillez réessayer.\",\n variant: \"error\",\n });\n }\n setLatLng((oldValues) => ({\n ...oldValues,\n loading: false,\n }));\n },\n {\n timeout: 10_000,\n enableHighAccuracy: true,\n maximumAge: 60_000, // 60 seconds\n },\n );\n };\n return { getUserPosition, latLng };\n};\n```\n\nCe hook renvoie les valeurs suivantes : \n\n- la latitude et longitude\n- est-ce que l'utilisateur a accepté d'être géolocalisé / est-ce qu'il peut être géolicalisé\n- est-ce que la géolocalisation est en cours (booléen *loading*)\n\nPour connaître la position, nous utilisons l'API native `navigator.geolocation.getCurrentPosition`. \n\nCe hook utilise également le hook `useToast` qui est entièrement facultatif, et qui permet d'afficher une alerte en cas d'erreur. Ce hook est fourni avec le composant [toast](https://ui.shadcn.com/docs/components/toast) de la librairie **shadcn/ui**.\n\n## 6. useFileUpload\n\nCe hook permet d'afficher un fichier chargé depuis un *input* de type `file`. Le code est à adadpté à votre cas d'utilisation. Le cas d'utilisation n'accepte que les fichiers images ou de type PDF.\nIl met à disposition plusieurs propriétés pour réinitialiser l'input, afficher le fichier et savoir si c'est une image.\n\n```tsx\nuseFileUpload.tsx\nimport React from \"react\";\n\n// Takes a file path and returns the file name and extension\nconst checkFilenameFormat = ({\n fileName,\n allowedFormats = [\"jpg\", \"jpeg\", \"png\", \"heif\", \"avif\", \"webp\", \"pdf\"],\n}: {\n fileName: string;\n allowedFormats?: string[];\n}) => {\n const fileExtension = fileName.split(\".\").pop() || \"\"; // remove the dot\n\n // Only allow image files\n const isFormatAllowed = allowedFormats.includes(fileExtension);\n const isImage = fileExtension !== \"pdf\";\n return { isImage, isFormatAllowed, fileExtension };\n};\n\nexport const useFileUpload = () => {\n const [fileUpload, setFileUpload] = React.useState(null);\n const [documentPreview, setDocumentPreview] = React.useState(\n null,\n );\n\n interface HtmlFormElement extends HTMLInputElement {\n files: FileList;\n }\n const handleFileUpload = (e: React.ChangeEvent) => {\n const [file] = e.target.files || [];\n if (file) {\n setFileUpload(file);\n } else {\n setFileUpload(null);\n }\n };\n\n const isFileImage = React.useMemo(() => {\n if (!fileUpload) return null;\n const fileFormat = checkFilenameFormat({\n fileName: fileUpload?.name || \"\",\n });\n return fileFormat.isImage;\n }, [fileUpload]);\n\n // This create a preview of the file, as a URL\n React.useEffect(() => {\n if (!fileUpload) return;\n const objectUrl = URL.createObjectURL(fileUpload);\n setDocumentPreview(objectUrl);\n\n return () => URL.revokeObjectURL(objectUrl);\n }, [fileUpload]);\n\n const resetFileUpload = () => {\n setFileUpload(null);\n setDocumentPreview(null);\n };\n\n return {\n isFileImage,\n documentPreview,\n setFileUpload,\n fileUpload,\n handleFileUpload,\n resetFileUpload,\n };\n};\n```\n\nIl suffit de l'utiliser avec input de type \"file\" pour le faire fonctionner.\n\n```tsx\nconst { documentPreview, handleFileUpload, isFileImage, resetFileUpload } =\n useFileUpload();\n \n\n```\n\n## 7. useAddressCombobox\n\nJ'ai découvert ce hook en lisant l'article de [Kent C. Dodds](https://kentcdodds.com/) nommé [Full Stack Components](https://www.epicweb.dev/full-stack-components). \nDedans, il nous explique la notion de composant full-stack : On déclare une route, mais au lieu de renvoyer une vue directement, nous exportons depuis cette route un hook, qui est typé et que nous pouvons ensuite utiliser partout.\n\nParfait pour un *combobox* d'adresse autocomplétée par exemple. Je l'ai adaptée pour utiliser l'API de Google ([Places API](https://developers.google.com/maps/documentation/places/web-service/overview)) et obtenir l'auto-complétion des adresses.\n\nCe hook nécessite de télécharger deux librairies pour fonctionner :\n\n- [Downshift](https://www.downshift-js.com/), une librairie que Kent a lui-même mis en place lors de sa mission à Paypal\n- [spin-delay](https://github.com/smeijer/spin-delay) pour afficher un spinner (suffisamment longtemps lors des petits chargements)\n\n```tsx\nuseAddressCombobox\nimport { useFetcher, useSearchParams } from \"@remix-run/react\";\nimport { useCombobox } from \"downshift\";\nimport { useEffect, useId, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { AddressComboboxType } from \"routes/get-address\";\nimport { useSpinDelay } from \"spin-delay\";\n\nexport const useAddressCombobox = ({\n defaultAddress = null,\n defaultPlaceId = null,\n onAddressChange,\n}: {\n defaultAddress?: string | null;\n defaultPlaceId?: string | null;\n onAddressChange?: ({\n address,\n placeId,\n }: {\n address: string;\n placeId: string;\n }) => void;\n}) => {\n const addressFetcher = useFetcher();\n const addressAvailabilityFetcher = useFetcher();\n\n const id = useId();\n const addresses = addressFetcher.data?.addresses ?? [];\n type AddressType = (typeof addresses)[number];\n const [selectedAddress, setSelectedAddress] = useState<\n null | undefined | AddressType\n >({\n address: defaultAddress ?? \"\",\n id: defaultPlaceId ?? \"\",\n });\n // An errored address is an address that was suggested by Google, but that is not associated with a zipcode.\n const [searchParams] = useSearchParams();\n\n const cb = useCombobox({\n id,\n\n onSelectedItemChange: ({ selectedItem }) => {\n setSelectedAddress(selectedItem);\n },\n items: addresses,\n itemToString: (item) => (item ? item.address : \"\"),\n defaultInputValue:\n defaultAddress ??\n searchParams.get(\"address\") ??\n \"\",\n onInputValueChange: (changes) => {\n addressFetcher.submit(\n { search: changes.inputValue ?? \"\" },\n { method: \"get\", action: \"/get-address\" },\n );\n },\n });\n\n const busy = addressFetcher.state !== \"idle\";\n const showSpinner = useSpinDelay(busy, {\n delay: 150,\n minDuration: 500,\n });\n const displayMenu = cb.isOpen && addresses.length > 0;\n\n\n return {\n displayMenu,\n showSpinner,\n selectedAddress,\n cb,\n addressFetcher,\n addresses,\n };\n};\n```\n\n## 8. useDateRanges\n\nPour les applications nécessitant de manipuler des dates, voici un hook permettant de les formatter sous forme de `string`. Elles peuvent ensuite être sauvegardées dans l'URL (sur les sites de réservation par exemple). \n\nNous exploitons dans ce hook la librairie [date-fns](https://date-fns.org) pour formatter la date. \n\n```tsx\nuseDateRanges.tsx\n\nimport {\n parseStringToDate\n} from \"app/shared/dates.ts\";\nimport {\n differenceInDays\n} from \"date-fns\";\nimport React, { useMemo } from \"react\";\nimport { useSearchParams } from \"react-router\";\n\n\nconst getDateDifferenceInDays = ({\n endDate,\n startDate,\n}: {\n endDate: Date;\n startDate: Date;\n}) => {\n // Always add more day, to include the current day\n const dateDifferenceInDays = differenceInDays(endDate, startDate) + 1;\n\n return dateDifferenceInDays;\n};\n\nexport const useDateRanges = ({\n defaultEndDate = null,\n defaultStartDate = null,\n defaultAdditionalDate = null,\n minDate = null,\n}: {\n defaultStartDate?: string | null;\n defaultEndDate?: string | null;\n defaultAdditionalDate?: string | null;\n minDate?: string | null;\n}) => {\n const [searchParams] = useSearchParams();\n\n const startDateParam = searchParams.get(\"startDate\");\n const endDateParam = searchParams.get(\"endDate\");\n\n const minimumDate = new Date(minDate) || new Date()\n\n const [selectedDates, setSelectedDates] = React.useState<{\n startDate: string;\n endDate: string;\n additionalDate?: string;\n }>(() => {\n return {\n startDate: defaultStartDate ?? startDateParam ?? \"\",\n endDate: defaultEndDate ?? endDateParam ?? \"\",\n additionalDate: defaultAdditionalDate ?? \"\",\n };\n });\n\n const isOutated = React.useMemo(() => {\n if (!selectedDates.startDate) return false;\n const startDate = parseStringToDate(selectedDates.startDate);\n\n return startDate < minimumDate;\n }, [selectedDates?.startDate, minimumDate]);\n\n const dateDifferenceInDays = useMemo(() => {\n if (!selectedDates.startDate || !selectedDates.endDate) return 0;\n return getDateDifferenceInDays({\n endDate: parseStringToDate(selectedDates.endDate),\n startDate: parseStringToDate(selectedDates.startDate),\n });\n }, [selectedDates.endDate, selectedDates.startDate]);\n\n return {\n selectedDates,\n setSelectedDates,\n minimumDate,\n isOutated,\n dateDifferenceInDays,\n };\n};\n```\n\n## 9. useLocalStorage\n\nCe hook est très pratique pour sauvegarder des informations dans le [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n\n> Le `localStorage` est une base de donnée présente directement dans le navigateur, qui permet par exemple de sauvegarder les informations de l'utilisateur comme son thème, s'il a accepté les cookies, ou toute information utile pour améliorer l'expérience utilisateur.\n\nCette version du hook nécessite de télécharger la librairie [usehooks-ts](https://usehooks-ts.com/). Il existe également des alternatives natives à React.\n\n```sh\nTerminal\nnpm install usehooks-ts\n```\n\n```tsx\nuseLocalStorage.tsx\nimport {\n useCallback,\n useEffect,\n useState,\n type Dispatch,\n type SetStateAction,\n} from \"react\";\n\nimport { useEventCallback, useEventListener } from \"usehooks-ts\";\n\ndeclare global {\n interface WindowEventMap {\n \"local-storage\": CustomEvent;\n }\n}\n\ntype SetValue = Dispatch>;\n\nexport function useLocalStorage(\n key: string,\n initialValue: T,\n): [T, SetValue] {\n // Get from local storage then\n // parse stored json or return initialValue\n const readValue = useCallback((): T => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === \"undefined\") {\n return initialValue;\n }\n\n try {\n const item = window.localStorage.getItem(key);\n return item ? (parseJSON(item) as T) : initialValue;\n } catch (error) {\n console.warn(`Error reading localStorage key “${key}”:`, error);\n return initialValue;\n }\n }, [initialValue, key]);\n\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState(readValue);\n\n // Return a wrapped version of useState's setter function that ...\n // ... persists the new value to localStorage.\n const setValue: SetValue = useEventCallback((value) => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === \"undefined\") {\n console.warn(\n `Tried setting localStorage key “${key}” even though environment is not a client`,\n );\n }\n\n try {\n // Allow value to be a function so we have the same API as useState\n const newValue = value instanceof Function ? value(storedValue) : value;\n\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(newValue));\n\n // Save state\n setStoredValue(newValue);\n\n // We dispatch a custom event so every useLocalStorage hook are notified\n window.dispatchEvent(new Event(\"local-storage\"));\n } catch (error) {\n console.warn(`Error setting localStorage key “${key}”:`, error);\n }\n });\n\n useEffect(() => {\n setStoredValue(readValue());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleStorageChange = useCallback(\n (event: StorageEvent | CustomEvent) => {\n if ((event as StorageEvent)?.key && (event as StorageEvent).key !== key) {\n return;\n }\n setStoredValue(readValue());\n },\n [key, readValue],\n );\n\n // this only works for other documents, not the current one\n useEventListener(\"storage\", handleStorageChange);\n\n // this is a custom event, triggered in writeValueToLocalStorage\n // See: useLocalStorage()\n useEventListener(\"local-storage\", handleStorageChange);\n\n return [storedValue, setValue];\n}\n\n// A wrapper for \"JSON.parse()\"\" to support \"undefined\" value\nfunction parseJSON(value: string | null): T | undefined {\n try {\n // @ts-ignore\n return value === \"undefined\" ? undefined : JSON.parse(value ?? \"\");\n } catch {\n return undefined;\n }\n}\n```\n\n## 10. useQueryState\n\nCe hook s'utilise comme [useState](https://react.dev/reference/react/useState), mais va sauvegarder les valeurs comme [paramètres d'URL](https://fr.wikipedia.org/wiki/Cha%C3%AEne_de_requ%C3%AAte).\n\n![Exemple de paramètres d'URL](https://algomax-public.s3.eu-west-3.amazonaws.com/what_are_url_parameters_1cd183d8b2.png)\n\nDans quel cas vas-tu utiliser les `paramètres d'URL` ?\n\n- pour sauvegarder les filtres sur une application de réservation comme [leboncoin](https://www.leboncoin.fr) ou [Airbnb](https://www.airbnb.com).\n- pour la pagination d'un blog (numéro de page sélectionné, limite d'articles affichés).\n- pour sauvegarder la valeur d'une barre de recherche (comme sur [Google](https://www.google.com) par exemple)\n\nPour ce faire, je te présente la librairie [nuqs](https://nuqs.47ng.com), qui vient exploiter les hooks natifs à Remix (comme [useSearchParams](https://api.reactrouter.com/v7/functions/react_router.useSearchParams.html))\n\nL'exemple le plus simple se trouve sur la documentation de [nuqs](https://nuqs.47ng.com/docs/basic-usage)\n\n```tsx\nDemo.tsx\n\nimport { useQueryState } from 'nuqs'\n \nexport function Demo() {\n const [name, setName] = useQueryState('name')\n return (\n <>\n setName(e.target.value)} />\n \n

Hello, {name || 'anonymous visitor'}!

\n \n )\n}\n```\n\nL'avantage de ce hook est sa simplicité d'utilisation. L'auteur de la librairie, [François Best](https://x.com/fortysevenfx) nous propose une **expérience développeur** d'exception. \n\nSes nombreux `parsers` permettent de valider tout type de donnée (full typesafe) :\n\n- `parseAsString` (les paramètres sont des *string* par défaut)\n- `parseAsInteger` pour les entiers\n- `parseAsFloat` pour les chiffres à 2 décimales\n- `parseAsBoolean` pour les booléens\n- `parseAsStringLiteral` pour les *string literals*\n- et bien plus (les dates, les valeurs hexadécimales, les *enums* ...)\n\nLe hook **useQueryState** prend comme premier argument le nom du `paramètre d'URL`. Le deuxième argument est optionel, et peut soit être le `parser`, soit un objet de configuration :\n\n```tsx\nuseQueryState.tsx\nimport { useQueryState, parseAsInteger } from 'nuqs'\n\nconst [search] = useQueryState('search', { defaultValue: '' })\n// ^? string\n \nconst [count] = useQueryState('count', parseAsInteger)\n// ^? number | null -> no default value = nullable\n \nconst [count2] = useQueryState('count', parseAsInteger.withDefault(0))\n// ^? number\n```\n\n> J'ai de nombreux paramètres d'URL différents à gérer, comment faire ?\n\nUtilise le hook [useQueryStates](https://nuqs.47ng.com/docs/batching) (au pluriel), pour gérer un objet de plusieurs `paramètres d'URL`.\n\n```tsx\nimport { useQueryStates, parseAsFloat } from 'nuqs'\n\nconst [{ latitude, longitude }, setCoordinates] = useQueryStates(\n {\n // Use variable names that make sense in your codebase\n latitude: parseAsFloat.withDefault(45.18),\n longitude: parseAsFloat.withDefault(5.72)\n },\n {\n urlKeys: {\n // And remap them to shorter keys in the URL\n latitude: 'lat',\n longitude: 'lng'\n }\n }\n)\n \n// No changes in the setter API, but the keys are remapped to:\n// ?lat=45.18&lng=5.72\nsetCoordinates({\n latitude: 45.18,\n longitude: 5.72\n})\n```\n\nJ'espère que ces hooks vous seront utiles !",[107,110,111],{"_24":108,"_26":109},"cma0ygytr0002yk67fi9yxtr2","React Router 7",{"_24":46,"_26":47},{"_24":112,"_26":113},"cma0ygyr10000yk674psikbwx","Remix",{"_24":115,"_51":116},"cma0ygz2m000ayk67bs6pgohz","Virgile",{"_55":118},3,{"_59":120,"_61":121,"_63":122,"_65":123},"14 min read",13.04,782400,2608,{"_69":125,"_71":126,"_73":127,"_75":128},"https://algomax-public.s3.eu-west-3.amazonaws.com/402f9750-3c16-4925-bd5c-10fe46e2ace9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=22adb129a435e6003bb6410f4be5aacf0e14885639964b9a493cea22ecd7a8a0&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","React Router 7 ",1280,720,"pagination",{"_131":56,"_132":118,"_133":134,"_135":136},"page","pageSize","pageCount",11,"total",31,[138,143,150,155,162,167,173,178,183,190],{"_24":139,"_26":140,"_28":141,"_142":-5},"cma0ygyvx0004yk67z5ezcv8p","Application mobile ","application-mobile-","image",{"_24":144,"_26":145,"_28":146,"_142":147},"cma0ygyz00007yk677i1tjff2","NodeJS","nodejs",{"_24":148,"_69":149,"_71":145},"cma239buz0006ykoznafwzvow","https://algomax-public.s3.amazonaws.com/67e309ee-8db1-4816-b4ab-f9962c33d4f1.png",{"_24":40,"_26":41,"_28":151,"_142":152},"docker",{"_24":153,"_69":154,"_71":151},"cma238g0g0002ykozkuyvfu7r","https://algomax-public.s3.amazonaws.com/40436d76-e4c0-43a1-9683-019adf5e9014.png",{"_24":156,"_26":157,"_28":158,"_142":159},"cma0ygywx0005yk67arcm0kw4","Figma","figma",{"_24":160,"_69":161,"_71":157},"cma24o2wh0007ykozlzifidx0","https://algomax-public.s3.amazonaws.com/7019f576-4bb9-4167-b567-c09745898615.png",{"_24":43,"_26":44,"_28":163,"_142":164},"nestjs",{"_24":165,"_69":166,"_71":44},"cma24pvg10008ykozfti5xo0h","https://algomax-public.s3.amazonaws.com/eae71424-33db-4162-8f02-d08a2e20a622.png",{"_24":108,"_26":109,"_28":168,"_142":169},"react-router-7",{"_24":170,"_69":171,"_71":172},"cma24rd2e0009ykozhi6zylip","https://algomax-public.s3.amazonaws.com/512552ae-927c-4a83-9513-d850ff83e574.png","React Router 7 logo",{"_24":46,"_26":47,"_28":174,"_142":175},"reactjs",{"_24":176,"_69":177,"_71":47},"cma24srkf000aykozg11d0dk2","https://algomax-public.s3.amazonaws.com/f10999d5-e739-4bc3-afb4-8211ec7b9f49.webp",{"_24":112,"_26":113,"_28":179,"_142":180},"remix",{"_24":181,"_69":182,"_71":113},"cma24tcao000bykoz44554mdv","https://algomax-public.s3.amazonaws.com/e317a065-d836-4232-8ae5-7de6a9ff5277.png",{"_24":184,"_26":185,"_28":186,"_142":187},"cma0ygyxz0006yk67t7rx9ota","Strapi","strapi",{"_24":188,"_69":189,"_71":186},"cma2394060005ykozjkxqqoh2","https://algomax-public.s3.amazonaws.com/74c12025-c0f3-4778-83cf-5b69765baaa1.png",{"_24":86,"_26":87,"_28":191,"_142":192},"terminal",{"_24":193,"_69":194,"_71":195},"cma238oi20003ykoz7fpuawz5","https://algomax-public.s3.amazonaws.com/2d6946a5-e89f-4536-a021-ab7cfda0cc36.png","Terminal (iterm)","courseBackLinks",[198,202,204,208,211],{"_26":199,"_28":200,"_201":-5},"Développe une application de mise en relation avec Remix.js, NestJS, Typescript, Turborepo","developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo","landingPageUrl",{"_26":109,"_28":168,"_201":203},"/formation-react-router-7",{"_26":205,"_28":206,"_201":207},"Crée ta première app Next.js 15 full-stack avec Prisma et RSC","developper-une-app-next-js-15-full-stack-avec-prisma-et-rsc","/creer-ta-premiere-app-nextjs-15",{"_26":209,"_28":210,"_201":-5},"Créer un site e-commerce moderne avec Remix et Strapi 5","creer-un-site-e-commerce-moderne-avec-remix-et-strapi-5",{"_26":212,"_28":213,"_201":-5},"Développe une app de chat temps réel avec Remix et NestJS","developpe-une-app-de-chat-temps-reel-avec-remix-et-nestjs","chats",{},"env",{"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229},"GOOGLE_CAPTCHA_SITE_KEY","6Lfia0UkAAAAACBikkfHI1VNoRkyUK99pofGRHvD","ALGOMAX_ENV","production","FRONTEND_URL","https://algomax.fr","GTM_ID","GTM-5QP7LX7","GA_ID","G-N1C6D1CR5Z","FB_PIXEL_ID","726790966507971","user","requestInfo",{"_233":234,"_239":240,"_241":242},"hints",{"_235":236,"_237":238},"theme","light","timeZone","UTC","path","/formations/developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo/introduction-et-pre-requis","userPrefs",{"_235":236},"routes/formations+/$courseSlug+/_courseLayout",{"_36":-5,"_53":245,"_28":200,"_248":249,"_250":251,"_252":-5,"_24":253,"_34":254,"_26":199,"_30":255,"_256":257,"_258":259,"_201":-5,"_67":260,"_278":279,"_584":585,"_756":757,"_758":759,"_763":764,"_771":247,"_772":247,"_773":247,"_774":247,"_775":247,"_776":-5,"_777":56,"_778":779,"_780":247,"_781":782,"_593":-5,"_783":784,"_785":200,"_786":23,"_787":6},{"_246":247},"purchases",0,"updatedAt",["D",1742663796148],"status","AVAILABLE","convertkitFormId","cm7s4ew9b000096c1e8rfz0g6","## Pourquoi cette formation Remix.js + NestJS ?\n\n\n\n\nEn 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).\n\nEn tant que développeur fullstack, je souhaite bénéficier du meilleur des deux mondes.\n\nJe souhaite utiliser une technologie :\n\n- simple à utiliser\n- qui me permet d'implémenter une fonctionnalité rapidement\n- qui me permet d'avoir un contrôle total sur la logique, front comme back\n\nCette formation permet de vous partager ces technologies. J'espère qu'elle vous plaira !","Dans cette formation, nous allons ensemble configurer une stack nous permettant d'utiliser Remix avec un serveur NestJS intégré. Nous allons configurer un monorepo avec la technologie turborepo pour gérer le déploiement continu et l'intégration continue.","accessType","FREE","createdAt",["D",1740949552847],{"_24":261,"_262":263,"_264":265,"_69":266,"_267":268,"_269":270,"_271":272,"_73":127,"_75":128,"_71":273,"_26":274,"_30":-5,"_275":6,"_258":276,"_248":277},"cm7td9p1k000296fcrd6fukb0","filename","2 fois plus vite.png","key","6f4fa9e9-3f81-49fc-b42a-321a6d07dbeb.png","https://algomax-public.s3.eu-west-3.amazonaws.com/6f4fa9e9-3f81-49fc-b42a-321a6d07dbeb.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=7a410d898eab8c5ead875f18ba3b5f7c5cb577e5061a7d666e287607ecc436a7&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","type","IMAGE","mimeType","image/png","size",1288056,"Développe une application avec Remix, NestJS, Typescript","Monorepo","isPublic",["D",1741024892936],["D",1745868593121],"testimonials",[280,305,322,339,356,372,388,404,420,436,452,468,484,500,507,523,539,555,568],{"_24":281,"_51":282,"_283":284,"_285":286,"_287":288,"_289":253,"_290":23,"_258":291,"_248":292,"_293":294},"cmatmf8fm001k96a2snwhcbrv","Vanessa Berardozzi","testimonial","Je viens de commencer la formation et j'y vois déjà un peu plus clair sur Nest.js, merci et bravo pour tout ce travail !","avatarId","cmatmf8d9001i96a22uzskol3","sourceUrl","https://www.linkedin.com/search/results/all/?fetchDeterministicClustersOnly=true&heroEntityKey=urn%3Ali%3Afsd_profile%3AACoAABD-ER4B7QvX6_q2lhxth0Jax-JOAaa05G0&keywords=virgile%20rietsch&origin=RICH_QUERY_TYPEAHEAD_HISTORY&position=0&searchId=677b0b51-fbc7-4694-8e93-6e91a84a2725&spellCorrectionEnabled=true","courseId","showOnLanding",["D",1747570614898],["D",1747570614898],"avatar",{"_24":286,"_262":295,"_264":296,"_69":297,"_267":268,"_269":298,"_271":247,"_73":299,"_75":300,"_71":301,"_26":302,"_30":-5,"_275":23,"_258":303,"_248":304},"testimonial-19-avatar","vanessa_6d82599594.jpeg","https://algomax-public.s3.eu-west-3.amazonaws.com/vanessa_6d82599594.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=8cfcba9a400657aa9fc0ebbd8692f6f19cfd96a1f40cba80dacdbadde5465861&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","image/jpeg",204,192,"Avatar for Vanessa Berardozzi","Avatar for Vanessa Berardozzi's testimonial",["D",1747570614813],["D",1747570614813],{"_24":306,"_51":307,"_283":308,"_285":309,"_287":310,"_289":253,"_290":23,"_258":311,"_248":312,"_293":313},"cmatmf8a5001h96a2ymwhqrb7","Thierry Gravelaine","Ce que j’ai particulièrement apprécié, c’est ton côté logique et pédagogue. Ça rend la formation assez simple et fluide.","cmatmf87y001f96a2ulojsvzg","https://www.linkedin.com/feed/update/urn:li:ugcPost:7220093986173005826?commentUrn=urn%3Ali%3Acomment%3A%28ugcPost%3A7220093986173005826%2C7221824383508443136%29&dashCommentUrn=urn%3Ali%3Afsd_comment%3A%287221824383508443136%2Curn%3Ali%3AugcPost%3A7220093986173005826%29",["D",1747570614701],["D",1747570614701],{"_24":309,"_262":314,"_264":315,"_69":316,"_267":268,"_269":298,"_271":247,"_73":317,"_75":317,"_71":318,"_26":319,"_30":-5,"_275":23,"_258":320,"_248":321},"testimonial-18-avatar","thierry_gravelaine_8adbef5890.jpeg","https://algomax-public.s3.eu-west-3.amazonaws.com/thierry_gravelaine_8adbef5890.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=046c6bfafd1e57fd8d97444b27f97cf394ea57f62ef247d196ee3423be6c3241&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",200,"Avatar for Thierry Gravelaine","Avatar for Thierry Gravelaine's testimonial",["D",1747570614622],["D",1747570614622],{"_24":323,"_51":324,"_283":325,"_285":326,"_287":327,"_289":253,"_290":23,"_258":328,"_248":329,"_293":330},"cmatmf83x001e96a2j31o7ud6","Anthony Vergès","Best contenu francophone Nest Js 👏🏻","cmatmf819001c96a2qx3w1ajo","https://www.linkedin.com/feed/update/urn:li:ugcPost:7220093986173005826?commentUrn=urn%3Ali%3Acomment%3A%28ugcPost%3A7220093986173005826%2C7220100379441594368%29&dashCommentUrn=urn%3Ali%3Afsd_comment%3A%287220100379441594368%2Curn%3Ali%3AugcPost%3A7220093986173005826%29",["D",1747570614477],["D",1747570614477],{"_24":326,"_262":331,"_264":332,"_69":333,"_267":268,"_269":298,"_271":247,"_73":334,"_75":334,"_71":335,"_26":336,"_30":-5,"_275":23,"_258":337,"_248":338},"testimonial-17-avatar","anthony_verges_89a5515c84.jpeg","https://algomax-public.s3.eu-west-3.amazonaws.com/anthony_verges_89a5515c84.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=fb49309f2fad59c7556aab7a1c67328ff3fae54eb8cba662649338c9f4234b1d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",800,"Avatar for Anthony Vergès","Avatar for Anthony Vergès's testimonial",["D",1747570614382],["D",1747570614382],{"_24":340,"_51":341,"_283":342,"_285":343,"_287":344,"_289":253,"_290":23,"_258":345,"_248":346,"_293":347},"cmatmf7w4001b96a2n6n36j48","Karim Matrah","Très clair et complet ce tutoriel, merci Virgile !","cmatmf7ts001996a2hij8ku50","https://www.youtube.com/watch?v=c7nLBwfg_K8&lc=UgwUWJ_Z7UTYFX9w4l14AaABAg",["D",1747570614196],["D",1747570614196],{"_24":343,"_262":348,"_264":349,"_69":350,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":352,"_26":353,"_30":-5,"_275":23,"_258":354,"_248":355},"testimonial-16-avatar","Karim_Matrah_3567cabe83.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/Karim_Matrah_3567cabe83.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=636be2a92d03a553a2f3146d0571a775ff97e445c096cd96870b209bf1b92abd&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",160,"Avatar for Karim Matrah","Avatar for Karim Matrah's testimonial",["D",1747570614113],["D",1747570614113],{"_24":357,"_51":358,"_283":359,"_285":360,"_287":361,"_289":253,"_290":23,"_258":362,"_248":363,"_293":364},"cmatmf7qx001896a2t1u4zi3u","CyrilleDeNantes","Excellent, beaucoup d'informations et haute qualité ! ","cmatmf7o9001696a21qfshbpv","https://www.youtube.com/watch?v=SfTfRPAR50c&lc=UgyKwi2AuIPoNnV36HF4AaABAg",["D",1747570614010],["D",1747570614010],{"_24":360,"_262":365,"_264":366,"_69":367,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":368,"_26":369,"_30":-5,"_275":23,"_258":370,"_248":371},"testimonial-15-avatar","Cyrille_De_Nantes_6754f820bf.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/Cyrille_De_Nantes_6754f820bf.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=b7f6e20996a68f018ba445229173f2a570be118f01f9af226cf587c289c035dd&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for CyrilleDeNantes","Avatar for CyrilleDeNantes's testimonial",["D",1747570613914],["D",1747570613914],{"_24":373,"_51":374,"_283":375,"_285":376,"_287":377,"_289":253,"_290":23,"_258":378,"_248":379,"_293":380},"cmatmf7lj001596a2xj349p48","Johan Code","Voilà le genre de vidéos que j'aime ! Beau boulot 👏","cmatmf7j0001396a20pn2qmmv","https://www.youtube.com/watch?v=GWfZewdFx4o&lc=Ugwxcg4204M3WheaM954AaABAg",["D",1747570613815],["D",1747570613815],{"_24":376,"_262":381,"_264":382,"_69":383,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":384,"_26":385,"_30":-5,"_275":23,"_258":386,"_248":387},"testimonial-14-avatar","Johan_Code_b9bfaf8734.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/Johan_Code_b9bfaf8734.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=3b7f7b641e137b63f3782733a7629c8124631614cdb2a33b10c031115f23a73c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Johan Code","Avatar for Johan Code's testimonial",["D",1747570613724],["D",1747570613724],{"_24":389,"_51":390,"_283":391,"_285":392,"_287":393,"_289":253,"_290":23,"_258":394,"_248":395,"_293":396},"cmatmf7gh001296a21fp7ervp","ActuCode","ça donne vraiment envie d'apprendre Remix, c'est juste wow ! moins de ligne de code que NextJs ahaha","cmatmf7e0001096a2tmbf217t","https://www.youtube.com/watch?v=TOMMXhgUQfI&lc=UgyZndp7zu86aohMpY14AaABAg",["D",1747570613633],["D",1747570613633],{"_24":392,"_262":397,"_264":398,"_69":399,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":400,"_26":401,"_30":-5,"_275":23,"_258":402,"_248":403},"testimonial-13-avatar","Actu_Code_517b631d21.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/Actu_Code_517b631d21.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=27e58109d490b65a65f1f0f716900b4d8b59169846ea2c8da7b58496b29dacc3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for ActuCode","Avatar for ActuCode's testimonial",["D",1747570613544],["D",1747570613544],{"_24":405,"_51":406,"_283":407,"_285":408,"_287":409,"_289":253,"_290":23,"_258":410,"_248":411,"_293":412},"cmatmf7bw000z96a29555x1i6","Romain Cerezo","Super tuto, je pense que ça va aider du monde 😄","cmatmf79j000x96a24hk73luu","https://www.youtube.com/watch?v=0C4Xh1x7flY&lc=UgxCXpek-cttDDVjzQl4AaABAg",["D",1747570613468],["D",1747570613468],{"_24":408,"_262":413,"_264":414,"_69":415,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":416,"_26":417,"_30":-5,"_275":23,"_258":418,"_248":419},"testimonial-12-avatar","Romain_Cerezo_986421ddd1.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/Romain_Cerezo_986421ddd1.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=e38026bcf669629397e7c82e1e251be603c5317cb1d569d75cbe34db81618988&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Romain Cerezo","Avatar for Romain Cerezo's testimonial",["D",1747570613383],["D",1747570613383],{"_24":421,"_51":422,"_283":423,"_285":424,"_287":425,"_289":253,"_290":23,"_258":426,"_248":427,"_293":428},"cmatmf77i000w96a27hf1t91w","Aymeric Suteau","C'est problablement la vidéo la plus claire que j'ai pu visionner sur le routing avec Remix, super travail 👏","cmatmf751000u96a2jo834nrv","https://www.youtube.com/watch?v=TOMMXhgUQfI&lc=UgznX9eYoGpj93PgmH94AaABAg",["D",1747570613311],["D",1747570613311],{"_24":424,"_262":429,"_264":430,"_69":431,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":432,"_26":433,"_30":-5,"_275":23,"_258":434,"_248":435},"testimonial-11-avatar","Aymeric_Suteau_c988d12850.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/Aymeric_Suteau_c988d12850.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=96c39f630ebff19e573b0731667b99654952ddeb83112e84648cdf53e2b7217f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Aymeric Suteau","Avatar for Aymeric Suteau's testimonial",["D",1747570613222],["D",1747570613222],{"_24":437,"_51":438,"_283":439,"_285":440,"_287":441,"_289":253,"_290":23,"_258":442,"_248":443,"_293":444},"cmatmf72r000t96a280ipf7bo","Bruno Firnadch","Franchement bravo","cmatmf70o000r96a2rilar5o8","https://www.youtube.com/watch?v=c7nLBwfg_K8&lc=UgytYWaYlHNc3WsHj3l4AaABAg",["D",1747570613139],["D",1747570613139],{"_24":440,"_262":445,"_264":446,"_69":447,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":448,"_26":449,"_30":-5,"_275":23,"_258":450,"_248":451},"testimonial-10-avatar","Bruno_Firnadch_4a81c19469.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/Bruno_Firnadch_4a81c19469.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=1a53e6f82f943eb1e193a138bb77fb0db0dbf7c4f3338bac2e46fec13c3440de&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Bruno Firnadch","Avatar for Bruno Firnadch's testimonial",["D",1747570613064],["D",1747570613064],{"_24":453,"_51":454,"_283":455,"_285":456,"_287":457,"_289":253,"_290":23,"_258":458,"_248":459,"_293":460},"cmatmf6y6000q96a24rn36nly","TIKTOK POULPITO","Super, j'apprécie ce type de contenu. C'est tellement jouissif d'apprendre de nouvelles méthodes pour optimiser son code. Merci!! 😊","cmatmf6vs000o96a2nimzxdas","https://www.youtube.com/watch?v=Gm_UBa8nad0&lc=Ugykjl8UdgvIRuOw-bd4AaABAg",["D",1747570612974],["D",1747570612974],{"_24":456,"_262":461,"_264":462,"_69":463,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":464,"_26":465,"_30":-5,"_275":23,"_258":466,"_248":467},"testimonial-9-avatar","tiktok_poulpito_b83a98a533.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/tiktok_poulpito_b83a98a533.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=e11b5a1559cb7d99220377b9b28f767a09c40f1b7c496e818e5b025b211511e1&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for TIKTOK POULPITO","Avatar for TIKTOK POULPITO's testimonial",["D",1747570612888],["D",1747570612888],{"_24":469,"_51":470,"_283":471,"_285":472,"_287":473,"_289":253,"_290":23,"_258":474,"_248":475,"_293":476},"cmatmf6th000n96a2633awo3w","Franck Mekoulou","J'adore vraiment ton style, vraiment sur cette chaine je ne suis que sur NestJS et c'est tres propre d'avoir une chaine pour ca, et tres bien faite. je te rejoins, \"Algomax\"","cmatmf6qu000l96a222h4nk4y","https://www.youtube.com/watch?v=tJt2MoT_BpU&lc=UgyidE2MVOhE6iCt2Ap4AaABAg",["D",1747570612805],["D",1747570612805],{"_24":472,"_262":477,"_264":478,"_69":479,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":480,"_26":481,"_30":-5,"_275":23,"_258":482,"_248":483},"testimonial-8-avatar","Franck_Mekoulou_8bb28bf089.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/Franck_Mekoulou_8bb28bf089.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=9c4f71c00ffc1d3fea358c73967e83c467ef72572dd770fb8b2fb2b3ab83c289&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Franck Mekoulou","Avatar for Franck Mekoulou's testimonial",["D",1747570612710],["D",1747570612710],{"_24":485,"_51":486,"_283":487,"_285":488,"_287":489,"_289":253,"_290":23,"_258":490,"_248":491,"_293":492},"cmatmf6o0000k96a2skfk9clw","Automecanik","franchement je te remercie infiniment pour cette formation","cmatmf6lw000i96a2lwxri9op","https://www.youtube.com/watch?v=KCMFcHTYf9o&lc=UgwohZPIMl0yg1iazRJ4AaABAg",["D",1747570612608],["D",1747570612608],{"_24":488,"_262":493,"_264":494,"_69":495,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":496,"_26":497,"_30":-5,"_275":23,"_258":498,"_248":499},"testimonial-7-avatar","automecanik_50cacd32d6.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/automecanik_50cacd32d6.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=bf68f9a625006f41619f8848a163a1498c091cc947bf3cfb7a84468b971c49dc&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Automecanik","Avatar for Automecanik's testimonial",["D",1747570612533],["D",1747570612533],{"_24":501,"_51":502,"_283":503,"_285":-5,"_287":504,"_289":253,"_290":23,"_258":505,"_248":506,"_293":-5},"cmatmf6iz000h96a2it84ej71","GARIUS","Merci beaucoup pour ce mega contenu ❤❤","https://www.youtube.com/watch?v=tJt2MoT_BpU&lc=UgxEWW_IBgC_4mxld1F4AaABAg",["D",1747570612428],["D",1747570612428],{"_24":508,"_51":509,"_283":510,"_285":511,"_287":512,"_289":253,"_290":23,"_258":513,"_248":514,"_293":515},"cmatmf6db000e96a2vgjhvq7d","Near Web","Hello there ! J'ai vue de la lumière , je me suis permis d'entrée 😆. Plus sérieusement, je suis curieux de la techno nest.js et j'ai découvert ta chaine. Ta vidéo est au top 👍!","cmatmf6av000c96a2uzdkhwwk","https://www.youtube.com/watch?v=tJt2MoT_BpU&lc=Ugxd51AYknsH89-cW0R4AaABAg",["D",1747570612224],["D",1747570612224],{"_24":511,"_262":516,"_264":517,"_69":518,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":519,"_26":520,"_30":-5,"_275":23,"_258":521,"_248":522},"testimonial-5-avatar","near_web_ef06637c25.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/near_web_ef06637c25.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=1a5e73b866b7533b230e2ecdb043b8c8e83e43210cc428b4d81acc2dd1a6a7f3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Near Web","Avatar for Near Web's testimonial",["D",1747570612136],["D",1747570612136],{"_24":524,"_51":525,"_283":526,"_285":527,"_287":528,"_289":253,"_290":23,"_258":529,"_248":530,"_293":531},"cmatmf67i000b96a28pylr8op","Mohamed Lamine","Hello, good tuto!","cmatmf62b000996a2clyegzo5","https://www.youtube.com/watch?v=tJt2MoT_BpU&lc=UgwRkA6YrmAGLiwCcgp4AaABAg",["D",1747570612015],["D",1747570612015],{"_24":527,"_262":532,"_264":533,"_69":534,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":535,"_26":536,"_30":-5,"_275":23,"_258":537,"_248":538},"testimonial-4-avatar","mohammed_4726be15b3.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/mohammed_4726be15b3.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=122ef1280780cc907cba9c86ccf3cfc88a05306534b5ac4089f56c1aec7d242c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Mohamed Lamine","Avatar for Mohamed Lamine's testimonial",["D",1747570611827],["D",1747570611827],{"_24":540,"_51":541,"_283":542,"_285":543,"_287":544,"_289":253,"_290":23,"_258":545,"_248":546,"_293":547},"cmatmf5qr000896a2b32wvtly","Gustave","C’est mortel, GG !","cmatmf5j8000696a2utistl4a","https://www.youtube.com/watch?v=tJt2MoT_BpU&lc=UgwJvd-eeUWLSj5XGtR4AaABAg",["D",1747570611411],["D",1747570611411],{"_24":543,"_262":548,"_264":549,"_69":550,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":551,"_26":552,"_30":-5,"_275":23,"_258":553,"_248":554},"testimonial-3-avatar","gustave_e31733db95.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/gustave_e31733db95.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=4686095c4d00868339e083363ff757330f45a331264866c3ae8de8539bc71164&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Gustave","Avatar for Gustave's testimonial",["D",1747570611141],["D",1747570611141],{"_24":556,"_51":502,"_283":503,"_285":557,"_287":504,"_289":253,"_290":23,"_258":558,"_248":559,"_293":560},"cmatmf5d1000596a2kowp6q9g","cmatmf58y000396a2n79f3ujy",["D",1747570610917],["D",1747570610917],{"_24":557,"_262":561,"_264":562,"_69":563,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":564,"_26":565,"_30":-5,"_275":23,"_258":566,"_248":567},"testimonial-2-avatar","garius_3fc4814a96.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/garius_3fc4814a96.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=aba6f19c414e11ad931c882597557907d52ecece3115be7fd01247994788f7ec&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for GARIUS","Avatar for GARIUS's testimonial",["D",1747570610770],["D",1747570610770],{"_24":569,"_51":570,"_283":571,"_285":572,"_287":573,"_289":253,"_290":23,"_258":574,"_248":575,"_293":576},"cmatmf517000296a2z12xdfur","Colin Courbe","La vache, sacré claque, merci beaucoup pour ce que tu nous partage 👌👌\n","cmatmf4ul000096a2l13f50qe","https://www.youtube.com/watch?v=yv96ar6XNnU&lc=Ugwx4HTHdS48vvS5ePd4AaABAg",["D",1747570610491],["D",1747570610491],{"_24":572,"_262":577,"_264":578,"_69":579,"_267":268,"_269":298,"_271":247,"_73":351,"_75":351,"_71":580,"_26":581,"_30":-5,"_275":23,"_258":582,"_248":583},"testimonial-1-avatar","colincourbe_ea405b117a.jpg","https://algomax-public.s3.eu-west-3.amazonaws.com/colincourbe_ea405b117a.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250616%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250616T164813Z&X-Amz-Expires=3600&X-Amz-Signature=e70173146b441d6ed7c8e2d5d9b8a5da402b09868d63cf0012535ba68bc885d6&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Avatar for Colin Courbe","Avatar for Colin Courbe's testimonial",["D",1747570610254],["D",1747570610254],"modules",[586,616,668],{"_587":-5,"_258":588,"_28":589,"_26":590,"_30":591,"_248":592,"_593":-5,"_250":251,"_594":595},"releaseDate",["D",1740949552937],"introduction-et-pre-requis","Introduction et Pré-requis","Dans ce module, nous allons découvrir les technologies Remix, NestJS et Turborepo et comment nous pouvons les utiliser pour développer des applications sur mesure. Nous allons également installer NodeJS et tous les pré-requis nécessaires pour commencer cette formation.",["D",1742663835063],"muxVideo","lessons",[596,607],{"_24":597,"_28":598,"_26":599,"_600":6,"_30":601,"_258":602,"_248":603,"_34":604,"_593":-5,"_250":251,"_53":605},"cm7s4ewhy000296c1o4n8t8bb","introduction","Introduction","freePreview","Dans ce module, nous allons découvrir les technologies Remix et NestJS, et comment les utiliser pour créer des sites sur mesure puissants.",["D",1740949553158],["D",1745505949225],"## Pourquoi cette formation Remix.js + NestJS ?\n\n\n\nEn 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).\n\nEn tant que développeur fullstack, je souhaite bénéficier du meilleur des deux mondes.\n\nJe souhaite utiliser une technologie :\n\n- simple à utiliser\n- qui me permet d'implémenter une fonctionnalité rapidement\n- qui me permet d'avoir un contrôle total sur la logique, front comme back\n\n### Pourquoi Remix.js ?\n\n[Remix](https://remix.run) répond à mes attentes. C'est un framework frontend qui me permet d'utiliser Javascript et [React](https://react.dev) pour créer des sites web performants et ergonomiques.\n\nCependant, 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)\n\nJ'utilise donc [NestJS](https://nestjs.com) comme serveur séparé jusqu'à présent.\n\n### Pourquoi NestJS ?\n\nCe framework [Node.JS](https://nodejs.org/en) me permet d'utiliser Javascript pour configurer une base de donnée, des routes et toute la logique métier.\n\nEnsuite, j'appelle chaque [_route_](https://algomax.fr/blog/les-6-routes-a-connaitre-avec-le-framework-remix-framework-react) 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](https://zod.dev/), qui peut être erroné, et générer des erreurs.\n\nJe perd donc pas mal de temps à :\n\n- déclarer des schémas Zod\n- réparer des bugs, erreurs d'inattention\n- déclarer des méthodes pour appeler mes routes\n\n### Pourquoi un monorepo ?\n\nUtiliser 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.\n\nVoici les avantages :\n\n- aucune duplication de code\n- aucun schéma zod\n- aucun bug de ce style à régler\n\nC'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.\n\n## Ressources utilisées\n\n- [Repository Github](https://github.com/Varkoff/remix-nestjs-monorepo)\n- [Documentation de Remix](https://remix.run/docs/en/main)\n- [Documentation de NestJS](https://docs.nestjs.com)\n- [Documentation de Turborepo](https://turbo.build/docs)\n- [Documentation de Prisma](https://www.prisma.io/docs)\n- [Formation vidéo sur YouTube](https://www.youtube.com/playlist?list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM)\n\n## Présentation de la stack technique\n\nNous allons utiliser les technologies suivantes pour créer notre application :\n\n### Frontend\n\n- [Remix](https://remix.run)\n- [React](https://react.dev)\n- [ShadcnUI](https://ui.shadcn.com)\n- [TailwindCSS](https://tailwindcss.com)\n- [Conform](https://conform.guide)\n\n### Backend\n\n- [NestJS](https://nestjs.com)\n- [Prisma ORM](https://www.prisma.io/?via=algomax)\n- [Redis](https://redis.io)\n- [Passport.js](https://www.passportjs.org)\n- [express-session](https://www.npmjs.com/package/express-session)\n\n### Librairies communes\n\n- [Turborepo](https://turbo.build)\n- [Typescript](https://www.typescriptlang.org)\n- [Zod](https://zod.dev)\n\n### Qualité de code\n\n- [Prettier](https://prettier.io)\n- [Eslint](https://eslint.org)\n\n### Déploiement\n\n- [Github Actions](https://github.com/features/actions)\n- VPS (serveur hébergé) chez Hostinger\n- [Caddy Server](https://caddyserver.com)\n- [Docker](https://docker.com)",{"_606":247},"quizzQuestions",{"_24":608,"_28":609,"_26":610,"_600":6,"_30":611,"_258":612,"_248":613,"_34":614,"_593":-5,"_250":251,"_53":615},"cm7s4ewp9000396c1j6agrf6i","pre-requis","Pré-requis","Nous téléchargeons une version récente de NodeJS pour faire fonctionner notre monorepo.",["D",1740949553421],["D",1745505951298],"\n\nVous devez au préalable avoir installé NodeJS sur votre machine :\n\n- [Télécharger NodeJS](https://nodejs.org/en/download/)\n\nPour vérifier que NodeJS est bien installé, ouvrez un terminal et tapez la commande suivante :\n\n```bash Terminal\n node -v\n```\n\nCette commande devrait vous renvoyer un numéro de version. Par exemple, `v20.10.0`\n\nEnsuite, il faut télécharger l'outil CLI de NestJS pour générer le projet :\n\n ```bash Terminal\n npm install -g @nestjs/cli\n ```\n \n Nous sommes maintenant prêts pour commencer à coder ! ",{"_606":247},{"_587":-5,"_258":617,"_28":618,"_26":619,"_30":620,"_248":621,"_593":-5,"_250":251,"_594":622},["D",1740949556413],"deploiement-du-projet","Déploiement du projet","Dans ce module, nous allons héberger le code source du projet et l'héberger. Nous configurons la CI/CD, les Github Actions et Docker",["D",1742663843965],[623,632,641,650,659],{"_24":624,"_28":625,"_26":626,"_600":23,"_30":627,"_258":628,"_248":629,"_34":630,"_593":-5,"_250":251,"_53":631},"cm7s4ezaa000g96c1leqk88bn","creation-dune-image-docker","Création d'une image Docker","Nous découvrons l'outil Docker et créons une image Docker pour créer une image de notre application.",["D",1740949556770],["D",1745505959716],"Nous allons utiliser [Docker](https://www.docker.com) pour créer un environnement virtuel isolé contenant le code source de notre application.\n\n\n\nNous allons d'abord créer un fichier nommé `Dockerfile` qui contiendra la configuration de notre image. \nEnsuite, nous allons créer un fichier nommé `.dockerignore` pour lister les fichiers à ignorer lors de la création de l'image Docker.\nEnfin, nous allons créer un fichier nommé `docker-compose.dev.yaml` pour exécuter notre image Docker\n\n## Création du fichier Dockerfile\n\nAvant de coder notre propre image Docker, nous allons d'abord nous inspirer de deux exemples d'images, optimisées pour la production.\n\n### Première inspiration : Dockerfile de Turborepo\n\nNous allons nous inspirer d'un [fichier Dockerfile](https://turbo.build/repo/docs/guides/tools/docker#example) présent sur la documentation officielle de [Turborepo](https://turbo.build/).\n\nVoici le fichier non édité trouvé sur la documentation.\n\n```Dockerfile ./apps/api/Dockerfile\nFROM node:18-alpine AS base\n \nFROM base AS builder\nRUN apk update\nRUN apk add --no-cache libc6-compat\n# Set working directory\nWORKDIR /app\n# Replace with the major version installed in your repository. For example:\n# RUN yarn global add turbo@^2\nRUN yarn global add turbo@^\nCOPY . .\n \n# Generate a partial monorepo with a pruned lockfile for a target workspace.\n# Assuming \"web\" is the name entered in the project's package.json: { name: \"web\" }\nRUN turbo prune web --docker\n \n# Add lockfile and package.json's of isolated subworkspace\nFROM base AS installer\nRUN apk update\nRUN apk add --no-cache libc6-compat\nWORKDIR /app\n \n# First install the dependencies (as they change less often)\nCOPY --from=builder /app/out/json/ .\nRUN yarn install\n \n# Build the project\nCOPY --from=builder /app/out/full/ .\nRUN yarn turbo run build --filter=web...\n \nFROM base AS runner\nWORKDIR /app\n \n# Don't run production as root\nRUN addgroup --system --gid 1001 nodejs\nRUN adduser --system --uid 1001 nextjs\nUSER nextjs\n \n# Automatically leverage output traces to reduce image size\n# https://nextjs.org/docs/advanced-features/output-file-tracing\nCOPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./\nCOPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static\nCOPY --from=installer --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public\n \nCMD node apps/web/server.js\n```\n\n### Deuxième inspiration : Dockerfile de l'Epic-Stack\n\nNous allons aussi nous inspirer d'un [fichier Dockerfile](https://github.com/epicweb-dev/epic-stack/blob/main/other/Dockerfile) du repository [epic-stack](https://github.com/epicweb-dev/epic-stack/), un projet Remix open-source.\n\nVoici son contenu :\n\n```Dockerfile \n# This file is moved to the root directory before building the image\n\n# base node image\nFROM node:20-bookworm-slim as base\n\n# set for base and all layer that inherit from it\nENV NODE_ENV production\n\n# Install openssl for Prisma\nRUN apt-get update && apt-get install -y fuse3 openssl sqlite3 ca-certificates\n\n# Install all node_modules, including dev dependencies\nFROM base as deps\n\nWORKDIR /myapp\n\nADD package.json package-lock.json .npmrc ./\nRUN npm install --include=dev\n\n# Setup production node_modules\nFROM base as production-deps\n\nWORKDIR /myapp\n\nCOPY --from=deps /myapp/node_modules /myapp/node_modules\nADD package.json package-lock.json .npmrc ./\nRUN npm prune --omit=dev\n\n# Build the app\nFROM base as build\n\nARG COMMIT_SHA\nENV COMMIT_SHA=$COMMIT_SHA\n\n# Use the following environment variables to configure Sentry\n# ENV SENTRY_ORG=\n# ENV SENTRY_PROJECT=\n\n\nWORKDIR /myapp\n\nCOPY --from=deps /myapp/node_modules /myapp/node_modules\n\nADD prisma .\nRUN npx prisma generate\n\nADD . .\n\n# Mount the secret and set it as an environment variable and run the build\nRUN --mount=type=secret,id=SENTRY_AUTH_TOKEN \\\n export SENTRY_AUTH_TOKEN=$(cat /run/secrets/SENTRY_AUTH_TOKEN) && \\\n npm run build\n\n# Finally, build the production image with minimal footprint\nFROM base\n\nENV FLY=\"true\"\nENV LITEFS_DIR=\"/litefs/data\"\nENV DATABASE_FILENAME=\"sqlite.db\"\nENV DATABASE_PATH=\"$LITEFS_DIR/$DATABASE_FILENAME\"\nENV DATABASE_URL=\"file:$DATABASE_PATH\"\nENV CACHE_DATABASE_FILENAME=\"cache.db\"\nENV CACHE_DATABASE_PATH=\"$LITEFS_DIR/$CACHE_DATABASE_FILENAME\"\nENV INTERNAL_PORT=\"8080\"\nENV PORT=\"8081\"\nENV NODE_ENV=\"production\"\n# For WAL support: https://github.com/prisma/prisma-engines/issues/4675#issuecomment-1914383246\nENV PRISMA_SCHEMA_DISABLE_ADVISORY_LOCK = \"1\"\n\n# add shortcut for connecting to database CLI\nRUN echo \"#!/bin/sh\\nset -x\\nsqlite3 \\$DATABASE_URL\" > /usr/local/bin/database-cli && chmod +x /usr/local/bin/database-cli\n\nWORKDIR /myapp\n\n# Generate random value and save it to .env file which will be loaded by dotenv\nRUN INTERNAL_COMMAND_TOKEN=$(openssl rand -hex 32) && \\\n echo \"INTERNAL_COMMAND_TOKEN=$INTERNAL_COMMAND_TOKEN\" > .env\n\nCOPY --from=production-deps /myapp/node_modules /myapp/node_modules\nCOPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma\n\nCOPY --from=build /myapp/server-build /myapp/server-build\nCOPY --from=build /myapp/build /myapp/build\nCOPY --from=build /myapp/package.json /myapp/package.json\nCOPY --from=build /myapp/prisma /myapp/prisma\nCOPY --from=build /myapp/app/components/ui/icons /myapp/app/components/ui/icons\n\n# prepare for litefs\nCOPY --from=flyio/litefs:0.5.11 /usr/local/bin/litefs /usr/local/bin/litefs\nADD other/litefs.yml /etc/litefs.yml\nRUN mkdir -p /data ${LITEFS_DIR}\n\nADD . .\n\nCMD [\"litefs\", \"mount\"]\n```\n\n### Notre Dockerfile\n\nC'est finalement cette version qu'on va utiliser (car elle est compatible avec Remix). On pourra ensuite copier les morceaux qui nous intéressent du Dockerfile Turborepo (qui utilise NextJS).\n\nExplications de notre Dockerfile :\n\n\n\n- On télécharge une image de NodeJS (version 18) dans un environnement Linux AMD64\n- Nous effectuons une mise à jour système (avec la commande `RUN apk update`)\n- On crée un dossier `/app` à la racine de notre image, et il devient notre point d'entrée (grâce à la commande `WORKDIR /app`)\n- Nous installons en global la librairie Turborepo avec la commande `npm install -g turbo`\n- Nous copions ensuite l'intégralité des fichiers dans notre dossier `/app` (grâce à la commande `COPY --chown=node:node . .`)\n- Ensuite, nous installons toutes les dépendances du projet (comme on le ferait en local) avec la commande `RUN npm install`\n- Puis nous effectuons un **build** de notre application, qui va compiler le code Typescript et l'optimiser pour la production (avec la commande `RUN npm run build`)\n- Ensuite, nous exécutons le code source du projet (la commande `npm run start`)\n\nVoici le Dockerfile :\n\n```Dockerfile\nFROM --platform=amd64 node:18-alpine As base\n\nFROM base AS builder\n\n# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.\nRUN apk add --no-cache libc6-compat\nRUN apk update\n# Set working directory\nWORKDIR /app\nRUN npm install --global turbo\nCOPY --chown=node:node . .\nRUN turbo prune @virgile/backend --docker\n\n# Add lockfile and package.json's of isolated subworkspace\nFROM base AS installer\nRUN apk add --no-cache libc6-compat\nRUN apk update\nWORKDIR /app\n\n# First install the dependencies (as they change less often)\nCOPY .gitignore .gitignore\nCOPY --chown=node:node --from=builder /app/out/json/ .\nCOPY --chown=node:node --from=builder /app/out/package-lock.json ./package-lock.json\nRUN npm install\n\n# Build the project\nCOPY --from=builder /app/out/full/ .\nCOPY turbo.json turbo.json\n\n# Uncomment and use build args to enable remote caching\nARG TURBO_TEAM\nENV TURBO_TEAM=$TURBO_TEAM\n\nARG TURBO_TOKEN\nENV TURBO_TOKEN=$TURBO_TOKEN\nENV TZ=Europe/Paris\nENV NODE_ENV=\"production\"\n\nADD backend/prisma backend/prisma\nRUN cd backend && npx prisma generate\n\nRUN npm run build\n\nFROM base AS runner\nWORKDIR /app\n\n# Don't run production as root\nRUN addgroup --system --gid 1001 nodejs\nRUN adduser --system --uid 1001 remix-api\nUSER remix-api\n\n# ENV TZ=Europe/Paris\n# ENV NODE_ENV=\"production\"\n\nCOPY --chown=remix-api:nodejs --from=installer /app/backend/package.json ./backend/package.json\nCOPY --chown=remix-api:nodejs --from=installer /app/backend/dist ./backend/dist\nCOPY --chown=remix-api:nodejs --from=installer /app/node_modules ./node_modules\nCOPY --chown=remix-api:nodejs --from=installer /app/node_modules/@virgile/frontend ./node_modules/@virgile/frontend\nCOPY --chown=remix-api:nodejs --from=installer /app/node_modules/@virgile/typescript-config ./node_modules/@virgile/typescript-config\nCOPY --chown=remix-api:nodejs --from=installer /app/node_modules/@virgile/eslint-config ./node_modules/@virgile/eslint-config\nCOPY --chown=remix-api:nodejs --from=installer /app/backend/prisma ./backend/prisma\n\nCOPY --chown=remix-api:nodejs --from=builder /app/backend/start.sh ./backend/start.sh\n\nENTRYPOINT [ \"backend/start.sh\" ]\n```\n\n> Notez qu'il y a davantage d'étapes, assez redondantes qui permettent simplement d'optimiser le poids de l'image Docker\n\nNous allons aussi créer un fichier script, nommé `start.sh` qui va lancer la commande `npm run start` directement. Ce script nous permet d'ajouter des commandes supplémentaires à exécuter avant de lancer l'application.\n\nOn place ce fichier dans le dossier `backend`.\n\n```sh backend/start.sh\n#!/bin/sh\n\nset -ex\ncd backend\nnpx prisma migrate deploy\nnpm run start\n```\n\n## Création du fichier dockerignore\n\nLe fichier `.dockerignore` nous permet de de déclarer certains fichiers à ignorer (lors de leur copie, avec la commande `COPY` par exemple). Le rajouter nous permet d'éviter de copier par erreur des fichiers volumineux et inutiles.\n\nNous en ajoutons un par projet.\n\n### Dockerignore pour le projet NestJS\n\n``` backend/.dockerignore\nDockerfile\n.dockerignore\nnode_modules\nnpm-debug.log\ndist\n```\n\n### Dockerignore pour le projet Remix\n\n``` frontend/.dockerignore\n/node_modules\n*.log\n.DS_Store\n.env\n/.cache\n/public/build\n/build\n```\n\nOn peut maintenant construire notre image Docker.",{"_606":247},{"_24":633,"_28":634,"_26":635,"_600":6,"_30":636,"_258":637,"_248":638,"_34":639,"_593":-5,"_250":251,"_53":640},"cm7s4ezjy000i96c1uvf2p0s6","executer-notre-projet-avec-docker-compose","Exécuter notre projet avec Docker Compose","Dans ce module, nous allons utiliser la commande Docker Compose pour exécuter notre image Docker.",["D",1740949557119],["D",1745505961873],"\n\n## Créer un fichier Docker Compose\n\nVoici notre image Docker : \n\n```Dockerfile\nFROM --platform=amd64 node:18-alpine As base\n\nFROM base AS builder\n\n# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.\nRUN apk add --no-cache libc6-compat\nRUN apk update\n# Set working directory\nWORKDIR /app\nRUN npm install --global turbo\nCOPY --chown=node:node . .\nRUN turbo prune @virgile/backend --docker\n\n# Add lockfile and package.json's of isolated subworkspace\nFROM base AS installer\nRUN apk add --no-cache libc6-compat\nRUN apk update\nWORKDIR /app\n\n# First install the dependencies (as they change less often)\nCOPY .gitignore .gitignore\nCOPY --chown=node:node --from=builder /app/out/json/ .\nCOPY --chown=node:node --from=builder /app/out/package-lock.json ./package-lock.json\nRUN npm install\n\n# Build the project\nCOPY --from=builder /app/out/full/ .\nCOPY turbo.json turbo.json\n\n# Uncomment and use build args to enable remote caching\nARG TURBO_TEAM\nENV TURBO_TEAM=$TURBO_TEAM\n\nARG TURBO_TOKEN\nENV TURBO_TOKEN=$TURBO_TOKEN\nENV TZ=Europe/Paris\nENV NODE_ENV=\"production\"\n\nADD backend/prisma backend/prisma\nRUN cd backend && npx prisma generate\n\nRUN npm run build\n\nFROM base AS runner\nWORKDIR /app\n\n# Don't run production as root\nRUN addgroup --system --gid 1001 nodejs\nRUN adduser --system --uid 1001 remix-api\nUSER remix-api\n\n# ENV TZ=Europe/Paris\n# ENV NODE_ENV=\"production\"\n\nCOPY --chown=remix-api:nodejs --from=installer /app/backend/package.json ./backend/package.json\nCOPY --chown=remix-api:nodejs --from=installer /app/backend/dist ./backend/dist\nCOPY --chown=remix-api:nodejs --from=installer /app/node_modules ./node_modules\nCOPY --chown=remix-api:nodejs --from=installer /app/node_modules/@virgile/frontend ./node_modules/@virgile/frontend\nCOPY --chown=remix-api:nodejs --from=installer /app/node_modules/@virgile/typescript-config ./node_modules/@virgile/typescript-config\nCOPY --chown=remix-api:nodejs --from=installer /app/node_modules/@virgile/eslint-config ./node_modules/@virgile/eslint-config\nCOPY --chown=remix-api:nodejs --from=installer /app/backend/prisma ./backend/prisma\n\nCOPY --chown=remix-api:nodejs --from=builder /app/backend/start.sh ./backend/start.sh\n\nENTRYPOINT [ \"backend/start.sh\" ]\n```\n\nEt voici le fichier `docker-compose.dev.yml` que nous allons configurer ensemble :\n\n```yml docker-compose.dev.yml \nservices:\n monorepo_dev:\n environment:\n - REDIS_URL=redis://redis_dev:6379\n - NODE_ENV=development\n - DATABASE_URL\n\n container_name: nestjs-remix-monorepo-dev\n build:\n context: .\n dockerfile: Dockerfile\n # image: varkoff/nestjs-remix-monorepo:dev\n restart: always\n ports:\n - 3000:3000\n redis_dev:\n image: redis:latest\n restart: always\n ports:\n - '6379:6379'\n command: [\"redis-server\"] \n volumes: \n - ./cache:/data\n```\n\n### Comprendre Docker Compose\n\n**Docker Compose** est conçu pour orchestrer plusieurs conteneurs Docker. Par exemple, une base de donnée Redis, une application frontend et une application backend.\n\nDans notre cas, nous n'utilisons qu'un seul service (pour l'instant). Il s'appelle `monorepo_dev`.\n\nVoici les différentes instructions :\n\n- `environment`: contient les variables d'environnements. Pour chaque variable d'environnement que vous utilisez dans le projet, vous devez **ABSOLUMENT** la rajouter ici. Sinon elle ne sera jamais détectée par notre application.\n- `container_name`: le nom de notre conteneur. Utile lorsque nous voudrons lancer plusieurs conteneurs, par exemple un environnement de staging et un environnement de production.\n- `build`: le contexte de notre build. En production, nous allons télécharger l'image Docker directement depuis Docker Hub. En local, nous allons utiliser le Dockerfile pour créer notre propre image Docker. (Pour s'assurer que l'application se build sans erreur.)\n- `restart`: cette instruction permet de redémarrer le conteneur (notre application) en cas de crash. Très utile.\n- `ports`: Nous effectuons ici du reverse proxy. Par défaut, notre application tourne dans une image virtualisée, elle est inaccessible en dehors du conteneur. Avec cette instruction, nous *bindons* le port 3000 de notre machine hôte (ordinateur en local) sur le port 3000 de l'image virtualisée. Cela signifie que Docker va nous autoriser à accéder à son port 3000.\n- `volumes`: Cette instruction est nécessaire lorsque nous utilisons une base de données, ou que nous souhaitons conserver les fichiers sauvegardés sur le disque dur du serveur. Si cette instruction n'est pas présente, les fichiers seront supprimés à chaque fois que le conteneur est relancé (à chaque mise en production).\n\nMaintenant, nous allons créer le même fichier qui lancera notre application en production.\n\nIl est similaire, à l'exception qu'il n'effectuera pas un build sur le serveur qui lance l'application. Le build sera lancé en amont durant la CI/CD avec Github Actions.\n\nPour différencier les deux images en inspectant les logs avec la commande `docker ps`, nous nommons le container `nestjs-remix-monorepo-prod` au lieu de `nestjs-remix-monorepo-dev`.\n```yml docker-compose.prod.yml\nservices:\n monorepo_prod:\n environment:\n - REDIS_URL=redis://redis_prod:6379\n - NODE_ENV\n - DATABASE_URL\n\n\n container_name: nestjs-remix-monorepo-prod\n image: varkoff/nestjs-remix-monorepo:production\n restart: always\n ports:\n - 3000:3000\n redis_prod:\n image: redis:latest\n restart: always\n command: [\"redis-server\"] \n volumes: \n - /dev/volumes/nestjs-remix/production/sessions/:/data\n```\n\n## Création d'un compte Docker Hub\n\n\n\nNous devons maintenant créer un compte gratuit sur le site [Docker Hub](https://hub.docker.com/).\n\nUne fois connecté, nous allons créer un nouveau repository. Nous allons lui donner le même nom que l'on a défini dans notre fichier `docker-compose.prod.yml` à savoir `nestjs-remix-monorepo`.\n\nL'instruction `image: varkoff/nestjs-remix-monorepo:production` signifie que notre image Docker se nommera `varkoff/nestjs-remix-monorepo` ou `varkoff` représente le nom de votre compte DOcker, et `production` le tag de l'image.\n\nSauf que le repository ne contient pas encore d'image hébergée. Nous venons tout juste de le créer.\n\nDans la prochaine leçon, nous allons configurer les [Github Actions](https://github.com/features/actions) pour automatiquement mettre à jour notre application sur le serveur de production.",{"_606":247},{"_24":642,"_28":643,"_26":644,"_600":6,"_30":645,"_258":646,"_248":647,"_34":648,"_593":-5,"_250":251,"_53":649},"cm7s4ezpy000j96c1cai8e24s","configurer-github-actions","Configurer Github Actions","Nous configurons Github Actions pour exécuter des tests avant de mettre à jour notre code source sur les serveurs de production.",["D",1740949557335],["D",1745505964467],"\n\n\n## Comprendre les Github Actions\n\nLes [Github Actions](https://github.com/features/actions) nous permettent d'exécuter les scripts du projet automatiquement.\n\nPar scripts, j'entend :\n- tests unitaires\n- exécuter Typescript pour détecter les erreurs de type\n- exécuter ESlint pour détecter les erreurs de code\n\nSi ces tests passent, nous pouvons être sûrs que l'application fonctionnera correctement sur le serveur de production. Du moins, ça nous évitera quelques surprises.\n\nNous allons donc configurer Github pour d'abord exécuter ces tests. S'ils passent, nous allons compiler le code source de notre application (avec un *build*) et envoyer l'image sur les serveurs de Docker.\n\nEt enfin, nous téléchargerons cette image Docker sur le serveur pour exécuter notre application.\n\n## Pré-requis pour configurer nos actions\n\nPour configurer nos actions Github, nous avons besoin de :\n- créer un [compte Github](https://github.com/join) (gratuitement)\n- créer un [repository](https://repo.new/), sur lequel nous allons héberger notre projet\n- créer un compte [Docker Hub](https://hub.docker.com) et [générer un token d'accès](https://app.docker.com/settings/personal-access-tokens)\n\n## Créer notre premier workflow\n\nNous allons créer le fichier qui va contenir les instructions que Github Actions va exécuter.\n\nPour ce faire, nous allons à la racine de notre projet créer un dossier nommé `.github`.\n\n```sh Terminal\nmkdir .github\n```\n\nÀ l'intérieur, nous allons créer un fichier dossier nommé `workflows`.\n\n```sh Terminal\ncd .github && mkdir workflows\n```\n\nEnfin, nous allons créer un fichier dans ce dossier, nommé `ci.yml`.\n\n```sh Terminal\ntouch .github/workflows/ci.yml\n```\n\nCe fichier va contenir la configuration de notre workflow.\n\nVoici son contenu :\n\n```yaml .github/workflows/ci.yml\nname: 🚀 Deploy\non:\n push:\n branches:\n - main\n - dev\n pull_request: {}\n\npermissions:\n actions: write\n contents: read\n\njobs:\n lint:\n name: ⬣ ESLint\n runs-on: ubuntu-latest\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n TURBO_REMOTE_ONLY: true\n\n steps:\n - name: Check out code\n uses: actions/checkout@v4\n with:\n fetch-depth: 2\n\n - name: Setup Node.js environment\n uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: 'npm'\n\n - name: Install dependencies\n run: npm install\n\n - name: Build Application\n run: npm run build\n\n - name: 🔬 Lint\n run: npm run lint\n\n typecheck:\n name: ʦ TypeScript\n runs-on: ubuntu-latest\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n TURBO_REMOTE_ONLY: true\n\n steps:\n - name: Check out code\n uses: actions/checkout@v4\n with:\n fetch-depth: 2\n\n - name: Setup Node.js environment\n uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: 'npm'\n\n - name: Install dependencies\n run: npm install\n\n - name: Build Application\n run: npm run build\n\n - name: 🔎 Type check\n run: npm run typecheck --if-present\n\n build:\n name: 🐳 build\n uses: ./.github/workflows/build.yml\n secrets: inherit\n\n deploy:\n name: 🚀 Deploy\n runs-on: [self-hosted]\n needs: [build, lint, typecheck]\n if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n TURBO_REMOTE_ONLY: true\n\n steps:\n - name: Cache node modules\n uses: actions/cache@v4.0.0\n with:\n path: ~/.npm\n key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n ${{ runner.os }}-node-\n\n - name: ⬇️ Checkout repo\n uses: actions/checkout@v4.1.1\n\n - name: Login to Docker Hub\n uses: docker/login-action@v2\n with:\n username: ${{ secrets.DOCKERHUB_USERNAME }}\n password: ${{ secrets.DOCKERHUB_TOKEN }}\n - name: 🚀 Run Docker Compose on Staging\n if: ${{ github.ref == 'refs/heads/dev' }}\n env:\n NODE_ENV: staging\n run: |\n docker pull varkoff/nestjs-remix-monorepo:latest\n docker compose -f docker-compose.staging.yaml up -d\n docker system prune --all --volumes --force\n\n - name: 🚀 Run Docker Compose on Production\n if: ${{ github.ref == 'refs/heads/main' }}\n env:\n NODE_ENV: production\n DATABASE_URL: ${{ secrets.DATABASE_URL }}\n run: |\n docker pull varkoff/nestjs-remix-monorepo:production\n docker compose -f docker-compose.prod.yml up -d\n docker system prune --all --volumes --force\n```\n\nAnalysons ce fichier.\n\n### Anatomie d'une Action Github\n\nLes déclarations en début de fichier ont la signification suivante :\n\n```yaml .github/workflows/ci.yml\nname: 🚀 Deploy\non:\n push:\n branches:\n - main\n - dev\n pull_request: {}\n\npermissions:\n actions: write\n contents: read\n```\n\n- \"name\": Le nom de notre workflow.\n- \"on\": Les événements qui vont déclencher notre workflow. Ici, un `push` sur la branche main ou dev. (Les pull request validées sont aussi des push). `pull-request: {}` signifie que notre workflow sera déclenché à chaque ouverture de pull request.\n- \"permissions\": Les permissions que notre workflow va utiliser. `actions: write` signifie que notre workflow va pouvoir utiliser les actions Github. `contents: read` signifie que notre workflow va pouvoir lire le code source.\n\nEnsuite, nous définissons les **jobs** (donc les actions) que notre workflow va exécuter.\n\nChaque job possède plusieurs instructions :\n- `name`: Le nom de la tâche.\n- `runs-on`: Le runner que va utiliser Github pour exécuter la tâche. Nous pouvons configurer un runner sur notre serveur (self-hosted) ou sur Github. `ubuntu-latest` est le runner par défaut de Github pour les environnements Linux.\n- `env`: Les variables d'environnement que notre job va utiliser.\n- `steps`: Les étapes que notre job va exécuter. Il faut au moins définir une étape. Certaines étapes seront redondantes d'un job à l'autre, mais c'est plus simple de les définir dans chaque job.\n\nRegardons-les de plus près.\n\n#### Comment utiliser ESlint et Typescript dans une Github Actions\n\nPour utiliser ESlint dans une Github Actions, nous allons définir un job nommé `lint`.\n\n```yaml .github/workflows/ci.yml\nlint:\n name: ⬣ ESLint\n runs-on: ubuntu-latest\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n TURBO_REMOTE_ONLY: true\n\n steps:\n - name: Check out code\n uses: actions/checkout@v4\n with:\n fetch-depth: 2\n\n - name: Setup Node.js environment\n uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: 'npm'\n\n - name: Install dependencies\n run: npm install\n\n - name: Build Application\n run: npm run build\n\n - name: 🔬 Lint\n run: npm run lint\n```\n\nIci, nous exécutons successivement plusieurs commandes (déclarées sous l'instruction `steps`) : \n- `actions/checkout@v4`: Cette action permet de récupérer le code source de notre projet. Sans elle, on exécuterait les commandes d'après dans le vide.\n- `actions/setup-node@v4`: Cette action permet de configurer l'environnement Node.js sur notre job et de l'installer. Sans elle, on ne peut pas exécuter Javascript.\n- `npm install`: Cette commande permet d'installer les dépendances de notre projet. (Comme en local)\n- `npm run build`: Cette commande permet de lancer le build de notre projet. (Comme en local)\n- `npm run lint`: Cette commande permet d'exécuter ESlint sur notre projet. (Comme en local)\n\nPour l'action Typescript, ce sera exactement le même esprit. Au lieu de lancer la commande `npm run lint`, nous allons lancer la commande `npm run typecheck`.\n\n```yaml .github/workflows/ci.yml\ntypecheck:\n name: ʦ TypeScript\n runs-on: ubuntu-latest\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n TURBO_REMOTE_ONLY: true\n\n steps:\n - name: Check out code\n uses: actions/checkout@v4\n with:\n fetch-depth: 2\n\n - name: Setup Node.js environment\n uses: actions/setup-node@v4\n with:\n node-version: 20\n cache: 'npm'\n\n - name: Install dependencies\n run: npm install\n\n - name: Build Application\n run: npm run build\n\n - name: 🔎 Type check\n run: npm run typecheck --if-present\n```\n\n#### Comment build une image Docker dans une Github Actions\n\nPour build l'image Docker de notre application, nous allons exécuter la commande `docker build` sur les serveurs de Github. Notez que c'est la même commande que nous avions utilisée précédemment pour vérifier que notre Dockerfile fonctionnait.\n\nAprès avoir build notre image, nous allons l'héberger sur Docker Hub (dans le repository que nous venons de créer).\n\nNotez que l'action déclarée dans notre fichier `ci.yml` appelle un autre fichier `build.yml` du fichier `.github/workflows`.\n\nVoici le fichier `build.yml` :\n\n```yaml .github/workflows/build.yml\nname: 🐳 Build And Push Docker Image\non:\n workflow_call:\n inputs:\n tag:\n type: string\n description: The tag to push to the Docker registry.\n\njobs:\n build:\n name: 🐳 Build\n if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}\n runs-on: ubuntu-latest\n steps:\n - name: ⬇️ Checkout repo\n uses: actions/checkout@v4.1.1\n\n - name: 🧑‍💻 Login to Docker Hub\n uses: docker/login-action@v3.0.0\n with:\n username: ${{ secrets.DOCKERHUB_USERNAME }}\n password: ${{ secrets.DOCKERHUB_TOKEN }}\n logout: true\n\n - name: 🐳 Set up Docker Buildx\n uses: docker/setup-buildx-action@v3.0.0\n\n # Setup cache\n - name: ⚡️ Cache Docker layers\n uses: actions/cache@v4.0.0\n with:\n path: /tmp/.buildx-cache\n key: ${{ runner.os }}-buildx-${{ github.sha }}-${{ github.ref_name }}\n restore-keys: |\n ${{ runner.os }}-buildx-\n - name: 🐳 Build Production Image\n if: ${{ github.ref == 'refs/heads/main' }}\n uses: docker/build-push-action@v5.1.0\n with:\n context: .\n push: true\n tags: varkoff/nestjs-remix-monorepo:production\n cache-from: type=local,src=/tmp/.buildx-cache\n cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new\n\n - name: 🐳 Build Staging Image\n if: ${{ github.ref == 'refs/heads/dev' }}\n uses: docker/build-push-action@v5.1.0\n with:\n context: .\n push: true\n tags: varkoff/nestjs-remix-monorepo:latest\n cache-from: type=local,src=/tmp/.buildx-cache\n cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new\n\n # This ugly bit is necessary if you don't want your cache to grow forever\n # till it hits GitHub's limit of 5GB.\n # Temp fix\n # https://github.com/docker/build-push-action/issues/252\n # https://github.com/moby/buildkit/issues/1896\n - name: 🚚 Move cache\n run: |\n rm -rf /tmp/.buildx-cache\n mv /tmp/.buildx-cache-new /tmp/.buildx-cache\n```\n\nCette action possède des instructions en plus : \n\n- `if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}` : Cette instruction permet de définir que notre job ne sera exécuté que si le push est sur la branche main ou dev. (Pour ce faire, il faut bien sûr avoir nommer vos branches Github de cette manière). Pour tout push sur une autre branche, ce code ne sera pas exécuté.\n- `actions/checkout@v4.1.1` : Cette instruction permet de récupérer le code source de notre projet. (comme pour les commandes précédentes).\n- `uses: docker/login-action@v3.0.0` : Cette instruction permet de se connecter à Docker Hub. Pour ce faire, il faut générer un token ici [https://app.docker.com/settings/personal-access-tokens](https://app.docker.com/settings/personal-access-tokens).\n- `uses: docker/setup-buildx-action@v3.0.0` : Cette instruction permet de configurer le buildx de Docker. (Le client Docker multi-arch).\n- `actions/cache@v4.0.0` : Cette instruction permet de mettre en cache les layers de Docker. (Pour accélérer le processus de build, qui est parfois très long...).\n- `uses: docker/build-push-action@v5.1.0` : Cette instruction permet de build et de push notre image Docker sur Docker Hub.\n\nEnsuite, nous dupliquons la dernière étape de notre job pour build l'image en production et en staging.\n\nVoici l'instruction pour build l'image en production :\n\n```yaml .github/workflows/build.yml\n- name: 🐳 Build Production Image\n if: ${{ github.ref == 'refs/heads/main' }}\n uses: docker/build-push-action@v5.1.0\n with:\n context: .\n push: true\n tags: varkoff/nestjs-remix-monorepo:production\n cache-from: type=local,src=/tmp/.buildx-cache\n cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new\n```\n\nNotez l'instruction `if: ${{ github.ref == 'refs/heads/main' }}` signifiant que cette étape sera ignorée lors d'un push sur la branche `dev`.\nEnsuite, nous définissons le contexte (similaire à la commande `docker build -t varkoff/nestjs-remix-monorepo:production .`) avec `context: .` et `tags: varkoff/nestjs-remix-monorepo:production`. L'élément `push: true` permet de push notre image sur Docker Hub.\n\nCette action va échouer si vos identifiants Docker Hub ne sont pas bons, ou si une erreur se produisait dans le build (par exemple, une erreur de syntaxe dans notre Dockerfile).\n\n#### Comment déployer notre application\n\nMaintenant, à chaque nouveau push sur les branches `main` ou `dev`, Github va exécuter notre workflow. Il va donc valider le code avec **Typescript** et **ESlint**, et il va build et push notre image Docker sur Docker Hub.\n\nUne fois ces trois étapes passées sans erreur, notre image sera disponible sur Docker Hub.\n\nLa dernière action sera de télécharger cette image depuis Docker Hub et l'exécuter sur notre serveur VPS. Nous configurons un [serveur VPS hébergé chez Hostinger](/hostinger) dans la prochaîne leçon.\n\nVoici l'action qui va permettre de déployer notre application :\n\n```yaml .github/workflows/ci.yml\ndeploy:\n name: 🚀 Deploy\n runs-on: [self-hosted]\n needs: [build, lint, typecheck]\n if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}\n env:\n TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\n TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\n TURBO_REMOTE_ONLY: true\n\n steps:\n - name: Cache node modules\n uses: actions/cache@v4.0.0\n with:\n path: ~/.npm\n key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n ${{ runner.os }}-node-\n\n - name: ⬇️ Checkout repo\n uses: actions/checkout@v4.1.1\n\n - name: Login to Docker Hub\n uses: docker/login-action@v2\n with:\n username: ${{ secrets.DOCKERHUB_USERNAME }}\n password: ${{ secrets.DOCKERHUB_TOKEN }}\n - name: 🚀 Run Docker Compose on Staging\n if: ${{ github.ref == 'refs/heads/dev' }}\n env:\n NODE_ENV: staging\n run: |\n docker pull varkoff/nestjs-remix-monorepo:latest\n docker compose -f docker-compose.staging.yaml up -d\n docker system prune --all --volumes --force\n\n - name: 🚀 Run Docker Compose on Production\n if: ${{ github.ref == 'refs/heads/main' }}\n env:\n NODE_ENV: production\n DATABASE_URL: ${{ secrets.DATABASE_URL }}\n run: |\n docker pull varkoff/nestjs-remix-monorepo:production\n docker compose -f docker-compose.prod.yml up -d\n docker system prune --all --volumes --force\n```\n\nAnalysons ensemble les différences.\n\nNous retrouvons deux instructions supplémentaires :\n\n`needs: [build, lint, typecheck]` : Cette instruction permet de définir que notre job ne sera exécuté que si les jobs `build`, `lint` et `typecheck` ont tous réussi. Le cas échéant, le code source ne sera pas mis à jour sur la prod.\n\n`runs-on: [self-hosted]` : Cette instruction permet de définir que notre job va être exécuté sur notre serveur VPS. Les serveurs de Github sont temporaires pour vérifier la qualité du code source, mais nous devons louer un serveur VPS qui exécutera en permanence notre application.\n\nVoici les étapes :\n\n- `action/cache@v4.0.0`: Cette instruction permet de mettre en cache les dépendances de notre projet. (Comme en local)\n- `actions/checkout@v4.1.1`: Cette instruction permet de récupérer le code source de notre projet, comme pour les actions précédentes.\n- `docker/login-action@v2`: Cette instruction permet de se connecter à Docker Hub (pour être autorisé à télécharger notre image privée)\n- `docker compose -f docker-compose.prod.yml up -d`: Cette instruction permet de démarrer notre application en production, en utilisant le fichier `docker-compose.prod.yml` que nous avons défini précédemment.\n- `docker system prune --all --volumes --force`: Cette instruction permet de nettoyer notre serveur VPS. (Pour éviter d'utiliser toute la capacité de stockage de notre serveur)\n\nUne fois notre workflow entièrement terminé, notre application sera disponible sur notre serveur VPS. Cependant, nous devons maintenant configurer un serveur VPS (pour exécuter le code source) et configurer notre domaine.\n\n## Comment déclencher une Github Action\n\nPour déclencher nos actions, nous devons faire un commit et un push sur notre repository Github. Il faut au préalable avoir [créé un repository](https://repo.new/) sur Github.\n\n```sh Terminal\ngit add .\ngit commit -m \"Deploy\"\ngit push origin HEAD # sur la branche main ou dev\n```\n\nUne fois ces commandes exécutées, notre workflow sera déclenché.\n\nPour consulter l'avancement de notre workflow, il faut aller sur la page du repository Github, dans l'onglet `Actions`.\n\n![Voir nos actions Github](https://algomax-public.s3.eu-west-3.amazonaws.com/github_actions_tab_6804d37237.png)\n\nSi l'on clique sur l'action que nous venons de déclencher, la plupart de nos actions devraient avoir réussies. À l'exception de l'action de déploiement, qui nécessite un accès à notre serveur.\n\n\n![Github Actions ayant échoué](https://algomax-public.s3.eu-west-3.amazonaws.com/failed_github_actions_2203d35f04.png)\n\nOn va le configurer tout de suite.",{"_606":247},{"_24":651,"_28":652,"_26":653,"_600":23,"_30":654,"_258":655,"_248":656,"_34":657,"_593":-5,"_250":251,"_53":658},"cm7s4ez5h000f96c1vmpdbvjp","heberger-le-code-source-sur-github","Héberger le code source sur Github","Nous hébergeons le code source de notre application Remix sur Github",["D",1740949556578],["D",1745505967813],"\n\nAvant d'aller plus loin, je vous conseille de versionner le code source sur [Github](https://github.com). Cela vous permet de sauvegarder ce projet, et de le mettre à jour régulièrement.\n\nPour ce faire, il est recommendé de vérifier la configuration `.gitignore` pour être sûr de ne pas versionner les fichiers volumineux.\n\n```bash Terminal\ntouch .gitignore\n```\n\nJe recommande la configuration suivante pour ce projet.\n\n```bash .gitignore\n.turbo\nnode_modules\n\n/dist\n/node_modules\n/build\n\nlogs\n*.log\nnpm-debug.log*\npnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n.DS_Store\n\n/coverage\n/.nyc_output\n\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n\n.env\n.env.development.local\n.env.test.local\n.env.production.local\n.env.local\n\n.temp\n.tmp\n\npids\n*.pid\n*.seed\n*.pid.lock\n\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\nout/\n```\n\nVous retrouverez le code source de ce projet sur Github en cliquant [sur ce lien](https://github.com/varkoff/remix-nestjs-monorepo)\n\nMaintenant, place au déploiement.",{"_606":247},{"_24":660,"_28":661,"_26":662,"_600":6,"_30":663,"_258":664,"_248":665,"_34":666,"_593":-5,"_250":251,"_53":667},"cm7s4ezeu000h96c1ybl3h46f","construire-notre-image-docker-avec-docker-build","Construire notre image Docker (avec Docker Build)","Nous allons construire notre image Docker avec la commande Docker build.",["D",1740949556934],["D",1745505957238],"\n\n\n## Télécharger le client Docker\n\nNous allons à présent exécuter des commandes de terminal lié à Docker. Télécharger l'exécutable est donc un pré-requis.\n\nVous pouvez télécharger le [client Docker](https://www.docker.com/products/docker-desktop). Il est disponible sur Mac, Windows et Linux.\n\nUne fois installé, le client ressemble à ça : \n\n![Client Docker](https://algomax-public.s3.eu-west-3.amazonaws.com/docker_client_d12ed9dcbd.png)\n\nCette application doit être ouverte pour pouvoir utiliser les commandes de terminal.\n\n\n## Lancer notre premier Docker Build\n\nNous pouvons ensuite faire un premier **build** de notre application.\n\nPour cela, il faut se placer dans le dossier du projet, et exécuter la commande suivante : \n\n```bash Terminal\ndocker build -t goodcollect/mnoorepo:dev .\n```\n\nCette commande peut échouer si l'une des instructions présente dans le fichier *Dockerfile* échoue.\n\n> Dans la vidéo, nous avions une erreur liée au fichier `start.sh`.\n> La commande `COPY --chown=remix-api:nodejs --from=builder /app/backend/start.sh ./backend/start.sh` était erronée. \n\nAprès avoir résolu toutes les erreurs, lancer le build ne devrait plus provoquer d'erreur.\n\n```bash Terminal\ndocker build -t goodcollect/mnoorepo:dev .\n```\n> Veillez à télécharger toutes les librairies nécessaires avant de lancer le build. Un simple `npm install` peut résoudre les erreurs de dépendances.\n\nDans la vidéo, nous avions besoin d'installer la librairie `turbo` à l'intérieur du projet. On l'avait téléchargée en global, ce qui la rendait inaccessible dans l'image Docker.\n\n```bash Terminal\nnpm install -D turbo\n```\n\nD'ailleurs, après avoir relancé la commande `docker build` plusieurs fois, on se rend compte que les étapes réussies ne sont plus exécutées. Elles ont été mises en **cache**.\n\nLa commande `docker build` ne provoquant plus d'erreur, nous pouvons l'exécuter dans notre fichier `docker-compose.dev.yml`.",{"_606":247},{"_587":-5,"_258":669,"_28":670,"_26":671,"_30":672,"_248":673,"_593":-5,"_250":251,"_594":674},["D",1740949553711],"configuration-du-projet","Configuration du projet","Dans ce module, nous allons configurer toutes les parties de notre monorepo.",["D",1742663853536],[675,684,693,702,711,720,729,738,747],{"_24":676,"_28":677,"_26":678,"_600":23,"_30":679,"_258":680,"_248":681,"_34":682,"_593":-5,"_250":251,"_53":683},"cm7s4eybt000996c1p3vd8qao","demonstration-du-code","Démonstration du code","Nous testons l'intégration de Remix et NestJS.",["D",1740949555529],["D",1745505982229],"## Ajout d'une route Remix de démonstration\n\n\n\nLe but de cette stack est de pouvoir bénéficier de la puissance de Remix.js tout en utilisant l'architecture modulaire de NestJS. La logique métier sera contenu dans les services de NestJS. Ce que nous voulons faire, c'est vérifier que l'intégration entre les deux projets fonctionne correctement. Pour ce faire, nous allons créer une route Remix qui va appeler une méthode de service NestJS.\n\n### Création d'une route Remix\n\nPour créer une route, il nous suffit d'ajouter un fichier dans le dossier `frontend/app/routes` (ce dossier contient toutes les routes de notre application Remix).\n\nNous l'avions vu dans l'article [6 Routes à connaître si tu utilises Remix](/blog/les-6-routes-a-connaitre-avec-le-framework-remix-framework-react).\n\nPour créer une route, il nous suffit d'ajouter un fichier dans le dossier `app/routes`, qui exporte une méthode loader (pour créer une API) ou un composant React _par défaut_ (pour créer une vue).\n\n```tsx frontend/app/routes/api.tsx\nimport { json } from '@remix-run/node';\nexport const loader = () => {\n\treturn json({\n\t\tstatus: 'ok',\n\t});\n};\n```\n\nNous venons de créer une route _API_, communément appelée _Ressource Route_. Elle ne renvoie pas une vue car aucun composant React n'a été exporté par défaut. Mais elle renvoie une réponse JSON.\n\nOn peut lancer le projet à la racine avec la commande `npm run dev`, et naviguer à l'URL `localhost:3000/api` pour voir le résultat.\n\n```json localhost:3000/api\n{\n\t\"status\": \"ok\"\n}\n```\n\nVictoire ! Notre réponse JSON s'affiche bien. Essayons maintenant d'afficher une vue en créant un composant React dans le même fichier.\n\n```tsx frontend/app/routes/api.tsx\nimport { json } from '@remix-run/node';\nexport const loader = () => {\n\treturn json({\n\t\tstatus: 'ok',\n\t});\n};\n\nexport default function Page() {\n\treturn

Hello

;\n}\n```\n\nActualisons la page. Nous devrions voir le texte `Hello` s'afficher.\n\n![Notre page Remix affiche un composant Hello](https://algomax-public.s3.eu-west-3.amazonaws.com/image_12_ba59477ae6.png)\n\nDeuxième victoire ! Notre route Remix fonctionne correctement. Nous allons maintenant importer un service NestJS dans notre application Remix.\n\n### Ajout du RemixService (dans NestJS)\n\n\n\nIl est temps de créer notre premier service NestJS. Il ne va pas contenir de logique métier à proprement parler, il nous permettra d'importer tous les autres services de notre application, qui eux la contiendront.\n\nCréons un nouveau fichier `remix.service.ts` dans le dossier `backend/src/remix`.\n\n```typescript backend/src/remix/remix.service.ts\nimport { Injectable } from '@nestjs/common';\n\n@Injectable()\nexport class RemixService {\n\tpublic readonly getHello = (): string => {\n\t\treturn 'Hello World!';\n\t};\n}\n```\n\nNous avons ajouté une méthode `getHello` qui renvoie une chaîne de caractères. Nous allons ensuite appeler cette méthode dans Remix pour vérifier que tout fonctionne correctement.\n\nN'oublions pas d'abord d'importer ce service dans le fichier `app.module.ts`\n\n```typescript backend/src/app.module.ts\nimport { Module } from '@nestjs/common';\nimport { RemixController } from './remix/remix.controller';\nimport { RemixService } from './remix/remix.service';\n\n@Module({\n\timports: [],\n\tcontrollers: [RemixController],\n\tproviders: [RemixService],\n})\nexport class AppModule {}\n```\n\nPour pouvoir détecter la déclaration des types de notre application NestJS, nous devons modifier le fichier `package.json`. (On avait fait la même chose pour Remix.js, déclarant le point d'entrée, le fichier `index.cjs`)\n\nIl nous suffit de rajouter ces deux lignes dans le fichier `backend/package.json`.\n\n```json backend/package.json\n{\n\t\"main\": \"./dist/remix/remix.service.js\",\n\t\"types\": \"./dist/remix/remix.service.d.ts\"\n}\n```\n\nPourquoi pointe-t-on vers les fichiers compilés du serveur Remix ? Parce que ce sont les seuls fichiers que nous allons exécuter depuis notre application Remix. Pour générer ces fichiers, nous devons lancer la commande `npm run build` à la racine de notre projet.\n\n```bash Terminal\nnpm run build\n```\n\nComment utiliser ce service ? Nous allons l'importer dans notre controlleur `RemixController`.\n\nNous allons ensuite le renvoyer au contexte de Remix, tel quel.\n\n```typescript backend/src/remix/remix.controller.ts\nimport { All, Controller, Next, Req, Res } from '@nestjs/common';\nimport { createRequestHandler } from '@remix-run/express';\nimport { getServerBuild } from '@virgile/frontend';\nimport { NextFunction, Request, Response } from 'express';\nimport { RemixService } from './remix.service';\n\n@Controller()\nexport class RemixController {\n\tconstructor(private remixService: RemixService) {}\n\n\t@All('*')\n\tasync handler(\n\t\t@Req() request: Request,\n\t\t@Res() response: Response,\n\t\t@Next() next: NextFunction\n\t) {\n\t\t//\n\t\treturn createRequestHandler({\n\t\t\tbuild: await getServerBuild(),\n\t\t\tgetLoadContext: () => ({\n\t\t\t\ttoto: 'Salut, ça va ?',\n\t\t\t\tremixService: this.remixService,\n\t\t\t}),\n\t\t})(request, response, next);\n\t}\n}\n```\n\nN'oublions pas de re-compiler ce code avec la commande `npm run dev`, avant de passer à la suite.\n\n### De retour dans Remix.js\n\nVoici notre première route, nommée `api.tsx`. Pour récupérer le service envoyé par NestJS, nous devons ajouter des arguments à notre méthode loader (que Remix se charge de nous fournir)\n\nNous pouvons ensuite extraire l'object `context`, qui contient toute information qu'on souhaite partager depuis le serveur NestJS.\n\n```tsx frontend/app/routes/api.tsx\nimport { json, type LoaderFunctionArgs } from '@remix-run/node';\nexport const loader = ({ context }: LoaderFunctionArgs) => {\n\treturn json({\n\t\tstatus: 'ok',\n\t});\n};\n\nexport default function Page() {\n\treturn

Hello

;\n}\n```\n\n Plus haut, notre fichier `RemixController` renvoyait le service `RemixService` dans le contexte, ainsi que la variable `toto`.\n\n Elles sont déjà accessibles dans Remix, bien qu'on ne possède pas encore l'autocomplétion.\n\n> Je ne peux plus me passer de l'autocomplétion. Nous allons donc l'ajouter.\n\n### Ajouter l'autocomplétion des méthodes de NestJS dans Remix\n\n\n\nPour bénéficier de l'autocomplétion, nous devons écrire une **déclaration de module** (ce que nous avions fait tout à l'heure dans le fichier `frontend/index.d.cts`)\n\nCette fois, nous allons la copier directement dans le fichier `frontend/root.tsx`\n\nIl nous suffit de rajouter cette syntaxe n'importe où dans le fichier `frontend/root.tsx`\n\n```tsx frontend/root.tsx\ndeclare module '@remix-run/node' {\n\tinterface AppLoadContext {\n\t\tremixService: RemixService;\n\t\ttoto: string;\n\t}\n}\n```\n\nBien sûr, nous avons également besoin d'importer le type `RemixService`, en haut du fichier.\n\n```tsx frontend/root.tsx\nimport { type RemixService } from '@virgile/backend';\n```\n\nCela nous donne le fichier suivant :\n\n```tsx frontend/root.tsx\nimport type { LoaderFunctionArgs } from '@remix-run/node';\nimport {\n\tLinks,\n\tMeta,\n\tOutlet,\n\tScripts,\n\tScrollRestoration,\n} from '@remix-run/react';\nimport { type RemixService } from '@virgile/backend';\n\ndeclare module '@remix-run/node' {\n\tinterface AppLoadContext {\n\t\tremixService: RemixService;\n\t\tuser: unknown;\n\t}\n}\n\nexport function Layout({ children }: { children: React.ReactNode }) {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{children}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n\nexport default function App() {\n\treturn ;\n}\n```\n\nGrâce à cet ajout, nous possédons maintenant l'autocomplétion dans le `context` de Remix. Regardez:\n\n![Notre context Remix.js possède maintenant l'autocomplétion depuis l'application NestJS](https://algomax-public.s3.eu-west-3.amazonaws.com/image_13_54dfbc31eb.png)\n\n#### Utiliser le service RemixService dans notre route\n\nNous pouvons maintenant utiliser le service `RemixService` dans notre route `api.tsx`. Nous allons appeler la méthode `getHello` côté serveur (dans la méthode _loader_) pour bénéficier de sa valeur côté client.\n\nNous sommes donc en train de :\n\n- Appeler une méthode NestJS côté serveur\n- Renvoyer son résultat côté client\n- Récupérer le résultat côté client dans notre composant React\n\n```tsx frontend/app/routes/api.tsx\nimport { json, type LoaderFunctionArgs } from '@remix-run/node';\nexport const loader = ({ context }: LoaderFunctionArgs) => {\n\treturn json({\n\t\tmessage: context.remixService.getHello(),\n\t});\n};\n\nexport default function Page() {\n\tconst { message } = useLoaderData();\n\treturn

{message}

;\n}\n```\n\n![Notre route Remix réussit à appeler une méthode définie dans notre application NestJS](https://algomax-public.s3.eu-west-3.amazonaws.com/image_14_9936117171.png)\n\nIl nous reste plus qu'à configurer [Turborepo](https://turbo.build) ! Ensuite, nous pourrons passer au développement de notre application.\n",{"_606":247},{"_24":685,"_28":686,"_26":687,"_600":23,"_30":688,"_258":689,"_248":690,"_34":691,"_593":-5,"_250":251,"_53":692},"cm7s4exty000796c14jpyvv0i","configuration-du-monorepo","Configuration du monorepo","Nous configurons un package.json à la racine du projet et installons Turborepo, pour orchestrer l'exécution de nos deux projets. ",["D",1740949554886],["D",1745505977591],"\n## Configuration du monorepo\n\n\n\nPour configurer le monorepo, nous avons besoin de reculer d'un dossier.\n\n```bash Terminal\ncd .. # Pour remonter d'un dossier, si vous êtes dans le dossier frontend\n```\n\nÀ l'intérieur du dossier `stack-remix-nestjs`, nous allons instancier un nouveau fichier `package.json` pour configurer notre monorepo.\n\n```bash Terminal\nnpm init -y # Pour créer un fichier package.json\n```\n\nLe fichier `package.json` doit ressembler à ça :\n\n```json package.json\n{\n\t\"name\": \"nestjs-remix-monorepo\",\n\t\"version\": \"1.0.0\",\n\t\"description\": \"\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"packageManager\": \"npm@10.2.3\"\n}\n```\n\n### Installation de Turbo\n\nNous allons utiliser une librairie appelée `Turborepo` pour gérer notre monorepo.\n\n```bash Terminal\nnpm install -D turbo\n```\n\n> Nous pouvons aussi l'installer en global pour bénéficier de la commande `turbo` dans le terminal.\n\n```bash Terminal\nnpm install -g turbo\n```\n\nEnsuite, nous allons déclarer nos deux projets comme des workspaces dans le fichier `package.json`.\n\nLe fichier devrait maintenant ressembler à ça :\n\n```json package.json\n{\n\t\"name\": \"nestjs-remix-monorepo\",\n\t\"version\": \"1.0.0\",\n\t\"description\": \"\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"packageManager\": \"npm@10.2.3\",\n\t\"workspaces\": [\"frontend\", \"backend\"],\n\t\"devDependencies\": {\n\t\t\"turbo\": \"^1.13.0\"\n\t}\n}\n```\n\n### Création du fichier turbo.json\n\nNous devons ensuite créer un fichier de configuration Turbo. Pour ce faire, nous pouvons créer un fichier nommé `turbo.json`.\n\n```bash Terminal\ntouch turbo.json # Pour créer un fichier turbo.json\n```\n\nEnsuite, nous allons coller la configuration par défaut, qu'on retrouve sur la documentation officielle :\n\n```json turbo.json\n{\n\t\"$schema\": \"https://turbo.build/schema.json\",\n\t\"pipeline\": {\n\t\t\"build\": {\n\t\t\t\"outputs\": [\"dist/**\"]\n\t\t},\n\t\t\"type-check\": {}\n\t}\n}\n```\n\n### (Optionnel) Création d'un fichier .gitignore\n\nNous pouvons ajouter un fichier `.gitignore` pour éviter de versionner les fichiers volumineux.\n\n```bash Terminal\ntouch .gitignore # Pour créer un fichier .gitignore\n```\n\n```.gitignore\n.turbo\nnode_modules\n/dist\n/build\n/out\n```\n\n### Création de pipelines avec Turborepo\n\nLes pipelines permettent de définir des commandes que turbo va exécuter pour chaque projet.\n\nExemple : Nous allons créer une pipeline nommée `dev` pour exécuter l'application NestJS en environnement de développement.\n\nD'abord, nous devons faire une petite modification aux fichiers `package.json` respectifs de chaque projet.\n\nNous allons ajouter trois commandes dans le fichier `backend/package.json` de notre application NestJS.\n\n```json backend/package.json\n\"scripts\": {\n \"dev\": \"run-p dev:compile dev:watch\",\n \"dev:compile\": \"tsc --build --watch\",\n \"dev:watch\": \"nodemon node dist/main.js\",\n}\n```\n\nExplication : La première commande va exécuter en parallèle les deux commandes suivantes.\n\n`dev:compile` va compiler le code source de NestJS en continu.\n`dev:watch` va surveiller les changements apportés au code et redémarrer le serveur à chaque modification.\n\nPour ce faire, nous devons également installer les dépendances `nodemon` et `npm-run-all`.\n\n```bash Terminal\ncd backend # Pour se déplacer dans le dossier backend\nnpm install -D nodemon npm-run-all # Pour installer les dépendances\n```\n\nEnsuite, renommons la commande `dev`par `old-dev` dans le `frontend/package.json` pour l'empêcher de s'exécuter.\n\n```json frontend/package.json\n\"scripts\": {\n \"old-dev\": \"remix vite:dev\"\n}\n```\n\nNous devons maintenant créer une pipeline `dev` dans notre fichier de configuration `turbo.json`\n\n```json turbo.json\n{\n\t\"$schema\": \"https://turbo.build/schema.json\",\n\t\"pipeline\": {\n\t\t\"build\": {\n\t\t\t\"outputs\": [\"dist/**\"]\n\t\t},\n\t\t\"dev\": {\n\t\t\t\"cache\": false,\n\t\t\t\"persistent\": true\n\t\t}\n\t}\n}\n```\n\nPour exécuter cette pipeline, nous devons lancer la commande `turbo` dans le terminal, suivi du nom de la pipeline.\n\n```bash Terminal\nturbo dev\n```\n\nNous allons créer une commande dans le fichier `package.json` de la racine pour exécuter cette pipeline.\n\n```json package.json\n\"scripts\": {\n \"dev\": \"turbo dev\"\n}\n```\n\n### Renommer la librairie frontend pour l'importer dans le backend\n\n\n\nMaintenant, lancer la commande `npm run dev` dans le terminal exécutera l'application NestJS (qui s'occupera d'exécuter Remix.js).\n\nOn rencontre l'erreur suivante.\n\n![Erreur lors du lancement de notre application NestJS](https://algomax-public.s3.eu-west-3.amazonaws.com/image_10_810d496d39.png)\n\nPas de panique, c'est normal. Nous n'avons pas encore importé les méthodes définies dans le fichier `frontend/index.cjs`.\n\nPour pouvoir importer ces méthodes, nous devons déclarer la librairie `@virgile/frontend` dans le fichier `backend/package.json`.\n\nD'abord, renommons nos projets `backend/package.json` et `frontend/package.json`.\n\n```json backend/package.json\n\"name\": \"@virgile/backend\",\n```\n\n```json frontend/package.json\n\"name\": \"@virgile/frontend\",\n```\n\nCes noms vont nous permettre d'utiliser la librairie `@virgile/frontend` dans notre application NestJS.\n\nAprès avoir fait ce changement, il nous suffit d'ajouter la dépendance `@virgile/frontend` en tant que `dependencies` dans le fichier `backend/package.json`.\n\n```json backend/package.json\n\"dependencies\": {\n \"@virgile/frontend\": \"*\" // Nous informons le monorepo qu'il doit utiliser notre librairie frontend dans le projet backend\n}\n```\n\nAttention. Comme nous venons de renommer notre librairie `frontend`, nous devons nous assurer d'utiliser le même nom dans le fichier `frontend/index.d.cts`\n\n```typescript frontend/index.d.cts\ndeclare module '@virgile/backend' {\n\t// <= Nom du module, à adapter selon le nom de votre projet\n\texport function getPublicDir(): string;\n\texport function getServerBuild(): Promise;\n\texport function startDevServer(app: any): Promise;\n}\n```\n\n### Importer getServerBuild dans RemixController\n\nNous pouvons à présent importer la méthode `getServerBuild` dans le fichier `backend/src/remix/remix.controller.ts`.\n\nVoici le fichier modifié :\n\n```typescript backend/src/remix/remix.controller.ts\nimport { All, Controller, Next, Req, Res } from '@nestjs/common';\nimport { createRequestHandler } from '@remix-run/express';\nimport { getServerBuild } from '@virgile/frontend';\nimport { NextFunction, Request, Response } from 'express';\n\n@Controller()\nexport class RemixController {\n\t@All('*')\n\tasync handler(\n\t\t@Req() request: Request,\n\t\t@Res() response: Response,\n\t\t@Next() next: NextFunction\n\t) {\n\t\t//\n\t\treturn createRequestHandler({\n\t\t\tbuild: await getServerBuild(),\n\t\t\tgetLoadContext: () => ({\n\t\t\t\ttoto: 'Salut, ça va ?',\n\t\t\t}),\n\t\t})(request, response, next);\n\t}\n}\n```\n\n### Utiliser les méthodes getPublicDir et startDevServer\n\nIl nous manque deux méthodes à utiliser avant de pouvoir utiliser Remix.js.\n\nNous allons importer les méthodes `getPublicDir` et `startDevServer` dans le fichier `backend/src/main.ts`.\n\n```typescript backend/src/main.ts\nimport { NestFactory } from '@nestjs/core';\nimport { NestExpressApplication } from '@nestjs/platform-express';\nimport { getPublicDir, startDevServer } from '@virgile/frontend';\nimport { AppModule } from './app.module';\n\nasync function bootstrap() {\n\tconst app = await NestFactory.create(AppModule, {\n\t\tbodyParser: false,\n\t});\n\n\tawait startDevServer(app);\n\n\tapp.useStaticAssets(getPublicDir(), {\n\t\timmutable: true,\n\t\tmaxAge: '1y',\n\t\tindex: false,\n\t});\n\n\tconst selectedPort = process.env.PORT ?? 3000;\n\n\tconsole.log(`Running on port http://localhost:${selectedPort}`);\n\tawait app.listen(selectedPort);\n}\nbootstrap();\n```\n\nNous exécutons la méthode `startDevServer`, qui va démarrer le serveur de développement de Remix.js en utilisant Vite. On n'aura donc pas besoin d'exécuter deux serveurs en parallèle, NestJS s'occupe de tout.\n\nEnsuite, nous déclarons le dossier `public` de Remix.js comme dossier statique pour que NestJS puisse servir les fichiers statiques (comme les images, le favicon, le CSS ...).\n\n#### Lancer le serveur de développement\n\nNous pouvons à présent lancer le serveur de développement en exécutant la commande `npm run dev` dans le terminal.\n\n```bash Terminal\nnpm run dev\n```\n\nLe serveur devrait démarrer sans erreur.\n\n![Notre serveur NestJS tourne sans erreur.](https://algomax-public.s3.eu-west-3.amazonaws.com/image_11_66abaab0bd.png)\n",{"_606":247},{"_24":694,"_28":695,"_26":696,"_600":23,"_30":697,"_258":698,"_248":699,"_34":700,"_593":-5,"_250":251,"_53":701},"cm7s4eyh1000a96c1h9bgt7ue","configuration-de-turborepo","Configuration de Turborepo","Nous configurons Turborepo, en ajoutant les packages Typescript et Eslint.",["D",1740949555717],["D",1745505983611],"## Ajout des commandes typecheck et lint\n\n\n\n\nNous avons déjà ajouté le mot clé `workspaces` dans le `package.json` principal. Il informe NodeJS que nous utilisons un monorepo.\n\n```json package.json\n{\n\t\"workspaces\": [\"frontend\", \"backend\", \"packages/*\"]\n}\n```\n\nMaintenant, lorsque nous installons nos dépendances avec `npm install`, NodeJS saura qu'il doit installer les dépendances de chaque projet.\n\nNous avions déjà ajouté la commande `dev` aux `scripts` du `package.json`. Elle exécute la commande `turbo dev`\n\n```json package.json\n{\n\t\"name\": \"nestjs-remix-monorepo\",\n\t\"version\": \"1.0.0\",\n\t\"description\": \"\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n\t\t\"dev\": \"turbo dev\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"packageManager\": \"npm@10.2.3\",\n\t\"workspaces\": [\"frontend\", \"backend\", \"packages/*\"]\n}\n```\n\nPourquoi `turbo dev` ? Parce que nous avons défini une _pipeline_ nommée `dev` dans la configuration Turborepo (le fichier `turbo.json`)\n\nPour rappel, voici son contenu\n\n```json turbo.json\n{\n\t\"$schema\": \"https://turbo.build/schema.json\",\n\t\"pipeline\": {\n\t\t\"build\": {\n\t\t\t\"outputs\": [\"dist/**\"]\n\t\t},\n\t\t\"dev\": {\n\t\t\t\"cache\": false,\n\t\t\t\"persistent\": true\n\t\t}\n\t}\n}\n```\n\nNous allons rajouter deux autres _pipelines_ à cette configuration, pour utiliser Eslint et Typescript.\n\n```json turbo.json\n{\n\t\"$schema\": \"https://turbo.build/schema.json\",\n\t\"pipeline\": {\n\t\t\"build\": {\n\t\t\t\"outputs\": [\"dist/**\"]\n\t\t},\n\t\t\"dev\": {\n\t\t\t\"cache\": false,\n\t\t\t\"persistent\": true\n\t\t},\n\t\t\"typecheck\": {},\n\t\t\"lint\": {}\n\t}\n}\n```\n\nIl nous suffit de rajouter ces deux clés `typecheck` et `lint`, qui prendront le même nom que les `scripts` que l'on va ajouter à nos fichiers `package.json`.\n\nPour exécuter ces pipelines, nous devons aussi les rajouter au fichier `package.json` principal :\n\n```json package.json\n{\n\t\"name\": \"nestjs-remix-monorepo\",\n\t\"version\": \"1.0.0\",\n\t\"description\": \"\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n\t\t\"build\": \"turbo build\",\n\t\t\"dev\": \"turbo dev\",\n\t\t\"typecheck\": \"turbo typecheck\",\n\t\t\"lint\": \"turbo lint\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"packageManager\": \"npm@10.2.3\",\n\t\"workspaces\": [\"frontend\", \"backend\", \"packages/*\"]\n}\n```\n\nMaintenant, lorsque nous exécutons la commande `npm run typecheck`, Turborepo va regarder la configuration de chaque projet (`frontend/package.json`, `backend/package.json`, `packages/eslint-config/package.json`, `packages/typescript-config/package.json` respectivements).\nSi ces projets possèdent un script nommé `typecheck`, Turbo va l'exécuter en parallèle. S'ils n'en possèdent pas, Turbo ne l'exécutera pas.\n\nEn lançant la commande `npm run dev` à la racine du monorepo, on exécute le `scripts` nommé `dev` de chaque projet. Mais seul le projet `backend` possède un script nommé `dev`. C'est ce que nous souhaitons : Le serveur NestJS va se charger de lancer l'application Remix.js. Nous n'avons pas besoin d'avoir une commande `dev` dans le `package.json` du frontend. Si c'est le cas, nous devons la retirer.\n\nPour rappel, voici notre `package.json`.\n\n```json frontend/package.json\n{\n\t\"name\": \"@virgile/frontend\",\n\t\"private\": true,\n\t\"sideEffects\": false,\n\t\"type\": \"module\",\n\t\"main\": \"./index.cjs\",\n\t\"types\": \"./index.d.cts\",\n\t\"scripts\": {\n\t\t\"start\": \"remix-serve ./build/server/index.js\",\n\t\t\"old-dev\": \"remix vite:dev\",\n\t\t\"build\": \"remix vite:build\",\n\t\t\"lint\": \"eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .\",\n\t\t\"typecheck\": \"tsc\"\n\t},\n\t\"dependencies\": {\n\t\t\"@remix-run/node\": \"^2.8.1\",\n\t\t\"@remix-run/react\": \"^2.8.1\",\n\t\t\"@remix-run/serve\": \"^2.8.1\",\n\t\t\"isbot\": \"^5.1.2\",\n\t\t\"react\": \"^18.2.0\",\n\t\t\"react-dom\": \"^18.2.0\",\n\t\t\"remix-flat-routes\": \"^0.6.4\"\n\t},\n\t\"devDependencies\": {\n\t\t\"@remix-run/dev\": \"^2.8.1\",\n\t\t\"@types/react\": \"^18.2.67\",\n\t\t\"@types/react-dom\": \"^18.2.22\",\n\t\t\"@virgile/eslint-config\": \"*\",\n\t\t\"@virgile/typescript-config\": \"*\",\n\t\t\"eslint\": \"^8.57.0\",\n\t\t\"eslint-import-resolver-typescript\": \"^3.6.1\",\n\t\t\"eslint-plugin-import\": \"^2.29.1\",\n\t\t\"eslint-plugin-jsx-a11y\": \"^6.8.0\",\n\t\t\"eslint-plugin-react\": \"^7.34.1\",\n\t\t\"eslint-plugin-react-hooks\": \"^4.6.0\",\n\t\t\"eslint-plugin-remix-react-routes\": \"^1.0.5\",\n\t\t\"eslint-plugin-tailwindcss\": \"^3.15.1\",\n\t\t\"typescript\": \"^5.4.3\",\n\t\t\"vite\": \"^5.2.2\",\n\t\t\"vite-tsconfig-paths\": \"^4.3.2\"\n\t},\n\t\"engines\": {\n\t\t\"node\": \">=18.0.0\"\n\t}\n}\n```\n\nIl possède les commandes suivantes :\n\n- Une commande `typecheck`, pour détecter les erreurs Typescript\n- Une commande `lint` pour détecter les erreurs Eslint (et appliquer les bonnes pratiques)\n- Une commande `build` pour construire l'application Remix.js\n\nEn environnement de développement, NestJS se charge de _build_ le code source de Remix. Cependant en **production**, nous avons besoin de la commande `build` de Remix pour compiler le code source du frontend.\n\n## Ajout de la commande build\n\n\n\nNotre fichier de configuration `turbo.json` contient déjà une commande `build`. Mais elle est erronée (nous avons laissé la configuration par défaut).\n\n```json turbo.json\n{\n\t\"$schema\": \"https://turbo.build/schema.json\",\n\t\"pipeline\": {\n\t\t\"build\": {\n\t\t\t\"outputs\": [\"dist/**\"] // <= Cette ligne est erronée\n\t\t},\n\t\t\"dev\": {\n\t\t\t\"cache\": false,\n\t\t\t\"persistent\": true\n\t\t},\n\t\t\"typecheck\": {},\n\t\t\"lint\": {}\n\t}\n}\n```\n\nEffectivement, l'instruction `outputs` défini un tableau de dossiers contenant le code source compilé, une fois la commande `build` exécutée. Mais le chemin n'est pas bon.\n\nNotre application NestJS compile bien son code dans le dossier `dist`, le bon chemin est donc `backend/dist/**`.\nNotre application Remix compile son code dans le dossier `build`, le bon chemin est donc `frontend/build/**`.\n\nDe plus, avant de pouvoir compiler le code source de NestJS, nous avons besoin de compiler l'application Remix. (Car NestJS utilise le build de Remix, dans son `main.ts`. Il est donc important de build le code source de Remix, avant de build l'application NestJS.)\n\nComme notre backend dépend du frontend (nous avions ajouté l'instruction ci-dessous), Turborepo saura qu'il faut d'abord compiler le frontend avant de compiler le backend.\n\n```json package.json\n{\n\t\"dependencies\": {\n\t\t\"@virgile/frontend\": \"*\"\n\t}\n}\n```\n\nAjoutons la clé `\"dependsOn\": [\"^build\"]` au fichier de configuration pour que Turbo en soit informé.\n\n```json turbo.json\n{\n\t\"$schema\": \"https://turbo.build/schema.json\",\n\t\"pipeline\": {\n\t\t\"build\": {\n\t\t\t\"outputs\": [\"backend/dist/**\", \"frontend/build/**\"],\n\t\t\t\"dependsOn\": [\"^build\"]\n\t\t},\n\t\t\"dev\": {\n\t\t\t\"cache\": false,\n\t\t\t\"persistent\": true\n\t\t},\n\t\t\"typecheck\": {},\n\t\t\"lint\": {}\n\t}\n}\n```\n\nMaintenant, exécuter la commande `npm run build` à la racine du monorepo va compiler le code source de l'application Remix, puis celui de l'application NestJS.\n\nCependant, nous avons un problème dans le terminal. Comme nous utilisons un monorepo, nous avons besoin d'utiliser un chemin absolu dans le fichier de configuration `vite.config.ts`\n\n![Le build de notre application échoue](https://algomax-public.s3.eu-west-3.amazonaws.com/image_15_af8a409942.png)\n",{"_606":247},{"_24":703,"_28":704,"_26":705,"_600":23,"_30":706,"_258":707,"_248":708,"_34":709,"_593":-5,"_250":251,"_53":710},"cm7s4exzh000896c1reieuim6","ajouter-typescript-et-eslint","Ajouter Typescript et Eslint","Nous ajoutons Typescript et Eslint pour détecter les améliorations à faire sur notre base de code.",["D",1740949555086],["D",1745505980134],"## Ajout de Typescript et Eslint\n\nNous allons maintenant ajouter deux librairies à notre monorepo : `Typescript` et `Eslint`. Pour ce faire, nous allons créer un fichier de configuration pour chaque librairie, qu'on va ensuite réutiliser dans nos applications NestJS et Remix.js.\n\n\n\nNous allons nous inspirer de la configuration de [Raphaël Moreau](https://twitter.com/rphlmr), un développeur Remix qui a créé un monorepo nommé [Remix Galaxy](https://github.com/rphlmr/remix-galaxy)\n\nNous allons donc créer un nouveau dossier nommé `packages` à la racine de notre monorepo.\n\n```bash Terminal\nmkdir packages # Pour créer un dossier nommé packages\n```\n\nIl va contenir nos configurations Typescript et Eslint.\n\n### Configurer Typescript\n\n\n\nPour ajouter notre configuration Typescript, nous allons créer un nouveau dossier `typescript-config` à l'intérieur de `packages`.\n\n```bash Terminal\nmkdir packages/typescript-config # Pour créer un dossier nommé typescript-config\n```\n\nNous allons ensuite générer un fichier `package.json`, pour télécharger les dépendances nécessaires.\n\n```bash Terminal\ncd packages/typescript-config # Pour se déplacer dans le dossier typescript-config\nnpm init -y # Pour créer un fichier package.json\n```\n\nNous allons changer le nom pour qu'il ressemble au code ci-dessus :\n\n```json\n{\n\t\"name\": \"@virgile/typescript-config\",\n\t\"version\": \"0.0.0\",\n\t\"private\": true,\n\t\"license\": \"MIT\",\n\t\"publishConfig\": {\n\t\t\"access\": \"public\"\n\t},\n\t\"prettier\": {}\n}\n```\n\nNous allons ensuite créer un fichier `base.json` pour y coller notre configuration globale Typescript.\n\n```json packages/typescript-config/base.json\n{\n\t\"compilerOptions\": {\n\t\t\"module\": \"CommonJS\",\n\t\t\"declaration\": true,\n\t\t\"removeComments\": true,\n\t\t\"allowSyntheticDefaultImports\": true,\n\t\t\"target\": \"ES2022\",\n\t\t\"sourceMap\": true,\n\t\t\"strict\": true,\n\t\t\"skipLibCheck\": true,\n\t\t\"forceConsistentCasingInFileNames\": true,\n\t\t\"esModuleInterop\": true,\n\t\t\"isolatedModules\": false,\n\t\t\"moduleResolution\": \"Node\",\n\t\t\"resolveJsonModule\": false,\n\t\t\"allowJs\": false,\n\t\t\"lib\": [\"ES2023\"]\n\t}\n}\n```\n\nEt voilà ! Nous pouvons maintenant importer cette configuration Typescript dans nos projet NestJS et Remix.js.\n\nIl nous suffit d'ajouter la dépendance `@virgile/typescript-config` dans les fichiers `backend/package.json` et `frontend/package.json`.\n\n```json backend/package.json\n\"devDependencies\": {\n \"@virgile/typescript-config\": \"*\"\n}\n```\n\n```json frontend/package.json\n\"devDependencies\": {\n \"@virgile/typescript-config\": \"*\"\n}\n```\n\nPourquoi utiliser Typescript comme ça ? Pour nous éviter de répéter la même configuration dans chaque projet. Nous avons besoin de faire un dernier changement avant que la configuration soit détectée.\n\nNous devons déclarer cette configuration globale dans le fichier `tsconfig.json` de chaque projet. Il nous suffit de rajouter l'instruction `extends` avec le chemin relatif vers la configuration.\n\n```json backend/tsconfig.json\n{\n\t\"extends\": \"@virgile/typescript-config/base.json\",\n\t\"compilerOptions\": {\n\t\t\"emitDecoratorMetadata\": true,\n\t\t\"experimentalDecorators\": true,\n\t\t\"strict\": true,\n\t\t\"outDir\": \"./dist\",\n\t\t\"rootDir\": \"./src\",\n\t\t\"noEmit\": false,\n\t\t\"lib\": [\"DOM\", \"ES2023\"]\n\t},\n\t\"include\": [\"src/**/*.ts\", \"src/exports.js\"]\n}\n```\n\n```json frontend/tsconfig.json\n{\n\t\"extends\": \"@virgile/typescript-config/base.json\",\n\t\"include\": [\n\t\t\"env.d.ts\",\n\t\t\"**/*.ts\",\n\t\t\"**/*.tsx\",\n\t\t\"../playwright.config.ts\",\n\t\t\"tailwind.config.cjs\"\n\t],\n\t\"exclude\": [\"index.d.cts\"],\n\t\"compilerOptions\": {\n\t\t\"module\": \"ESNext\",\n\t\t\"skipLibCheck\": true,\n\t\t\"lib\": [\"DOM\", \"DOM.Iterable\", \"ES2019\"],\n\t\t\"isolatedModules\": true,\n\t\t\"esModuleInterop\": false,\n\t\t\"jsx\": \"react-jsx\",\n\t\t\"noImplicitAny\": false,\n\t\t\"moduleResolution\": \"bundler\",\n\t\t\"resolveJsonModule\": true,\n\t\t\"target\": \"ES2019\",\n\t\t\"strict\": true,\n\t\t\"allowJs\": true,\n\t\t\"forceConsistentCasingInFileNames\": true,\n\t\t\"baseUrl\": \".\",\n\t\t\"paths\": {\n\t\t\t\"~/*\": [\"./app/*\"]\n\t\t},\n\t\t\"noEmit\": true\n\t}\n}\n```\n\n### Configurer Eslint\n\n\n\nNous allons reproduire la même opération pour Eslint.\n\nCréons un nouveau dossier `packages/eslint-config` à la racine de notre monorepo.\n\n```bash Terminal\nmkdir packages/eslint-config # Pour créer un dossier nommé eslint-config\n```\n\nNous allons ensuite générer un fichier `package.json`, pour télécharger les dépendances nécessaires.\n\n```bash Terminal\ncd packages/eslint-config # Pour se déplacer dans le dossier eslint-config\nnpm init -y # Pour créer un fichier package.json\n```\n\nNous devons ensuite installer toutes les librairies relatives à nos règles Eslint.\n\n```json packages/eslint-config/package.Jso\n{\n\t\"name\": \"@virgile/eslint-config\",\n\t\"version\": \"0.0.0\",\n\t\"private\": true,\n\t\"license\": \"MIT\",\n\t\"files\": [\"base.js\"],\n\t\"devDependencies\": {\n\t\t\"@remix-run/eslint-config\": \"^2.8.1\",\n\t\t\"@types/eslint\": \"^8.56.5\",\n\t\t\"@typescript-eslint/eslint-plugin\": \"^7.2.0\",\n\t\t\"@typescript-eslint/parser\": \"^7.2.0\",\n\t\t\"eslint\": \"^8.57.0\",\n\t\t\"eslint-config-prettier\": \"^9.1.0\",\n\t\t\"eslint-plugin-import\": \"^2.29.1\",\n\t\t\"eslint-plugin-prettier\": \"^5.1.3\",\n\t\t\"typescript\": \"^5.4.2\"\n\t},\n\t\"prettier\": {},\n\t\"scripts\": {\n\t\t\"lint:parent\": \"cd ../../ && npm run lint\"\n\t}\n}\n```\n\nEt nous allons également copier sa configuration globale.\n\n```json packages/eslint-config/base.js\n/** @type {import('@types/eslint').Linter.BaseConfig} */\nmodule.exports = {\n\textends: [\n\t\t\"@remix-run/eslint-config\",\n\t\t\"@remix-run/eslint-config/node\",\n\t\t\"prettier\",\n\t\t\"plugin:import/recommended\",\n\t],\n\tparser: \"@typescript-eslint/parser\",\n\trules: {\n\t\t\"import/no-duplicates\": [\"warn\", { \"prefer-inline\": true }],\n\t\t\"import/consistent-type-specifier-style\": [\"warn\", \"prefer-inline\"],\n\t\t\"import/order\": [\n\t\t\t\"warn\",\n\t\t\t{\n\t\t\t\talphabetize: { order: \"asc\", caseInsensitive: true },\n\t\t\t\tgroups: [\n\t\t\t\t\t\"builtin\",\n\t\t\t\t\t\"external\",\n\t\t\t\t\t\"internal\",\n\t\t\t\t\t\"parent\",\n\t\t\t\t\t\"sibling\",\n\t\t\t\t\t\"index\",\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t},\n};\n```\n\nMaintenant, ajoutons cette librairie comme dépendance de nos projets.\n\n```json backend/package.json\n\"devDependencies\": {\n \"@virgile/eslint-config\": \"*\"\n}\n```\n\n```json frontend/package.json\n\"devDependencies\": {\n \"@virgile/eslint-config\": \"*\"\n}\n```\n\nNous devons ensuite `extends` cette configuration dans les configurations Eslint de chaque projet.\n\n> J'ai finalement décidé de ne pas l'utiliser dans la configuration Eslint du backend. Je vous partage quand même la configuration.\n\n```json backend/.eslintrc.js\nmodule.exports = {\n parser: '@typescript-eslint/parser',\n parserOptions: {\n project: 'tsconfig.json',\n tsconfigRootDir: __dirname,\n sourceType: 'module',\n },\n extends: [\n 'plugin:@typescript-eslint/recommended'\n ],\n root: true,\n env: {\n node: true,\n jest: true\n },\n ignorePatterns: ['.eslintrc.js', 'dist/', 'node_modules/', '**.d.ts'],\n rules: {\n '@typescript-eslint/interface-name-prefix': 'off',\n '@typescript-eslint/explicit-function-return-type': 'off',\n '@typescript-eslint/explicit-module-boundary-types': 'off',\n '@typescript-eslint/no-explicit-any': 'off'\n }\n};\n```\n\nNous l'utilisons essentiellement pour notre application Remix !\n\n```json frontend/.eslintrc.cjs\n/** @type {import(\"eslint\").Linter.Config} */\nmodule.exports = {\n\troot: true,\n\textends: [\n\t\t'@virgile/eslint-config/base.js',\n\t\t'@remix-run/eslint-config',\n\t\t'@remix-run/eslint-config/node',\n\t\t'plugin:remix-react-routes/recommended',\n\t],\n\tsettings: {\n\t\t'import/resolver': {\n\t\t\tnode: {\n\t\t\t\textensions: ['.js', '.jsx', '.ts', '.tsx'],\n\t\t\t},\n\t\t},\n\t},\n\n\toverrides: [\n\t\t{\n\t\t\textends: ['@remix-run/eslint-config/jest-testing-library'],\n\t\t\tfiles: ['app/**/__tests__/**/*', 'app/**/*.{spec,test}.*'],\n\t\t\trules: {\n\t\t\t\t'testing-library/no-await-sync-events': 'off',\n\t\t\t\t'jest-dom/prefer-in-document': 'off',\n\t\t\t},\n\t\t\t// we're using vitest which has a very similar API to jest\n\t\t\t// (so the linting plugins work nicely), but it means we have to explicitly\n\t\t\t// set the jest version.\n\t\t\tsettings: {\n\t\t\t\tjest: {\n\t\t\t\t\tversion: 28,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t],\n};\n```\n\n### Ajouter ces packages en tant que workspaces\n\nNous avons créé ces deux packages pour éviter de répéter la même configuration dans chaque projet. Nous devons maintenant les ajouter dans le fichier `package.json` principal.\n\nC'est l'instruction `packages/*` qui va informer NodeJS et Turbo que chaque dossier à l'intérieur du dossier `packages` (contenant un fichier `packages.json`) est à considérer comme workspace.\n\n```json package.json\n{\n\t\"name\": \"nestjs-remix-monorepo\",\n\t\"version\": \"1.0.0\",\n\t\"description\": \"\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n\t\t\"dev\": \"turbo dev\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"packageManager\": \"npm@10.2.3\",\n\t\"workspaces\": [\"frontend\", \"backend\", \"packages/*\"]\n}\n```\n\nNous avons terminé la configuration de Typescript et Eslint. Avant de commencer à coder, il nous reste plus qu'à intégrer notre service NestJS dans notre application Remix.js.\n",{"_606":247},{"_24":712,"_28":713,"_26":714,"_600":23,"_30":715,"_258":716,"_248":717,"_34":718,"_593":-5,"_250":251,"_53":719},"cm7s4exn0000696c1gxukj0c5","configuration-du-projet-remix","Configuration du projet Remix","Nous configurons un nouveau projet Remix qui va contenir toute la logique frontend de notre application.",["D",1740949554636],["D",1745505990445],"## Configuration de Remix\n\n\n\n### Création d'un nouveau projet Remix\n\nNous devons d'abord reculer d'un dossier pour créer le projet Remix, à la racine de `stack-remix-nestjs`.\n\n```bash Terminal\ncd .. # Pour remonter d'un dossier\nnpx create-remix@latest # Pour créer un nouveau projet Remix\n```\n\nNous appelons le projet `frontend`. Et nous répondons `Non` à la question `Voulez-vous instancier un nouveau repository git ?`.\n\nOn devrait maintenant avoir un dossier `frontend` à la racine de `stack-remix-nestjs`.\n\n![Configuration d'un nouveau projet Remix.js](https://algomax-public.s3.eu-west-3.amazonaws.com/image_9_07b46c273a.png)\n\n### Création d'un nouveau fichier index.cjs et index.d.cts\n\n\n\n> Attention. Nous allons créer un fichier `index.cjs` qui sera exécuté et interprété par l'application NestJS. Il utilise la syntaxe CommonJS, qui est compatible avec NestJS.\n\n```javascript frontend/index.cjs\nconst path = require('node:path');\n\nlet devServer;\nconst SERVER_DIR = path.join(__dirname, 'build/server/index.js');\nconst PUBLIC_DIR = path.join(__dirname, 'build/client');\n\nmodule.exports.getPublicDir = function getPublicDir() {\n\treturn PUBLIC_DIR;\n};\n\nmodule.exports.getServerBuild = async function getServerBuild() {\n\tif (process.env.NODE_ENV === 'production' || devServer === null) {\n\t\treturn import(SERVER_DIR);\n\t}\n\tconst ssrModule = await devServer.ssrLoadModule('virtual:remix/server-build');\n\treturn ssrModule;\n};\n\nmodule.exports.startDevServer = async function startDevServer(app) {\n\tif (process.env.NODE_ENV === 'production') return;\n\tconst vite = await import('vite');\n\tdevServer = await vite.createServer({\n\t\tserver: { middlewareMode: 'true' },\n\t\troot: __dirname,\n\t});\n\n\tapp.use(devServer.middlewares);\n\treturn devServer;\n\t// ...continues\n};\n```\n\nCe fichier déclare trois fonctions que nous utiliserons dans l'application NestJS :\n\n- `getPublicDir` : retourne le chemin du dossier `build/client`\n- `getServerBuild` : retourne le module `server/index.js` de l'application Remix\n- `startDevServer` : démarre le serveur de développement de Remix\n\nPour bénéficier de l'autocomplétion, nous devons créer un fichier `index.d.cts` qui va déclarer les types de ces fonctions.\n\n```typescript frontend/index.d.cts\ndeclare module '@virgile/frontend' {\n\t// <= Nom du module, à adapter selon le nom de votre projet\n\texport function getPublicDir(): string;\n\texport function getServerBuild(): Promise;\n\texport function startDevServer(app: any): Promise;\n}\n```\n\n### Configurer le point d'entrée de l'application Remix dans le fichier package.json\n\n\n\nAprès avoir créé ces deux fichiers, nous devons modifier le fichier `package.json` de Remix pour que NestJS connaisse son point d'entrée (et sa déclaration de types).\n\n> C'est seulement après avoir ajouté cette instruction qu'on bénéficiera de l'auto-complétion du module `frontend`.\n\nVoilà un `package.json` complet.\n\n```json frontend/package.json\n{\n\t\"name\": \"@virgile/frontend\",\n\t\"private\": true,\n\t\"sideEffects\": false,\n\t\"type\": \"module\",\n\t\"main\": \"./index.cjs\",\n\t\"types\": \"./index.d.cts\",\n\t\"scripts\": {\n\t\t\"start\": \"remix-serve ./build/server/index.js\",\n\t\t\"old-dev\": \"remix vite:dev\",\n\t\t\"build\": \"remix vite:build\",\n\t\t\"lint\": \"eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .\",\n\t\t\"typecheck\": \"tsc\"\n\t},\n\t\"dependencies\": {\n\t\t\"@conform-to/react\": \"^1.1.0\",\n\t\t\"@conform-to/zod\": \"^1.1.0\",\n\t\t\"@radix-ui/react-slot\": \"^1.0.2\",\n\t\t\"@remix-run/node\": \"^2.8.1\",\n\t\t\"@remix-run/react\": \"^2.8.1\",\n\t\t\"@remix-run/serve\": \"^2.8.1\",\n\t\t\"class-variance-authority\": \"^0.7.0\",\n\t\t\"clsx\": \"^2.1.0\",\n\t\t\"isbot\": \"^5.1.2\",\n\t\t\"lucide-react\": \"^0.365.0\",\n\t\t\"react\": \"^18.2.0\",\n\t\t\"react-dom\": \"^18.2.0\",\n\t\t\"remix-flat-routes\": \"^0.6.4\",\n\t\t\"tailwind-merge\": \"^2.2.2\",\n\t\t\"tailwindcss-animate\": \"^1.0.7\",\n\t\t\"zod\": \"^3.22.4\"\n\t},\n\t\"devDependencies\": {\n\t\t\"@remix-run/dev\": \"^2.8.1\",\n\t\t\"@types/react\": \"^18.2.67\",\n\t\t\"@types/react-dom\": \"^18.2.22\",\n\t\t\"@virgile/eslint-config\": \"*\",\n\t\t\"@virgile/typescript-config\": \"*\",\n\t\t\"autoprefixer\": \"^10.4.19\",\n\t\t\"eslint\": \"^8.57.0\",\n\t\t\"eslint-import-resolver-typescript\": \"^3.6.1\",\n\t\t\"eslint-plugin-import\": \"^2.29.1\",\n\t\t\"eslint-plugin-jsx-a11y\": \"^6.8.0\",\n\t\t\"eslint-plugin-react\": \"^7.34.1\",\n\t\t\"eslint-plugin-react-hooks\": \"^4.6.0\",\n\t\t\"eslint-plugin-remix-react-routes\": \"^1.0.5\",\n\t\t\"eslint-plugin-tailwindcss\": \"^3.15.1\",\n\t\t\"postcss\": \"^8.4.38\",\n\t\t\"tailwindcss\": \"^3.4.3\",\n\t\t\"typescript\": \"^5.4.3\",\n\t\t\"vite\": \"^5.2.2\",\n\t\t\"vite-tsconfig-paths\": \"^4.3.2\"\n\t},\n\t\"engines\": {\n\t\t\"node\": \">=18.0.0\"\n\t}\n}\n```\n\nCe qui nous intéresse ici, ce sont les deux premières lignes :\n\n```json\n \"main\": \"./index.cjs\",\n \"types\": \"./index.d.cts\",\n```\n\nGrâce à l'ajout de ces deux lignes, toute application qui importera le module `@virgile/frontend` bénéficiera de l'autocomplétion des fonctions `getPublicDir`, `getServerBuild` et `startDevServer`.\n\nNous avons terminé la configuration de ces deux projets pour l'instant. Nous allons maintenant configurer le monorepo pour qu'ils puissent communiquer entre eux.\n",{"_606":247},{"_24":721,"_28":722,"_26":723,"_600":23,"_30":724,"_258":725,"_248":726,"_34":727,"_593":-5,"_250":251,"_53":728},"cm7s4eylz000b96c10t9z4vxr","modification-de-la-configuration-vite-de-remix","Modification de la configuration Vite de Remix","On remplace la configuration par défaut de Vite, pour que NestJS puisse la détecter.",["D",1740949555895],["D",1745505986520],"\n\nJusqu'à présent, nous n'avions pas touché au fichier de configuration de notre application Remix.\n\nOn peut supprimer l'intégralité du fichier `vite.config.ts`, et le remplacer par le code suivant :\n\n```ts frontend/vite.config.ts\nimport { vitePlugin as remix } from '@remix-run/dev';\nimport { installGlobals } from '@remix-run/node';\nimport { resolve } from 'path';\nimport { flatRoutes } from 'remix-flat-routes';\nimport { defineConfig } from 'vite';\nimport tsconfigPaths from 'vite-tsconfig-paths';\n\nconst MODE = process.env.NODE_ENV;\ninstallGlobals();\n\nexport default defineConfig({\n\tresolve: {\n\t\tpreserveSymlinks: true,\n\t},\n\tbuild: {\n\t\tcssMinify: MODE === 'production',\n\t\tsourcemap: true,\n\t\tcommonjsOptions: {\n\t\t\tinclude: [/frontend/, /backend/, /node_modules/],\n\t\t},\n\t},\n\tplugins: [\n\t\t// cjsInterop({\n\t\t// \tdependencies: ['remix-utils', 'is-ip', '@markdoc/markdoc'],\n\t\t// }),\n\t\ttsconfigPaths({}),\n\t\tremix({\n\t\t\tignoredRouteFiles: ['**/*'],\n\t\t\tfuture: {\n\t\t\t\tv3_fetcherPersist: true,\n\t\t\t},\n\n\t\t\t// When running locally in development mode, we use the built in remix\n\t\t\t// server. This does not understand the vercel lambda module format,\n\t\t\t// so we default back to the standard build output.\n\t\t\t// ignoredRouteFiles: ['**/.*', '**/*.test.{js,jsx,ts,tsx}'],\n\t\t\tserverModuleFormat: 'esm',\n\n\t\t\troutes: async (defineRoutes) => {\n\t\t\t\treturn flatRoutes('routes', defineRoutes, {\n\t\t\t\t\tignoredRouteFiles: [\n\t\t\t\t\t\t'.*',\n\t\t\t\t\t\t'**/*.css',\n\t\t\t\t\t\t'**/*.test.{js,jsx,ts,tsx}',\n\t\t\t\t\t\t'**/__*.*',\n\t\t\t\t\t\t// This is for server-side utilities you want to colocate next to\n\t\t\t\t\t\t// your routes without making an additional directory.\n\t\t\t\t\t\t// If you need a route that includes \"server\" or \"client\" in the\n\t\t\t\t\t\t// filename, use the escape brackets like: my-route.[server].tsx\n\t\t\t\t\t\t// \t'**/*.server.*',\n\t\t\t\t\t\t// \t'**/*.client.*',\n\t\t\t\t\t],\n\t\t\t\t\t// Since process.cwd() is the server directory, we need to resolve the path to remix project\n\t\t\t\t\tappDir: resolve(__dirname, 'app'),\n\t\t\t\t});\n\t\t\t},\n\t\t}),\n\t],\n});\n```\n\nNous ajoutons une clé resolve, qui contient l'instruction `preserveSymlinks: true`. Cela permet à Vite de résoudre les liens symboliques, et de ne pas les suivre. Cette option est nécessaire pour le bon fonctionnement de notre application.\n\nComme nous utilisons la librairie `remix-flat-routes`, la déclaration `appDir: resolve(__dirname, \"app\")` est également nécessaire pour que Vite puisse trouver les routes de notre application depuis NestJS.\n\nLe reste de la configuration est propre à Remix.\n\nRéessayons un build de notre application. Le problème devrait être résolu.\n\n```bash Terminal\nnpm run build\n```\n\n![Le build de notre application a réussi](https://algomax-public.s3.eu-west-3.amazonaws.com/image_16_d7b5a483ab.png)",{"_606":247},{"_24":730,"_28":731,"_26":732,"_600":23,"_30":733,"_258":734,"_248":735,"_34":736,"_593":-5,"_250":251,"_53":737},"cm7s4exd4000596c1fvc9b1q9","configuration-du-projet-nestjs","Configuration du projet NestJS","Nous configurons un nouveau projet NestJS ainsi que l'adapter Remix pour servir toutes nos routes.",["D",1740949554280],["D",1745505995558],"\n## Configuration du projet\n\n\n\nCommençons par créer un nouveau dossier qui va contenir nos deux projets.\n\n```bash Terminal\nmkdir ~/stack-remix-nestjs # Créer un dossier nommé stack-remix-nestjs à la racine de votre dossier personnel\n```\n\nNous allons d'abord créer le projet NestJS, qui va se charger par la suite d'exécuter le code source de Remix.\n\n```bash Terminal\n nest new backend # Crée un projet NestJS nommé backend\n```\n\nNous utiliserons `npm` comme _package manager_.\n\nNous allons ensuite ouvrir le dossier `stack-remix-nestjs` dans un éditeur de code (personnellement, j'utilise [VSCode](https://code.visualstudio.com/)).\n\n### Configuration de NestJS\n\n\n\nUne fois ouvert, notre interface ressemble à ceci\n\n![éditeur de code VSCode avec NestJS d'ouvert](https://algomax-public.s3.eu-west-3.amazonaws.com/image_8_49718ab11e.png)\n\nNous pouvons supprimer le fichier `src/app.controller.spec.ts` et le dossier `test` car nous n'en aurons pas besoin.\n\n#### Création du RemixController\n\n\n\nÀ 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`.\n\nNous 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).\n\n```typescript src/remix/remix.controller.ts\nimport { All, Controller, Next, Req, Res } from '@nestjs/common';\nimport { createRequestHandler } from '@remix-run/express';\nimport { NextFunction, Request, Response } from 'express';\n\n@Controller()\nexport class RemixController {\n\tconstructor() {}\n\n\t@All('*')\n\tasync handler(\n\t\t@Req() request: Request,\n\t\t@Res() response: Response,\n\t\t@Next() next: NextFunction\n\t) {\n\t\t// Pour le moment, on ne fait rien.\n\t}\n}\n```\n\nNous allons installer une dépendance supplémentaire pour servir l'application Remix.\n\n#### Configuration de l'adapter Remix\n\n\n\nNous allons installer la librairie `@remix-run/express` dans notre projet NestJS.\n\n```bash Terminal\ncd backend # Pour se déplacer dans le dossier backend\nnpm install @remix-run/express # Pour installer l'adapter Remix\n```\n\nCette librairie va nous permettre de communiquer avec l'application Remix depuis NestJS.\n\nModifions le controlleur pour ajouter le handler de Remix.\n\n```typescript src/remix/remix.controller.ts\nimport { All, Controller, Next, Req, Res } from '@nestjs/common';\nimport { createRequestHandler } from '@remix-run/express';\nimport { NextFunction, Request, Response } from 'express';\n\n@Controller()\nexport class RemixController {\n\tconstructor() {}\n\n\t@All('*')\n\tasync handler(\n\t\t@Req() request: Request,\n\t\t@Res() response: Response,\n\t\t@Next() next: NextFunction\n\t) {\n\t\treturn createRequestHandler({\n\t\t\tbuild: '', // <= TODO: Nous devons définir le chemin du build de Remix\n\t\t\tgetLoadContext: () => ({\n\t\t\t\ttoto: 'Salut, ça va ?',\n\t\t\t}),\n\t\t})(request, response, next);\n\t}\n}\n```\n\nN'oublions pas d'importer ce contrôleur dans le fichier `app.module.ts`, pour qu'il soit détecté par NestJS.\n\n```typescript src/app.module.ts\nimport { Module } from '@nestjs/common';\nimport { RemixController } from './remix/remix.controller';\n\n@Module({\n\timports: [],\n\tcontrollers: [RemixController],\n\tproviders: [],\n})\nexport class AppModule {}\n```\n\nMaintenant, on a besoin de générer le `build` de l'application Remix pour le servir depuis NestJS.",{"_606":247},{"_24":739,"_28":740,"_26":741,"_600":23,"_30":742,"_258":743,"_248":744,"_34":745,"_593":-5,"_250":251,"_53":746},"cm7s4eyql000c96c1jz7k0d8k","compilation-de-lapplication-nestjs-avec-typescript","Compilation de l'application NestJS avec Typescript","Nous modifions le package.json de notre application NestJS.",["D",1740949556061],["D",1745505993513],"\n\nNous avons presque terminé cette configuration. Cependant, une petite modification du `package.json` de notre application NestJS s'impose.\n\n```json backend/package.json\n{\n\t\"name\": \"@virgile/backend\",\n\t\"version\": \"0.0.1\",\n\t\"description\": \"\",\n\t\"author\": \"\",\n\t\"private\": true,\n\t\"license\": \"UNLICENSED\",\n\t\"main\": \"./dist/remix/remix.service.js\",\n\t\"types\": \"./dist/remix/remix.service.d.ts\",\n\t\"scripts\": {\n\t\t\"dev\": \"run-p dev:compile dev:watch\",\n\t\t\"dev:compile\": \"tsc --build --watch\",\n\t\t\"dev:watch\": \"nodemon node dist/main.js\",\n\t\t\"format\": \"prettier --write \\\"src/**/*.ts\\\" \\\"test/**/*.ts\\\"\",\n\t\t\"prebuild\": \"rimraf dist tsconfig.tsbuildinfo\",\n\t\t\"build\": \"tsc --build\",\n\t\t\"start\": \"node dist/main\",\n\t\t\"lint\": \"eslint \\\"{src,apps,libs,test}/**/*.ts\\\"\",\n\t\t\"typecheck\": \"tsc --noEmit\"\n\t},\n\t\"dependencies\": {\n\t\t\"@nestjs/common\": \"^10.0.0\",\n\t\t\"@nestjs/core\": \"^10.0.0\",\n\t\t\"@nestjs/platform-express\": \"^10.0.0\",\n\t\t\"@remix-run/express\": \"^2.8.1\",\n\t\t\"reflect-metadata\": \"^0.2.0\",\n\t\t\"rxjs\": \"^7.8.1\"\n\t},\n\t\"devDependencies\": {\n\t\t\"@nestjs/cli\": \"^10.0.0\",\n\t\t\"@nestjs/schematics\": \"^10.0.0\",\n\t\t\"@nestjs/testing\": \"^10.0.0\",\n\t\t\"@types/express\": \"^4.17.17\",\n\t\t\"@types/jest\": \"^29.5.2\",\n\t\t\"@types/node\": \"^20.3.1\",\n\t\t\"@virgile/eslint-config\": \"*\",\n\t\t\"@virgile/frontend\": \"*\",\n\t\t\"@virgile/typescript-config\": \"*\",\n\t\t\"nodemon\": \"^3.1.0\",\n\t\t\"npm-run-all\": \"^4.1.5\",\n\t\t\"prettier\": \"^3.0.0\",\n\t\t\"source-map-support\": \"^0.5.21\",\n\t\t\"ts-loader\": \"^9.4.3\",\n\t\t\"ts-node\": \"^10.9.1\",\n\t\t\"tsconfig-paths\": \"^4.2.0\",\n\t\t\"typescript\": \"^5.1.3\"\n\t}\n}\n```\n\nQu'avons-nous changé ?\n\n- La commande `dev` exécute deux commandes en parallèle (grâce à la librairie `npm-run-all`)\n- La commande `dev:compile` compile le code source de l'application NestJS\n- La commande `dev:watch` lance le serveur NestJS en mode watch\n- La commande `prebuild` supprime les fichiers de compilation précédents (pour éviter un bug). La commande `prebuild` se lance automatiquement lorsque l'on exécute la commande `build`\n- La commande `typecheck` permet de détecter les erreurs Typescript\n- La commande `lint` permet de détecter les erreurs Eslint (et appliquer les bonnes pratiques)\n- La commande `format` permet de formater le code source avec Prettier\n",{"_606":247},{"_24":748,"_28":749,"_26":750,"_600":6,"_30":751,"_258":752,"_248":753,"_34":754,"_593":-5,"_250":251,"_53":755},"cm7s4eyv7000d96c1yvc0h401","on-teste-notre-application","On teste notre application","Nous effectuons un test pour vérifier que le code source fonctionne, avant de le versionner.",["D",1740949556228],["D",1745505988847],"\n## On teste notre application\n\nAvant de versionner notre code sur [Github](https://github.com), testons chacune des commandes une par une.\n\n### Erreurs de type\n\nDétectons les erreurs de type. _Normalement_, il ne devrait pas en détecter.\n\n```bash Terminal\nnpm run typecheck\n```\n\n### Bonnes pratiques\n\nDétectons les bonnes pratiques avec Eslint. Il se peut qu'il nous signale quelques erreurs.\n\n```bash Terminal\nnpm run lint\n```\n\nSi c'est le cas et que ça concerne les dossiers `build` ou `node_modules`, il est possible d'ignorer ces deux fichiers en créant un fichier `.eslintignore` à la racine du projet.\n\n```bash Terminal\ntouch .eslintignore\n```\n\n```bash .eslintignore\nbuild\nnode_modules\n```\n\nPour désactiver le cache sur les commandes `typecheck` et `lint`, il suffit de désactiver l'option dans la configuration Turborepo, en rajoutant l'instruction `cache: false` dans les pipelines.\n\n```json turbo.json\n{\n\t\"$schema\": \"https://turbo.build/schema.json\",\n\t\"pipeline\": {\n\t\t\"build\": {\n\t\t\t\"outputs\": [\"backend/dist/**\", \"frontend/build/**\"],\n\t\t\t\"dependsOn\": [\"^build\"]\n\t\t},\n\t\t\"dev\": {\n\t\t\t\"cache\": false,\n\t\t\t\"persistent\": true\n\t\t},\n\t\t\"typecheck\": {\n\t\t\t\"cache\": false\n\t\t},\n\t\t\"lint\": {\n\t\t\t\"cache\": false\n\t\t}\n\t}\n}\n```\n\nRelançons la commance pour bénéficier d'une analyse fiable, sans cache.\n\n```bash Terminal\nnpm run lint\n```\n\n### Build de l'application\n\nCompilons le code source de l'application. _Normalement_, nous avons résolu toutes les erreurs.\n\n```bash Terminal\nnpm run build\n```\n\n### Lancement de l'application\n\nNous avons oublié d'ajouter la commande `start` au fichier `package.json` de notre application. Ajoutons-là tout de suite.\n\n```json package.json\n{\n\t\"scripts\": {\n\t\t\"start\": \"cd backend && npm run start\"\n\t}\n}\n```\n\nCette commande va exécuter la commande `start` de notre `backend/package.json`\n\nOn peut maintenant la lancer à la racine du projet.\n\n```bash Terminal\nnpm start\n```\n\n![Notre application Remix + NestJS s'exécute avec succès !](https://algomax-public.s3.eu-west-3.amazonaws.com/image_17_f209707162.png)",{"_606":247},"markdown","var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),q=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},l=(n,e,o,u)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of h(e))!x.call(n,i)&&i!==o&&r(n,i,{get:()=>e[i],enumerable:!(u=p(e,i))||u.enumerable});return n};var v=(n,e,o)=>(o=n!=null?d(f(n)):{},l(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),g=n=>l(r({},\"__esModule\",{value:!0}),n);var c=j((C,s)=>{s.exports=_jsx_runtime});var w={};q(w,{default:()=>m,frontmatter:()=>_});var t=v(c()),_=void 0;function a(n){let e={h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...n.components},{YoutubeCourseVideo:o}=e;return o||b(\"YoutubeCourseVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Pourquoi cette formation Remix.js + NestJS ?\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.youtube.com/watch?v=yv96ar6XNnU\"}),`\n`,(0,t.jsx)(\"timestamp\",{value:\"0\"}),`\n`,(0,t.jsx)(e.p,{children:\"En 4 ans de d\\xE9veloppement, je n'ai pas encore trouv\\xE9 une stack qui me pla\\xEEt. Il y a toujours un \\xE9l\\xE9ment qui manque (une fonctionnalit\\xE9, ou une limitation technique).\"}),`\n`,(0,t.jsx)(e.p,{children:\"En tant que d\\xE9veloppeur fullstack, je souhaite b\\xE9n\\xE9ficier du meilleur des deux mondes.\"}),`\n`,(0,t.jsx)(e.p,{children:\"Je souhaite utiliser une technologie :\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"simple \\xE0 utiliser\"}),`\n`,(0,t.jsx)(e.li,{children:\"qui me permet d'impl\\xE9menter une fonctionnalit\\xE9 rapidement\"}),`\n`,(0,t.jsx)(e.li,{children:\"qui me permet d'avoir un contr\\xF4le total sur la logique, front comme back\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"Cette formation permet de vous partager ces technologies. J'esp\\xE8re qu'elle vous plaira !\"})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(a,{...n})}):a(n)}function b(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(w);})();\n;return Component;","readingTime",{"_59":760,"_61":56,"_63":761,"_65":762},"1 min read",30300,101,"headers",[765],{"_766":767,"_59":768,"_769":770},"level",2,"Pourquoi cette formation Remix.js + NestJS ?","link","pourquoi-cette-formation-remixjs-nestjs-","basePrice","totalSavingsInEuros","totalSavingsInPercentage","finalPrice","pppBasePrice","firstPromotion","priceFactor","pppCountryName","France","pppDiscountPercentage","pagesRemainingAtCurrentPrice",100,"href","https://algomax.fr/formations/developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo/introduction-et-pre-requis","courseSlug","hasPurchasedCourse","hasReviewed","routes/formations+/$courseSlug+/$moduleSlug.index",{"_24":790,"_30":591,"_791":247,"_587":-5,"_28":589,"_792":-5,"_250":251,"_248":793,"_26":590,"_794":795,"_594":799,"_763":802,"_758":803,"_756":806,"_593":-5,"_807":808,"_809":589,"_785":200,"_783":784},"cm7s4ewbs000196c1i0w4k1l9","order","startTime",["D",1742663835063],"course",{"_256":257,"_796":6,"_36":-5,"_67":797},"globalYoutubeVideo",{"_69":798},"https://algomax-public.s3.amazonaws.com/6f4fa9e9-3f81-49fc-b42a-321a6d07dbeb.png",[800,801],{"_593":-5,"_24":597,"_26":599,"_28":598,"_30":601,"_600":6,"_250":251},{"_593":-5,"_24":608,"_26":610,"_28":609,"_30":611,"_600":6,"_250":251},[],{"_59":760,"_61":56,"_63":804,"_65":805},11400,38,"var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var h=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),j=(e,o)=>{for(var n in o)s(e,n,{get:o[n],enumerable:!0})},c=(e,o,n,u)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let t of x(o))!_.call(e,t)&&t!==n&&s(e,t,{get:()=>o[t],enumerable:!(u=d(o,t))||u.enumerable});return e};var v=(e,o,n)=>(n=e!=null?p(f(e)):{},c(o||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),D=e=>c(s({},\"__esModule\",{value:!0}),e);var l=h((C,i)=>{i.exports=_jsx_runtime});var N={};j(N,{default:()=>a,frontmatter:()=>M});var r=v(l()),M=void 0;function m(e){let o={p:\"p\",...e.components};return(0,r.jsx)(o.p,{children:\"Dans ce module, nous allons d\\xE9couvrir les technologies Remix, NestJS et Turborepo et comment nous pouvons les utiliser pour d\\xE9velopper des applications sur mesure. Nous allons \\xE9galement installer NodeJS et tous les pr\\xE9-requis n\\xE9cessaires pour commencer cette formation.\"})}function a(e={}){let{wrapper:o}=e.components||{};return o?(0,r.jsx)(o,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}return D(N);})();\n;return Component;","moduleImageUrl","/formations/developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo/introduction-et-pre-requis.png","moduleSlug","actionData","errors"]