[{"_1":2,"_790":-5,"_791":-5},"loaderData",{"_3":4,"_237":238,"_766":767},"root",{"_5":6,"_7":8,"_15":-5,"_16":17,"_194":195,"_212":213,"_224":-5,"_225":226},"isDev",false,"honeypotInputProps",{"_9":10,"_11":12,"_13":14},"nameFieldName","name__confirm","validFromFieldName","from__confirm","encryptedValidFrom","iymYRADEIVD+ZnPQRRATt6UrdfLmFR/m2dNaBRzEgpYD60n+3bT/Rlk=","toastItem","latestArticles",{"_18":19,"_37":129},"articles",{"_18":20,"_120":121},[21,77,97],{"_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","cma0ygz5s000dyk67f34wo2ts","title","Les 10 meilleurs hooks avec React Router 7 (anciennement Remix)","slug","les-10-meilleurs-hooks-avec-react-router-7-anciennement-remix","description","Voici 10 hooks que j'utilise le plus dans mes applications Remix / React Router 7. ","datePublished",["D",1736640000000],"content","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 !","youtubeVideo","categories",[39,42,45],{"_24":40,"_26":41},"cma0ygyr10000yk674psikbwx","Remix",{"_24":43,"_26":44},"cma0ygyss0001yk67s6tvyf8q","ReactJS",{"_24":46,"_26":47},"cma0ygytr0002yk67fi9yxtr2","React Router 7","author",{"_24":50,"_51":52},"cma0ygz2m000ayk67bs6pgohz","name","Virgile","_count",{"_55":56},"views",3,"readTime",{"_59":60,"_61":62,"_63":64,"_65":66},"text","14 min read","minutes",13.04,"time",782400,"words",2608,"featuredImage",{"_69":70,"_71":72,"_73":74,"_75":76},"url","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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=08e59ec6679be408d8298970324bebc0d9fa97ae0ab4bdf97b9bcc1ed9a57aae&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","alt","React Router 7 ","width",1280,"height",720,{"_22":23,"_24":78,"_26":79,"_28":80,"_30":81,"_32":82,"_34":83,"_36":-5,"_37":84,"_48":86,"_53":87,"_57":89,"_55":88,"_67":94},"cma0ygzcv000fyk67izw2pxw3","Comment créer une API avec plusieurs actions dans Remix ?","comment-creer-une-api-avec-plusieurs-actions-dans-remix","Améliore ton code en utilisant le concept Discriminated Union Type dans ton application Remix, avec Zod et Conform !",["D",1719532800000],"Il y a quelques semaines, j'ai découvert un nouveau concept Typescript en lisant un article intéressant sur les [Discriminated Union Types](https://www.hexa-web.fr/blog/discriminated-union-type-typescript) (merci encore [Dimitri](https://www.linkedin.com/in/dimitri-dumont/) 😉).\n\nIl m'a permis d'améliorer le code de mes applications **Remix**. Notamment sur la partie **serveur**, avec les **actions**.\n\n## Pourquoi utiliser le Discriminated Union Type ?\n\nJe l'utilise parce qu'il me permet d'écrire une logique une seule fois. Au lieu de devoir écrire plusieurs fois la même logique de validation, pour des actions mineures comme la **suppression**, l'**édition** et la **création** d'une donnée, toute cette logique se retrouve dans le même fichier (et non pas dans 3-4 fichiers différents).\n\n\n\n## Comment créer une route API\n\nPour mieux comprendre le [routing dans Remix](/blog/les-6-routes-a-connaitre-avec-le-framework-remix-framework-react), je vous conseille l'article sur [les 6 types de routes à connaître dans Remix](/blog/les-6-routes-a-connaitre-avec-le-framework-remix-framework-react).\n\nIl nous suffit de créer un fichier dans le dossier `app/routes`, que nous allons nommer et qui prendra l'extension `tsx`. Prenons par exemple une route que nous allons appeler `actions`, qui sera accessible à l'URL `http://localhost:3000/actions`.\n\nEnsuite, nous avons besoin d'exporter une *méthode* nommée *action* (qui contient la logique **serveur**) :\n\n```tsx app/routes/actions.tsx\nexport const action = async ({ request }: ActionFunctionArgs) => {\n return null;\n```\n\nLa fonction **action** sera exécutée à chaque requête API de type *POST*, *PUT*, *DELETE* ... Toutes les [méthodes HTTP](https://developer.mozilla.org/fr/docs/Web/HTTP/Methods) sauf le *GET*.\n\nMaintenant, nous allons rajouter un peu de logique, avec plusieurs actions possibles.\n\n## Comment déterminer l'action à exécuter ?\n\nDans cet exemple, nous souhaitons appeler cette *route* pour **ajouter** ou **supprimer** un utilisateur. Nous avons donc 2 **mutations** (ou actions) différentes dans la même *méthode* *action*.\n\nPour faire simple, nous allons soumettre une valeur dans le formulaire qui va changer en fonction de l'action à effectuer. Nous allons ensuite utiliser un **switch** pour déterminer laquelle des deux actions doit être exécutée.\n\n> C'est la valeur de la variable *intent* qui détermine quelle logique exécuter.\n\n```tsx app/routes/actions.tsx\nconst createUser = async () => {\n}\nconst deleteUser = async () => {\n}\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n const intent : 'create' | 'delete' = 'create';\n switch (intent) {\n case 'create': {\n return await createUser()\n }\n case 'delete': {\n return await deleteUser()\n }\n }\n};\n```\nCependant, c'est le composant React côté client qui va déterminer la valeur de la constante nommée **intent**. (Nous allons supprimer la déclaration de la variable *intent* dans la méthode *action*).\n\nAjoutons la logique côté client, en exportant par défaut un composant React (je te conseille [cet article dans lequel on implémente un formulaire full typesafe avec Remix](/blog/videos/formulaires-surpuissants-avec-remix-zod-et-conform) :\n\n```tsx app/routes/actions.tsx\nimport type { ActionFunctionArgs } from \"@remix-run/node\";\nimport { Form, json } from \"@remix-run/react\";\n\nconst createUser = async () => { };\nconst deleteUser = async () => { };\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n const formData = await request.formData();\n \n const intent = formData.get('intent') as 'create' | 'delete';\n switch (intent) {\n case \"create\": {\n return await createUser();\n }\n case \"delete\": {\n return await deleteUser();\n }\n }\n};\n\nexport default function User() {\n return (\n \n );\n}\n```\n\n> Mais je comprend pas, il est où ton Discriminated Union Type ?\n\nEffectivement, nous y venons. Nous avons codé toute la logique serveur et client pour nous permettre d'effectuer deux mutations au sein du même composant : **créer** et **supprimer** un utilisateur.\n\nMais nous n'utilisons pas encore de Discriminated Union Type. On pourrait définir des types avec **Typescript** directement dans notre action, mais ça ne serait pas vraiment typesafe. Pour être sûr d'avoir des données typées, nous avons besoin d'utiliser la librairie **Zod** pour valider les données de formulaire. Je vous recommende également la librairie **Conform** pour améliorer l'expérience de vos utilisateurs.\n\nPour [maîtriser](https://youtu.be/_-ZOGj80TMw) deux ces librairies avec Remix, [regardez cette vidéo](https://youtu.be/_-ZOGj80TMw)\n\n\n\n## Utiliser le Discriminated Union Type avec Zod et Conform\n\nNous avons besoin d'installer trois librairies pour avoir des données typées (grâce à Zod), discriminer la mutation (grâce à Typescript) et améliorer l'UX du formulaire (grâce à Conform).\n\n```sh Terminal\nnpm install zod @conform-to/zod @conform-to/react\n```\n\nEnsuite, nous devons définir deux schémas Zod :\n\n- Un schéma pour créer l'utilisateur (*CreateAction*)\n- Un schéma pour supprimer l'utilisateur (*DeleteAction*)\n\nChacun de ces schémas possède une *clé* en commun : la propriété **intent**, qui nous permettra de discriminer le schéma (savoir lequel des deux représente la donnée soumise par le formulaire)\n\nLe code ressemble maintenant à ça : \n\n```tsx app/routes/actions.tsx\nimport { parseWithZod } from \"@conform-to/zod\";\nimport type { ActionFunctionArgs } from \"@remix-run/node\";\nimport { Form, json } from \"@remix-run/react\";\nimport { z } from \"zod\";\n\nconst createUser = async () => { };\nconst deleteUser = async () => { };\n\nconst DeleteAction = z.object({\n userId: z.string({\n required_error: \"User ID is required\",\n }),\n intent: z.literal(\"delete\"),\n});\n\nconst CreateAction = z.object({\n firstname: z.string({ required_error: \"Firstname is required\" }),\n intent: z.literal(\"create\"),\n});\n\nconst Actions = z.union([DeleteAction, CreateAction]);\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n const formData = await request.formData();\n const submission = parseWithZod(formData, {\n schema: Actions,\n });\n\n if (submission.status !== \"success\") {\n return json({ result: submission.reply() });\n }\n const { intent } = submission.value;\n switch (intent) {\n case \"create\": {\n return await createUser();\n }\n case \"delete\": {\n return await deleteUser();\n }\n }\n};\n\nexport default function User() {\n return (\n \n );\n}\n```\n\nCe qu'il faut regarder, c'est la déclaration du schéma **Actions** :\n\n`const Actions = z.union([DeleteAction, CreateAction]);`\n\nNous utilisons **z.union**, pour définir nos deux actions différentes en informant Zod qu'elles pourront être discriminées par la propriété *intent*.\n\nMaintenant, si l'utilisateur soumet le formulaire avec l'intention de créer un utilisateur, Zod va valider les propriétés *firstname*, *lastname* et *intent=\"create\"*.\n\nSi l'utilisateur a l'intention de supprimer l'utilisateur, Zod va valider la propriété *intent=\"delete\"*, et ne va pas causer d'erreur si les propriétés *firstname* et *lastname* sont absentes.\n\nQu'en as-tu pensé ? N'hésite pas à donner ton avis sur [LinkedIn](/linkedin) ou la [chaîne YouTube](/youtube).",[85],{"_24":40,"_26":41},{"_24":50,"_51":52},{"_55":88},717,{"_59":90,"_61":91,"_63":92,"_65":93},"6 min read",5.275,316500,1055,{"_69":95,"_71":96,"_73":74,"_75":76},"https://algomax-public.s3.eu-west-3.amazonaws.com/c610eae3-de1d-4956-91d4-f8a8091d9d9f.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=c8ff7eee3b667f7ee79108e3ae04a483c743989f9099901e1a9aa6f4e4979bf4&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","créer une API ",{"_22":23,"_24":98,"_26":99,"_28":100,"_30":101,"_32":102,"_34":103,"_36":-5,"_37":104,"_48":107,"_53":108,"_57":110,"_55":109,"_67":115},"cma0ygzhk000hyk6716tq7dy9","Comment gérer les erreurs avec Remix ? (ErrorBoundary)","comment-gerer-les-erreurs-avec-remix-error-boundary","Avoir des erreurs Javascript ne fait jamais plaisir. Mais il existe le composant ErrorBoundary). Dans ce guide, tu vas découvrir comment afficher un composant d'erreur personnalisé en pour protéger toutes les pages de ton application.",["D",1714608000000],"As-tu déjà eu des erreurs Javascript en production ? **Pire** encore, as-tu reçu l'appel d'un client, qui se plaint d'avoir reçu un message d'erreur ?\nTu perds de la crédibilité.\n\nHeureusement, il existe le composant _ErrorBoundary_ qui permet d'afficher un composant d'erreur, respectant le thème du site et ton Design System.\n\n\n\n## Avant d'utiliser ErrorBoundary\n\nTu retrouves un message d'erreur générique incompréhensible. Difficile de comprendre ce qui a pu se passer, et tu vas prendre du temps à réparer le bug. De plus, ton site est inutilisable en l'état. La navigation de ton utilisateur a été coupée brutalement.\n\n![Erreur générique Javascript](https://algomax-public.s3.eu-west-3.amazonaws.com/3_Ul0_S_e9785a9f36.png)\n\n## Après avoir mis en place ErrorBoundary\n\nTu améliores l'expérience utilisateur. Tu réduis l'impact de l'erreur à l'endroit où elle a été déclenchée. Cela permet au développeur de vite résoudre le problème, car il sait exactement de quel fichier il s'agit.\n\nDans Remix, on utilise le composant [ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary), qui va remplacer le composant ayant déclenché l'erreur.\n\n![Message d'erreur Remix localisé, clair et concis, ne perturbant pas le parcours utilisateur](https://algomax-public.s3.eu-west-3.amazonaws.com/error_boundary_cdcf793439.png)\n\nTu retrouves cet exemple et davantage d'information dans la documentation de Remix concernant [l'error handling](https://remix.run/docs/en/main/guides/errors)\n\nPour améliorer l'expérience utilisateur (UX), il est recommandé d'offrir une explication claire dans le message d'erreur, comme expliqué dans la figure ci-dessous ([Source](https://www.linkedin.com/pulse/designing-better-error-messages-ux-vitaly-friedman/)).\n\n![Erreur Javascript personnalisée, rassurant le client et expliquant ce qui s'est passé](https://algomax-public.s3.eu-west-3.amazonaws.com/1692716312806_e0b0f10037.png)\n\nUn message d'erreur idéal :\n\n- **rassure** le client\n- **explique** la raison du problème\n- **offre** une marche à suivre pour arranger les choses (contacter le support)\n\n## Qu'est-ce que le composant ErrorBoundary ?\n\nC'est une _librairie_ Javascript, disponible sur _NPM_ sous le nom de [react-error-boundary](https://www.npmjs.com/package/react-error-boundary). Elle est téléchargée plus de 3,7 millions de fois par semaine.\n\nPour l'utiliser dans une application React standard, il suffit de la télécharger dans ton projet :\n\n```bash Terminal\nnpm install react-error-boundary\n```\n\nEnsuite, tu l'utilises dans un composant React. Elle va _englober_ le composant qui risque de déclencher une erreur, et afficher un composant _fallback_ à la place.\n\n```tsx example.tsx\nimport { ErrorBoundary } from 'react-error-boundary';\n\nSomething went wrong}>\n\t\n;\n```\n\nCet exemple montre deux composants :\n\n- Le composant parent _ErrorBoundary_, qui prend un _children_ (le composant enfant) et une propriété _fallback_ (affichant le composant d'erreur)\n- Le composant enfant _ExampleApplication_. En cas d'erreur de ce dernier, l'erreur ne va pas remonter à la racine de l'application. À la place, l'erreur va afficher le composant _fallback_.\n\nIl y a une deuxième manière d'utiliser ce composant, offrant plus de contrôle et une meilleure UX.\n\n```tsx example.tsx\nimport { ErrorBoundary } from 'react-error-boundary';\n\nfunction fallbackRender({ error, resetErrorBoundary }) {\n\t// Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n\treturn (\n\t\t

\n\t\t\t

Something went wrong:

\n\t\t\t

{error.message}

\n\t\t

\n\t);\n}\n\n {\n\t\t// Reset the state of your app so the error doesn't happen again\n\t}}\n>\n\t\n;\n```\n\nLa propriété _fallbackRender_ accepte une fonction fléchée, nous permettant de récupérer deux arguments :\n\n- Les informations sur l'erreur qui a été déclenchée\n- Une fonction permettant de ré-effectuer un rendu du composant. Déclencher cette fonction permet d'annuler l'erreur, et d'afficher le composant enfant.\n\nGénéralement, on laisse l'utilisateur appeler cette méthode `resetErrorBoundary`. Plus haut, par exemple en utilisant le bouton _Try Again_.\n\nMais cet article ne se concentre pas sur ce composant très utile.\n\nSi tu utilises [Remix](https://remix.run), tu n'as même pas besoin de l'utiliser.\n\nIl est intégré directement dans la librairie !\n\n## Comment gérer tes erreurs avec Remix\n\nPour déclencher une erreur dans ton application Remix, il te suffit d'ajouter l'instruction `throw new Error('bam')` sur n'importe quelle route active.\n\nCe qui affiche ceci :\n\n![Une erreur dans une application Remix](https://algomax-public.s3.eu-west-3.amazonaws.com/image_19_c7ce872c07.png)\n\nCette erreur n'est pas claire du tout. Et elle rend ton application inutilisable pour les clients : Ils ne peuvent pas accéder à une autre page depuis l'interface.\n\nDe plus, cela ne t'aide pas à connaître la raison de l'erreur : elle pourrait être déclenchée par n'importe quoi.\n\nComment faire ? Il suffit d' **exporter un composant nommé ErrorBoundary** dans ton application Remix. Commence par l'importer dans le fichier `root.tsx`, se situant dans le dossier `app/routes` de ton projet Remix.\n\n## Le composant ErrorBoundary (Remix)\n\nLe composant _ErrorBoundary_ est une convention de Remix (au même titre que les méthodes _loader_ et _action_). Exporter un composant nommé \"ErrorBoundary\" dans n'importe quelle route indique à Remix qu'en cas d'erreur, il doit afficher son contenu, et ne pas propager l'erreur plus haut.\n\nPrenons par exemple l'export ci-dessous :\n\n```tsx app/routes/root.tsx\nexport function ErrorBoundary() {\n const error = useRouteError();\n let errorMessage = 'Une erreur inattendue est survenue';\n\n if (error instanceof Error) {\n errorMessage = error.message;\n }\n\n return

{errorMessage};\n}\n```\n\nAprès avoir ajouté ces quelques lignes, notre application ressemble à ça :\n\n![Notre application Remix affiche le message d'erreur \"bam\"](https://algomax-public.s3.eu-west-3.amazonaws.com/image_20_66ae48cf4e.png)\n\nOn avait rajouté la ligne `throw new Error('bam');`. Au lieu d'afficher l'erreur en rouge, sans design, notre composant _ErrorBoundary_ est affiché.\n\nCela nous apporte quelques bénéfices :\n\n- L'erreur ne se propage pas au dessus (on y revient un peu plus bas)\n- On peut designer notre message d'erreur, expliquer au client ce qui s'est passé, et lui indiquer la marche à suivre\n- En bonus, on peut sauvegarder cette erreur avec un outil comme _Sentry_, ou l'envoyer par email pour être prévenu si jamais elle est déclenchée en production.\n\n## Les erreurs ne remontent pas\n\n[React](https://react.dev) utilise un système de composants, avec des balises imbriquées. Ce qui donne une hiérarchie avec des \"parents\" et des \"enfants\".\n\nAvec **Remix**, il est possible d'implémenter des _routes imbriquées_. Cela signifie qu'il est possible d'avoir plusieurs routes _actives_ en même temps.\n\nC'est ce que nous montre l'image, que nous avions vu au dessus :\n\n![Message d'erreur Remix localisé, clair et concis, ne perturbant pas le parcours utilisateur](https://algomax-public.s3.eu-west-3.amazonaws.com/error_boundary_cdcf793439.png)\n\nCette image représente une route imbriquée. Quatres routes sont actuellement actives :\n\n- La route _root_ principale. C'est notre composant d'entrée, cette route est rendue sur toutes les routes. La route _root_ affiche la barre latérale, sur le côté gauche.\n- La route _sales_ (on la voit comme premier segment dans l'URL) affiche le titre de la page **\"Sales\"**, ainsi qu'une barre de navigation horizontale.\n- La route _invoices_ (on retrouve son segment dans l'URL) est \"enfant\" de la route Sales, et affiche les statistiques globales, la barre jaune et verte ainsi que le tableau de factures\n- La route dynamique _102000_ (où **102000** représente une _id_ de facture) est imbriquée dans _invoices_ (encore une fois, on le constate grâce au segment d'URL final). C'est le dernier enfant de cette hiérarchie, l'enfant le plus bas. Et il est en erreur.\n\nOn peut symboliser cette vue d'une autre manière :\n\n```tsx\nexport default function Page () {\nreturn (\n \n \n )\n}\n```\n\nChaque imbrication représente un enfant dans notre composant. Et le composant **ErrorBoundary** empêche notre erreur de remonter plus haut.\n\nCe qui est représenté par l'image ci-dessus, au final, est un message d'erreur qui a empêché une erreur déclenchée dans le composant `Invoice` de remonter plus haut.\n\nC'est un peu comme s'il s'était passé la chose suivante :\n\n```tsx\nexport default function Page() {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t}>\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n```\n\nRemix a remplacé le composant `Invoice` par un composant `Error`, car ce fichier était protégé par une fonction ErrorBoundary.\n\nEn ajoutant ce composant sur notre route imbriquée, nous améliorons considérablement l'expérience de nos utilisateurs. De plus, nos développeurs identifient plus rapidement le problème, car le composant en erreur est au plus bas dans la hiérarchie.\n",[105,106],{"_24":40,"_26":41},{"_24":43,"_26":44},{"_24":50,"_51":52},{"_55":109},708,{"_59":111,"_61":112,"_63":113,"_65":114},"7 min read",6.335,380100,1267,{"_69":116,"_71":117,"_73":118,"_75":119},"https://algomax-public.s3.eu-west-3.amazonaws.com/b48edc68-d889-41c9-b36f-1f600141932c.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=1d1fdf4ab5899e396aad46f01882785cc0a12628e9a065f1d900d152f97a7b8f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","Comment gérer les erreurs avec React Router 7",1920,1080,"pagination",{"_122":123,"_124":56,"_125":126,"_127":128},"page",1,"pageSize","pageCount",10,"total",29,[130,135,142,149,156,163,169,174,179,186],{"_24":131,"_26":132,"_28":133,"_134":-5},"cma0ygyvx0004yk67z5ezcv8p","Application mobile ","application-mobile-","image",{"_24":136,"_26":137,"_28":138,"_134":139},"cma0ygyz00007yk677i1tjff2","NodeJS","nodejs",{"_24":140,"_69":141,"_71":137},"cma239buz0006ykoznafwzvow","https://algomax-public.s3.amazonaws.com/67e309ee-8db1-4816-b4ab-f9962c33d4f1.png",{"_24":143,"_26":144,"_28":145,"_134":146},"cma0ygz000008yk67urmvvgxl","Docker","docker",{"_24":147,"_69":148,"_71":145},"cma238g0g0002ykozkuyvfu7r","https://algomax-public.s3.amazonaws.com/40436d76-e4c0-43a1-9683-019adf5e9014.png",{"_24":150,"_26":151,"_28":152,"_134":153},"cma0ygywx0005yk67arcm0kw4","Figma","figma",{"_24":154,"_69":155,"_71":151},"cma24o2wh0007ykozlzifidx0","https://algomax-public.s3.amazonaws.com/7019f576-4bb9-4167-b567-c09745898615.png",{"_24":157,"_26":158,"_28":159,"_134":160},"cma0ygyuu0003yk679pggj8v0","NestJS","nestjs",{"_24":161,"_69":162,"_71":158},"cma24pvg10008ykozfti5xo0h","https://algomax-public.s3.amazonaws.com/eae71424-33db-4162-8f02-d08a2e20a622.png",{"_24":46,"_26":47,"_28":164,"_134":165},"react-router-7",{"_24":166,"_69":167,"_71":168},"cma24rd2e0009ykozhi6zylip","https://algomax-public.s3.amazonaws.com/512552ae-927c-4a83-9513-d850ff83e574.png","React Router 7 logo",{"_24":43,"_26":44,"_28":170,"_134":171},"reactjs",{"_24":172,"_69":173,"_71":44},"cma24srkf000aykozg11d0dk2","https://algomax-public.s3.amazonaws.com/f10999d5-e739-4bc3-afb4-8211ec7b9f49.webp",{"_24":40,"_26":41,"_28":175,"_134":176},"remix",{"_24":177,"_69":178,"_71":41},"cma24tcao000bykoz44554mdv","https://algomax-public.s3.amazonaws.com/e317a065-d836-4232-8ae5-7de6a9ff5277.png",{"_24":180,"_26":181,"_28":182,"_134":183},"cma0ygyxz0006yk67t7rx9ota","Strapi","strapi",{"_24":184,"_69":185,"_71":182},"cma2394060005ykozjkxqqoh2","https://algomax-public.s3.amazonaws.com/74c12025-c0f3-4778-83cf-5b69765baaa1.png",{"_24":187,"_26":188,"_28":189,"_134":190},"cma0ygz0z0009yk67nztcrh2s","Terminal","terminal",{"_24":191,"_69":192,"_71":193},"cma238oi20003ykoz7fpuawz5","https://algomax-public.s3.amazonaws.com/2d6946a5-e89f-4536-a021-ab7cfda0cc36.png","Terminal (iterm)","courseBackLinks",[196,200,202,206,209],{"_26":197,"_28":198,"_199":-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":47,"_28":164,"_199":201},"/formation-react-router-7",{"_26":203,"_28":204,"_199":205},"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":207,"_28":208,"_199":-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":210,"_28":211,"_199":-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","env",{"_214":215,"_216":217,"_218":219,"_220":221,"_222":223},"GOOGLE_CAPTCHA_SITE_KEY","6Lfia0UkAAAAACBikkfHI1VNoRkyUK99pofGRHvD","ALGOMAX_ENV","production","FRONTEND_URL","https://algomax.fr","GTM_ID","GTM-5QP7LX7","GA_ID","G-N1C6D1CR5Z","user","requestInfo",{"_227":228,"_233":234,"_235":236},"hints",{"_229":230,"_231":232},"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",{"_229":230},"routes/formations+/$courseSlug+/_courseLayout",{"_36":-5,"_53":239,"_28":198,"_242":243,"_244":245,"_246":-5,"_24":247,"_34":248,"_26":197,"_30":249,"_250":251,"_252":253,"_199":-5,"_67":254,"_272":273,"_578":579,"_734":735,"_736":737,"_741":742,"_749":241,"_750":241,"_751":241,"_752":241,"_753":241,"_754":-5,"_755":123,"_756":757,"_758":241,"_759":760,"_587":-5,"_761":762,"_763":198,"_764":23,"_765":6},{"_240":241},"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":255,"_256":257,"_258":259,"_69":260,"_261":262,"_263":264,"_265":266,"_73":74,"_75":76,"_71":267,"_26":268,"_30":-5,"_269":6,"_252":270,"_242":271},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=9dfa31dfb28a27f445ce664067fcc913f3cb325a47210576669cd3a78a871512&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",[274,299,316,333,350,366,382,398,414,430,446,462,478,494,501,517,533,549,562],{"_24":275,"_51":276,"_277":278,"_279":280,"_281":282,"_283":247,"_284":23,"_252":285,"_242":286,"_287":288},"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":280,"_256":289,"_258":290,"_69":291,"_261":262,"_263":292,"_265":241,"_73":293,"_75":294,"_71":295,"_26":296,"_30":-5,"_269":23,"_252":297,"_242":298},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=86235389943b7e566db6a0097841d0e185c4956dd303113a3eaa175420e8e2ff&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":300,"_51":301,"_277":302,"_279":303,"_281":304,"_283":247,"_284":23,"_252":305,"_242":306,"_287":307},"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":303,"_256":308,"_258":309,"_69":310,"_261":262,"_263":292,"_265":241,"_73":311,"_75":311,"_71":312,"_26":313,"_30":-5,"_269":23,"_252":314,"_242":315},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=4d220b34b83d3c972790c596c8a1d668df47459cecc6539048978708e6c2ebee&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":317,"_51":318,"_277":319,"_279":320,"_281":321,"_283":247,"_284":23,"_252":322,"_242":323,"_287":324},"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":320,"_256":325,"_258":326,"_69":327,"_261":262,"_263":292,"_265":241,"_73":328,"_75":328,"_71":329,"_26":330,"_30":-5,"_269":23,"_252":331,"_242":332},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=81a6725c8558f8414cb338c557f77838844522a94a316aac372d31ae583c2059&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":334,"_51":335,"_277":336,"_279":337,"_281":338,"_283":247,"_284":23,"_252":339,"_242":340,"_287":341},"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":337,"_256":342,"_258":343,"_69":344,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":346,"_26":347,"_30":-5,"_269":23,"_252":348,"_242":349},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=e44e471b28cc360ddc959d2b713b9fd12e30908b8ad07c8554e57f58eaf17167&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":351,"_51":352,"_277":353,"_279":354,"_281":355,"_283":247,"_284":23,"_252":356,"_242":357,"_287":358},"cmatmf7qx001896a2t1u4zi3u","CyrilleDeNantes","Excellent, beaucoup d'informations et haute qualité ! ","cmatmf7o9001696a21qfshbpv","https://www.youtube.com/watch?v=SfTfRPAR50c&lc=UgyKwi2AuIPoNnV36HF4AaABAg",["D",1747570614010],["D",1747570614010],{"_24":354,"_256":359,"_258":360,"_69":361,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":362,"_26":363,"_30":-5,"_269":23,"_252":364,"_242":365},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=f6864beba5d190e46a3967c209870dcf1d7ca8700ae6452002ae77a5ffcf01a1&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":367,"_51":368,"_277":369,"_279":370,"_281":371,"_283":247,"_284":23,"_252":372,"_242":373,"_287":374},"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":370,"_256":375,"_258":376,"_69":377,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":378,"_26":379,"_30":-5,"_269":23,"_252":380,"_242":381},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=e09899fb32ca4fd876e524f44b939c9888ddfc6a10cd37279c28ff5b3c5121c8&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":383,"_51":384,"_277":385,"_279":386,"_281":387,"_283":247,"_284":23,"_252":388,"_242":389,"_287":390},"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":386,"_256":391,"_258":392,"_69":393,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":394,"_26":395,"_30":-5,"_269":23,"_252":396,"_242":397},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=3e0efea0e579ce9f671e3d23d083e1b08cbec2df79ebf80ccaf321e7c216c566&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":399,"_51":400,"_277":401,"_279":402,"_281":403,"_283":247,"_284":23,"_252":404,"_242":405,"_287":406},"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":402,"_256":407,"_258":408,"_69":409,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":410,"_26":411,"_30":-5,"_269":23,"_252":412,"_242":413},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=f6583536a3c5bb4c31a2ca4e725772973c691c3edbd91c0f5a8588fa70da0814&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":415,"_51":416,"_277":417,"_279":418,"_281":419,"_283":247,"_284":23,"_252":420,"_242":421,"_287":422},"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":418,"_256":423,"_258":424,"_69":425,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":426,"_26":427,"_30":-5,"_269":23,"_252":428,"_242":429},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=a7c944eb73a63daae0b9b136fc809221099f54ded76de02c0fc43b13be39a26f&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":431,"_51":432,"_277":433,"_279":434,"_281":435,"_283":247,"_284":23,"_252":436,"_242":437,"_287":438},"cmatmf72r000t96a280ipf7bo","Bruno Firnadch","Franchement bravo","cmatmf70o000r96a2rilar5o8","https://www.youtube.com/watch?v=c7nLBwfg_K8&lc=UgytYWaYlHNc3WsHj3l4AaABAg",["D",1747570613139],["D",1747570613139],{"_24":434,"_256":439,"_258":440,"_69":441,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":442,"_26":443,"_30":-5,"_269":23,"_252":444,"_242":445},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=a3d6c51d8646504ddc57d32898f64ce99c7a7de7207df89f06f009b96d005118&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":447,"_51":448,"_277":449,"_279":450,"_281":451,"_283":247,"_284":23,"_252":452,"_242":453,"_287":454},"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":450,"_256":455,"_258":456,"_69":457,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":458,"_26":459,"_30":-5,"_269":23,"_252":460,"_242":461},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=bbd5b8cf9a5a34aa71c966f7883801d94b5bbfdb67d88d32b043cda2c9bdd549&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":463,"_51":464,"_277":465,"_279":466,"_281":467,"_283":247,"_284":23,"_252":468,"_242":469,"_287":470},"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":466,"_256":471,"_258":472,"_69":473,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":474,"_26":475,"_30":-5,"_269":23,"_252":476,"_242":477},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=9796e20618b00030bbfab2bb71fee2a069f562800ce3132fe3fc1c4072e9f915&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":479,"_51":480,"_277":481,"_279":482,"_281":483,"_283":247,"_284":23,"_252":484,"_242":485,"_287":486},"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":482,"_256":487,"_258":488,"_69":489,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":490,"_26":491,"_30":-5,"_269":23,"_252":492,"_242":493},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=a62a61e35669739cbb26b7fbf6554a75aacd0fba56a45519ce55cb792b173866&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":495,"_51":496,"_277":497,"_279":-5,"_281":498,"_283":247,"_284":23,"_252":499,"_242":500,"_287":-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":502,"_51":503,"_277":504,"_279":505,"_281":506,"_283":247,"_284":23,"_252":507,"_242":508,"_287":509},"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":505,"_256":510,"_258":511,"_69":512,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":513,"_26":514,"_30":-5,"_269":23,"_252":515,"_242":516},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=9b5d1160c642ed94b52e25b7a7a6995367eb2284c32b892a5ad1d368b556cf85&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":518,"_51":519,"_277":520,"_279":521,"_281":522,"_283":247,"_284":23,"_252":523,"_242":524,"_287":525},"cmatmf67i000b96a28pylr8op","Mohamed Lamine","Hello, good tuto!","cmatmf62b000996a2clyegzo5","https://www.youtube.com/watch?v=tJt2MoT_BpU&lc=UgwRkA6YrmAGLiwCcgp4AaABAg",["D",1747570612015],["D",1747570612015],{"_24":521,"_256":526,"_258":527,"_69":528,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":529,"_26":530,"_30":-5,"_269":23,"_252":531,"_242":532},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=ade02d8cc353169559672a61508fe4df4f3dbb1b37ad179345bd106d260573df&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":534,"_51":535,"_277":536,"_279":537,"_281":538,"_283":247,"_284":23,"_252":539,"_242":540,"_287":541},"cmatmf5qr000896a2b32wvtly","Gustave","C’est mortel, GG !","cmatmf5j8000696a2utistl4a","https://www.youtube.com/watch?v=tJt2MoT_BpU&lc=UgwJvd-eeUWLSj5XGtR4AaABAg",["D",1747570611411],["D",1747570611411],{"_24":537,"_256":542,"_258":543,"_69":544,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":545,"_26":546,"_30":-5,"_269":23,"_252":547,"_242":548},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=78dfd8aba48abf56c21c3c497969360f5ebe2ab70f423aae8eafe903a8fabe8b&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":550,"_51":496,"_277":497,"_279":551,"_281":498,"_283":247,"_284":23,"_252":552,"_242":553,"_287":554},"cmatmf5d1000596a2kowp6q9g","cmatmf58y000396a2n79f3ujy",["D",1747570610917],["D",1747570610917],{"_24":551,"_256":555,"_258":556,"_69":557,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":558,"_26":559,"_30":-5,"_269":23,"_252":560,"_242":561},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=a084ecdc84e0b885e8283cf0fa66c6a8b49b1b987f7e10f58ccb24fd6861b2c1&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":563,"_51":564,"_277":565,"_279":566,"_281":567,"_283":247,"_284":23,"_252":568,"_242":569,"_287":570},"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":566,"_256":571,"_258":572,"_69":573,"_261":262,"_263":292,"_265":241,"_73":345,"_75":345,"_71":574,"_26":575,"_30":-5,"_269":23,"_252":576,"_242":577},"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%2F20250520%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250520T195757Z&X-Amz-Expires=3600&X-Amz-Signature=9ab8be01cdbb3a8b9f9a05aa4dd2103be0debb4c8e4a8fd98ee412befd0c976b&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",[580,608,655],{"_581":-5,"_252":582,"_28":583,"_26":584,"_30":585,"_242":586,"_587":-5,"_244":245,"_588":589},"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",[590,600],{"_28":591,"_26":592,"_593":6,"_30":594,"_252":595,"_242":596,"_34":597,"_587":-5,"_244":245,"_53":598},"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)",{"_599":241},"quizzQuestions",{"_28":601,"_26":602,"_593":6,"_30":603,"_252":604,"_242":605,"_34":606,"_587":-5,"_244":245,"_53":607},"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 ! ",{"_599":241},{"_581":-5,"_252":609,"_28":610,"_26":611,"_30":612,"_242":613,"_587":-5,"_244":245,"_588":614},["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],[615,623,631,639,647],{"_28":616,"_26":617,"_593":23,"_30":618,"_252":619,"_242":620,"_34":621,"_587":-5,"_244":245,"_53":622},"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.",{"_599":241},{"_28":624,"_26":625,"_593":6,"_30":626,"_252":627,"_242":628,"_34":629,"_587":-5,"_244":245,"_53":630},"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.",{"_599":241},{"_28":632,"_26":633,"_593":6,"_30":634,"_252":635,"_242":636,"_34":637,"_587":-5,"_244":245,"_53":638},"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.",{"_599":241},{"_28":640,"_26":641,"_593":23,"_30":642,"_252":643,"_242":644,"_34":645,"_587":-5,"_244":245,"_53":646},"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.",{"_599":241},{"_28":648,"_26":649,"_593":6,"_30":650,"_252":651,"_242":652,"_34":653,"_587":-5,"_244":245,"_53":654},"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`.",{"_599":241},{"_581":-5,"_252":656,"_28":657,"_26":658,"_30":659,"_242":660,"_587":-5,"_244":245,"_588":661},["D",1740949553711],"configuration-du-projet","Configuration du projet","Dans ce module, nous allons configurer toutes les parties de notre monorepo.",["D",1742663853536],[662,670,678,686,694,702,710,718,726],{"_28":663,"_26":664,"_593":23,"_30":665,"_252":666,"_242":667,"_34":668,"_587":-5,"_244":245,"_53":669},"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",{"_599":241},{"_28":671,"_26":672,"_593":23,"_30":673,"_252":674,"_242":675,"_34":676,"_587":-5,"_244":245,"_53":677},"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",{"_599":241},{"_28":679,"_26":680,"_593":23,"_30":681,"_252":682,"_242":683,"_34":684,"_587":-5,"_244":245,"_53":685},"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",{"_599":241},{"_28":687,"_26":688,"_593":23,"_30":689,"_252":690,"_242":691,"_34":692,"_587":-5,"_244":245,"_53":693},"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",{"_599":241},{"_28":695,"_26":696,"_593":23,"_30":697,"_252":698,"_242":699,"_34":700,"_587":-5,"_244":245,"_53":701},"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",{"_599":241},{"_28":703,"_26":704,"_593":23,"_30":705,"_252":706,"_242":707,"_34":708,"_587":-5,"_244":245,"_53":709},"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)",{"_599":241},{"_28":711,"_26":712,"_593":23,"_30":713,"_252":714,"_242":715,"_34":716,"_587":-5,"_244":245,"_53":717},"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.",{"_599":241},{"_28":719,"_26":720,"_593":23,"_30":721,"_252":722,"_242":723,"_34":724,"_587":-5,"_244":245,"_53":725},"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",{"_599":241},{"_28":727,"_26":728,"_593":6,"_30":729,"_252":730,"_242":731,"_34":732,"_587":-5,"_244":245,"_53":733},"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)",{"_599":241},"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":738,"_61":123,"_63":739,"_65":740},"1 min read",30300,101,"headers",[743],{"_744":745,"_59":746,"_747":748},"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":768,"_30":585,"_769":241,"_581":-5,"_28":583,"_770":-5,"_244":245,"_242":771,"_26":584,"_772":773,"_588":777,"_741":782,"_736":783,"_734":786,"_587":-5,"_787":788,"_789":583,"_763":198,"_761":762},"cm7s4ewbs000196c1i0w4k1l9","order","startTime",["D",1742663835063],"course",{"_250":251,"_774":6,"_36":-5,"_67":775},"globalYoutubeVideo",{"_69":776},"https://algomax-public.s3.amazonaws.com/6f4fa9e9-3f81-49fc-b42a-321a6d07dbeb.png",[778,780],{"_587":-5,"_24":779,"_26":592,"_28":591,"_30":594,"_593":6,"_244":245},"cm7s4ewhy000296c1o4n8t8bb",{"_587":-5,"_24":781,"_26":602,"_28":601,"_30":603,"_593":6,"_244":245},"cm7s4ewp9000396c1j6agrf6i",[],{"_59":738,"_61":123,"_63":784,"_65":785},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"]