- 28
- 41 091
Algomax
France
Приєднався 29 січ 2024
Bienvenue sur la chaîne UA-cam d'Algomax.
Vous trouverez principalement du contenu sur les framework Remix, NestJS et le CMS Strapi.
Nous sommes spécialisés dans la conception et le développement d'applications web et mobile sur mesure.
Besoin d'un site sur-mesure ? Consultez notre site internet et contactez-nous !
Mail: contact@algomax.fr
Vous trouverez principalement du contenu sur les framework Remix, NestJS et le CMS Strapi.
Nous sommes spécialisés dans la conception et le développement d'applications web et mobile sur mesure.
Besoin d'un site sur-mesure ? Consultez notre site internet et contactez-nous !
Mail: contact@algomax.fr
5 middlewares indispensables pour React Router 7!
Depuis la migration de mes applications vers React Router 7, j'ai retiré le framework NestJS de ma stack.
Son remplaçant ? HonoJS. @rphlmr propose la librairie React Router Hono Server, permettant de remplacer le serveur de base de React Router (anciennement@Remix-Run) par un serveur HonoJS auto-généré.
Dans notre cas, on rajoute plusieurs middleware pour améliorer la logique serveur !
Au programme :
- Middleware de redirection des anciennes routes
- Middleware pour retirer le / à la fin des routes (Google Search Console)
- Middleware de logs (amélioration des logs par défaut)
- Middleware pour le blog
- Middleware de compression des requêtes (optimisation)
Documentation officielle : reactrouter.com/home
Guide de migration Remix : reactrouter.com/upgrading/remix
React Router Hono Server : github.com/rphlmr/react-router-hono-server
HonoJS : hono.dev
--- Deals
-10% sur l'abonnement mensuel Strapi Cloud avec le code ALGOMAX : dub.sh/strapi-deal
-10% aux VPS Hostinger (lien affilié) : www.hostinger.fr/algomax (12 mois d'engagement min) ou avec le code ALGOMAX
00:00 Introduction
00:25 Présentation
04:25 Démonstration
06:27 Middleware de logs
09:43 Middleware de compression des requêtes
10:07 Middleware qui retire le / à la fin des URL
11:57 Middleware de redirections des vieilles routes (pour le SEO)
14:08 Middleware pour le blog
--- Formation Remix & NestJS
Support écrit : algomax.fr/formations/developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo
Partie 1 : ua-cam.com/video/yv96ar6XNnU/v-deo.html
Partie 2 : ua-cam.com/video/KCMFcHTYf9o/v-deo.html
Partie 3 : ua-cam.com/video/GWfZewdFx4o/v-deo.html
Partie 4 : ua-cam.com/video/SyuXRIbECEY/v-deo.html
Partie 5 : ua-cam.com/video/k6KrmuVgvec/v-deo.html
Partie 6 : ua-cam.com/video/0C4Xh1x7flY/v-deo.html
--- Autres contenus
Déploie tes projets Javascript sur un VPS ua-cam.com/video/SfTfRPAR50c/v-deo.html
Développe 2X plus vite avec cette stack Remix ua-cam.com/video/yv96ar6XNnU/v-deo.html
BiomeJS, l'outil qui optimise ton code ua-cam.com/video/Ln3rpyhVpZs/v-deo.html
--- Contenu Remix
Comment héberger des fichiers avec Remix ? ua-cam.com/video/c7nLBwfg_K8/v-deo.html
Comment valider un formulaire full-typesafe ? ua-cam.com/video/_-ZOGj80TMw/v-deo.html
Comment fonctionne le routing ? ua-cam.com/video/TOMMXhgUQfI/v-deo.html
Cette stack utilise les technologies suivantes :
- Remix remix.run
- React react.dev
- NestJS nestjs.com
- Turborepo turbo.build
- TailwindCSS tailwindcss.com
- ShadcnUI ui.shadcn.com
- Prisma ORM www.prisma.io/?via=algomax
- Typescript www.typescriptlang.org
- Github Actions github.com/features/actions
- VPS Hostinger hostinger.com/algomax
Contenus exclusifs : algomax.fr
Newsletter : algomax.fr/newsletter
--- Nos réseaux
Twitter : link.algomax.fr/twitter
LinkedIn : link.algomax.fr/linkedin
UA-cam : link.algomax.fr/youtube
Instagram : link.algomax.fr/insta
Facebook : link.algomax.fr/fb
Son remplaçant ? HonoJS. @rphlmr propose la librairie React Router Hono Server, permettant de remplacer le serveur de base de React Router (anciennement@Remix-Run) par un serveur HonoJS auto-généré.
Dans notre cas, on rajoute plusieurs middleware pour améliorer la logique serveur !
Au programme :
- Middleware de redirection des anciennes routes
- Middleware pour retirer le / à la fin des routes (Google Search Console)
- Middleware de logs (amélioration des logs par défaut)
- Middleware pour le blog
- Middleware de compression des requêtes (optimisation)
Documentation officielle : reactrouter.com/home
Guide de migration Remix : reactrouter.com/upgrading/remix
React Router Hono Server : github.com/rphlmr/react-router-hono-server
HonoJS : hono.dev
--- Deals
-10% sur l'abonnement mensuel Strapi Cloud avec le code ALGOMAX : dub.sh/strapi-deal
-10% aux VPS Hostinger (lien affilié) : www.hostinger.fr/algomax (12 mois d'engagement min) ou avec le code ALGOMAX
00:00 Introduction
00:25 Présentation
04:25 Démonstration
06:27 Middleware de logs
09:43 Middleware de compression des requêtes
10:07 Middleware qui retire le / à la fin des URL
11:57 Middleware de redirections des vieilles routes (pour le SEO)
14:08 Middleware pour le blog
--- Formation Remix & NestJS
Support écrit : algomax.fr/formations/developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo
Partie 1 : ua-cam.com/video/yv96ar6XNnU/v-deo.html
Partie 2 : ua-cam.com/video/KCMFcHTYf9o/v-deo.html
Partie 3 : ua-cam.com/video/GWfZewdFx4o/v-deo.html
Partie 4 : ua-cam.com/video/SyuXRIbECEY/v-deo.html
Partie 5 : ua-cam.com/video/k6KrmuVgvec/v-deo.html
Partie 6 : ua-cam.com/video/0C4Xh1x7flY/v-deo.html
--- Autres contenus
Déploie tes projets Javascript sur un VPS ua-cam.com/video/SfTfRPAR50c/v-deo.html
Développe 2X plus vite avec cette stack Remix ua-cam.com/video/yv96ar6XNnU/v-deo.html
BiomeJS, l'outil qui optimise ton code ua-cam.com/video/Ln3rpyhVpZs/v-deo.html
--- Contenu Remix
Comment héberger des fichiers avec Remix ? ua-cam.com/video/c7nLBwfg_K8/v-deo.html
Comment valider un formulaire full-typesafe ? ua-cam.com/video/_-ZOGj80TMw/v-deo.html
Comment fonctionne le routing ? ua-cam.com/video/TOMMXhgUQfI/v-deo.html
Cette stack utilise les technologies suivantes :
- Remix remix.run
- React react.dev
- NestJS nestjs.com
- Turborepo turbo.build
- TailwindCSS tailwindcss.com
- ShadcnUI ui.shadcn.com
- Prisma ORM www.prisma.io/?via=algomax
- Typescript www.typescriptlang.org
- Github Actions github.com/features/actions
- VPS Hostinger hostinger.com/algomax
Contenus exclusifs : algomax.fr
Newsletter : algomax.fr/newsletter
--- Nos réseaux
Twitter : link.algomax.fr/twitter
LinkedIn : link.algomax.fr/linkedin
UA-cam : link.algomax.fr/youtube
Instagram : link.algomax.fr/insta
Facebook : link.algomax.fr/fb
Переглядів: 155
Відео
Migre ton app Remix vers React Router 7 !
Переглядів 210Місяць тому
React Router 7 est la nouvelle version du framework @Remix-Run . À partir de maintenant et jusqu'à nouvel ordre, la librairie @Remix-Run ne sera plus maintenue, en faveur de React Router. Découvre comment mettre ton projet à jour dans cette vidéo. Qu'as-tu à gagner ? Beaucoup de nouvelles fonctionnalités : routes typées, RSCs, streaming et optimisations diverses... Nous attendons l'arrivée de R...
React Router 7 - LES NOUVEAUTÉS à ne pas manquer !
Переглядів 462Місяць тому
React Router 7 vient de sortir !! C'est la version 3 du framework @Remix-Run, et cette version majeure apporte beaucoup de nouveautés attendues. Nouveau système de routing, routes typées, RSCs, streaming et optimisations ... L'arrivée imminente de React 19, et de Vite 6 nous permettra de proposer une expérience d'exception à nos utilisateurs, rivalisant le framework NextJS ! Documentation offic...
Strapi 5 : Guide Complet 2024 | On développe un site e-commerce avec Remix, Strapi, Stripe
Переглядів 2,8 тис.3 місяці тому
Résumé Dans cette formation, nous allons mettre en place un site e-commerce avec les technologies @Remix-Run, @Strapi et @stripe . Nous développons ce projet pour présenter les capacités de Strapi 5, qui est un puissant serveur API, simple à configurer et simple d'utilisation. Il peut être utilisé par tout profil, développeur comme non développeur, pour éditer les données d'une base de données....
Comment héberger un fichier sur AWS S3 ? Formation Remix NestJS 2024
Переглядів 2185 місяців тому
Dans cette vidéo, nous allons intégrer le SDK d'AWS S3. Il nous permet d'héberger tout type de fichier dans des buckets, publics ou privés. Nous autorisons ensuite l'utilisateur à accéder au document (dans notre cas, une image). Nous développons également la logique pour mettre à jour et supprimer l'image. Profitez de -10% aux VPS Hostinger grâce à notre lien affilié : www.hostinger.fr/algomax ...
Développe ton premier projet fullstack avec NestJS, Typescript, Remix, Docker Formation NestJS 2024
Переглядів 11 тис.5 місяців тому
Profitez de -10% aux VPS Hostinger grâce à notre lien affilié : www.hostinger.fr/algomax (12 mois d'engagement min) ou utilisez le code promo ALGOMAX NestJS est un puissant framework de NodeJS pour développer des serveurs API. Je vais t'apprendre tout ce que je sais faire avec, notamment : - Authentification - Communication temps réel (socket.io) - Héberger des fichiers (AWS S3) - Utiliser Stri...
Comment héberger une application NestJS ? Formation Typescript, Remix, Github Actions, Docker
Переглядів 8376 місяців тому
Profitez de -10% aux VPS Hostinger grâce à notre lien affilié : www.hostinger.fr/algomax (12 mois d'engagement min) ou utilisez le code promo ALGOMAX Dans cette vidéo, nous allons héberger notre projet NestJS et Remix (playlist complète ua-cam.com/play/PLOyaGE5M4B0gMbZTSS2IsJ-1F5rwMjKnF.html). Pour ce faire, nous avons besoin de configurer @DockerInc en utilisant Docker Compose et Docker Hub. N...
Comment optimiser ton site en 1 ligne (Remix v2.10)
Переглядів 6706 місяців тому
React 19 sort bientôt, avec l'arrivée des React Server Components (RSC). L'équipe @Remix-Run travaille dur pour nous offrir la meilleure migration possible. Cette version change donne et nous permettre d'offrir une meilleure expérience à nos utilisateurs. Ils ont tout de même réussi à sortir la version 2.10 du framework Remix, qui apporte une fonctionnalité intéressante : Fog of War. Cette fonc...
Ce concept TypeScript méconnu va améliorer ton code !
Переглядів 6246 місяців тому
J'ai récemment découvert ce pattern qui m'a permis d'améliorer la qualité et lisibilité de mon code. Il est très utile si tu utilises Typescript, notamment pour les routes POST avec plusieurs actions (éditer, créer, supprimer une donnée ...). Ça s'appelle le Discriminated Union Type : Tu définis plusieurs types, ou plusieurs schémas Zod pour valider ta donnée. L'objet possède plusieurs propriét...
On développe une app d'échanges de services | Formation Remix NestJS 2024
Переглядів 5917 місяців тому
Profitez de -10% aux VPS Hostinger grâce à notre lien affilié : www.hostinger.fr/algomax (12 mois d'engagement min) ou utilisez le code promo ALGOMAX Dans les premières parties de ce tutoriel, nous avons configuré un monorepo avec les technologies @Remix-Run (remix.js) et NestJS pour notre frontend et notre backend. Découvrez la première vidéo ici ua-cam.com/video/yv96ar6XNnU/v-deo.html Dans ce...
Ce qu'il ne faut pas manquer sur React 19 (React Conf 2024)
Переглядів 4,8 тис.7 місяців тому
Beaucoup d'annonces ont été faites lors de la conférence React Conf 2024 (qui s'est déroulée le 16 et 17 mai 2024). Notamment la sortie imminente de la librairie React 19 et du compilateur 'React Compiler' (initiallement nommé React Forget). Mais d'autres annonces surprises ont été faites lors des présentations, notamment celle de @Remix-Run et de Expo (React Native). 00:00 React 19 07:13 React...
Cette annonce React est ... inattendue ? (React Conf 2024)
Переглядів 3,3 тис.8 місяців тому
Remix nous annonce enfin la sortie imminente des React Server Components, lors de la présentation de @ryanflorance4546 à la @ReactConfOfficial 2024. C'est une fonctionnalité attendue par beaucoup de développeurs, car elle offre une optimisation du code non négligable. Mais c'est pas tout à fait l'annonce à laquelle on s'attendait. Ils nous parlent notamment de leur première librairie, React Rou...
Comment gérer les erreurs avec Remix ?
Переглядів 1428 місяців тому
Avoir des erreurs Javascript ne fait jamais plaisir. Surtout quand elles sont en prod, et que tes clients les découvrent. Tu perds de la crédibilité. Pour sauver l'honneur, il existe un composant magique nommé ErrorBoundary. (similaire à la librairie React, tu peux l'utiliser peu importe le framework) Dans ce guide, je vais te montrer comment tu peux afficher un composant d'erreur personnalisé ...
Authentification par token avec Docker, Redis, Express Session | Formation Remix NestJS 2024
Переглядів 3248 місяців тому
Authentification par token avec Docker, Redis, Express Session | Formation Remix NestJS 2024
Authentification avec Redis, express-session, Passport | Formation Remix NestJS 2024
Переглядів 6679 місяців тому
Authentification avec Redis, express-session, Passport | Formation Remix NestJS 2024
On intègre le design system ! Figma, Tailwind CSS & Shadcn UI | Formation Remix NestJS 2024
Переглядів 8079 місяців тому
On intègre le design system ! Figma, Tailwind CSS & Shadcn UI | Formation Remix NestJS 2024
Déploie un monorepo Remix ! CI CD, Github Actions, Docker | Formation Remix NestJS 2024
Переглядів 9359 місяців тому
Déploie un monorepo Remix ! CI CD, Github Actions, Docker | Formation Remix NestJS 2024
Cet outil AMÉLIORE la qualité de ton code ! (adieu Eslint )
Переглядів 1,9 тис.9 місяців тому
Cet outil AMÉLIORE la qualité de ton code ! (adieu Eslint )
Développe 2X plus VITE ! Remix, NestJS, Typescript, Turborepo | Formation Remix NestJS 2024
Переглядів 3,9 тис.9 місяців тому
Développe 2X plus VITE ! Remix, NestJS, Typescript, Turborepo | Formation Remix NestJS 2024
Ces 6 nouveautés vont te plaire ! Tailwind v4, Million Lint, Payload CMS, Tanstack, Remix ...
Переглядів 95410 місяців тому
Ces 6 nouveautés vont te plaire ! Tailwind v4, Million Lint, Payload CMS, Tanstack, Remix ...
Génère la transcription de tes vidéos grâce à l'IA | SEO Optimisé ? Deepgram
Переглядів 22210 місяців тому
Génère la transcription de tes vidéos grâce à l'IA | SEO Optimisé ? Deepgram
Comment héberger tes projets JAVASCRIPT sur un serveur VPS | Docker, CI / CD, Github Actions, Caddy
Переглядів 2,4 тис.10 місяців тому
Comment héberger tes projets JAVASCRIPT sur un serveur VPS | Docker, CI / CD, Github Actions, Caddy
Comment héberger des fichiers avec Remix | Guide
Переглядів 32310 місяців тому
Comment héberger des fichiers avec Remix | Guide
Valide ton formulaire avec Remix, Zod et Conform (full-typesafe)
Переглядів 45911 місяців тому
Valide ton formulaire avec Remix, Zod et Conform (full-typesafe)
Gère des PAIEMENTS en JAVASCRIPT avec STRIPE.JS - Tutoriel NestJS
Переглядів 77511 місяців тому
Gère des PAIEMENTS en JAVASCRIPT avec STRIPE.JS - Tutoriel NestJS
Routing avec le framework Remix : Guide complet
Переглядів 70111 місяців тому
Routing avec le framework Remix : Guide complet
Salut bonne vidéo mais il y a un décalage entre la voix et image
Bonjour, merci pour ton commentaire ! Désolé pour le désagrément, on évite ce bug pour les prochaines vidéos :)
J'ai pas compris le problème avec express (mis à part la performance bien-sûr). Des middlewares comme tu en as écrit ça se fait très bien avec express
Express n'a aucun problème. Il fête ses 16 ans et répond à tous les problèmes. Mais il existe des alternatives plus performantes, proposant plus de fonctionnalités modernes qui n'étaient pas abouties il y a 16 ans.
J'ai beaucoup apprécié la formation, elle est claire, captivante et agréable à suivre ! ❤
Merci beaucoup pour ce précieux retour, Fouad !
Super ! Une série de vidéo sur React Router v7 et Hono ?
Très bonne idée !
Merci pour cette approche. conseilles-tu l'usage de Hono dans le cadre d'un monorepo ou bien la solution te parait mature pour une API comme NEST ? merci à toi :) super video comme d'hab ?
Salut ! Dans le cadre d'un monorepo avec Remix, ou comme une API standalone, je pense qu'Hono possède très bien sa place. Il est stable depuis plusieurs années et moderne. C'est un framework backend complet, au même titre qu'Express et Fastify. Il possède plein de features " built-in ", et a été conçu en Typescript pour offrir une API simple d'utilisation et qui " makes sense ". Je ne l'ai pas utilisée pour plus que le use-case de la vidéo. Mais j'envisage absolument de l'utiliser pour un serveur standalone dans le futur !
🔥
💯
Et encore un énorme merci !
Merci pour ton com Néphélim !
Tres bien!
Merci Souhail !
nice l content 🎉❤ keep it up ❤
Thank you man !
Merci pour cette vidéo ! peut-être que tu aurais pu préciser que le typage des routes avec "./+types/..." est possible grâce à la propriété "rootDirs" du "tsconfig", au début je ne comprenais pas d'où venait cette magie. je suis comme toi, hyper enthousiaste avec cette nouvelle version. par contre je suis un peu troublé par leur doc qui n'est pas encore complète, du coup on est obligé de naviguer entre la doc de remix et celle de react router. bonne soirée
Merci pour ce commentaire pertinent !
Après RR7 la vidéo de la communauté remix paris !!!! Merci a bientôt
Plait-il ? Aucune vidéo de remix Paris de prévu malheureusement j’ai rien filmé 🥺
@algomax-dev c'est toi la communauté remix a paris, tu nous représente sur youtube 😛
Awesome! You should add english subtitles!
You’re right brother ! Thank you for the comment
Je te découvre aujourd'hui, c'est honteux d'avoir si peu de vu pour un si bon contenu ! Hâte de parcourir toutes les vidéos de ta chaîne
Merci beaucoup pour ce magnifique commentaire ! À très vite !
Il faut faire pareil avec GRAPH QL por favor ! 😊
La musique de WoW en fond 😙 Super tuto, merci !
Super contenu! Bravo !
Merci beaucoup!
C'est très bien expliqué, avec plein de détails sur le pourquoi du comment. Bravo !
Très intéressant ! Juste pour savoir, pourquoi être partis sur un monorepo plutôt qu'un monolith nestJS ? Quel est ton avis sur la construction d'un backend nestJS avec graphQL par exemple dans le cadre de ta stack ? Prisma propose il me semble un typage "automatique" donc pourquoi être partis sur Zod en plus pour la validation côté frontend ? Merci d'avance !
Salut, merci beaucoup pour ton commentaire. Pourquoi un monorepo ? C'est bien pour partager des composants ou des schémas Zod, si dans le futur je souhaite développer une app mobile par exemple. Je pense que GraphQL est une bonne techno, actuellement je ne l'utilise pas. Je préfère selectionner directement les valeurs dans Prisma, côté serveur. Est-ce qu'on utilise déjà Zod dans cette vidéo pour valider les types côté client (je m'en souviens plus) ? J'utilise Zod uniquement si nécessaire, pour valider les formulaires côté client / serveur, ou pour parser les données d'une API externe qui ne propose pas de SDK en typescript.
Très beau tuto, j'avais hate de l'apprendre merci bcp, juste un conseil pour la prochain fois va moin vite stp 😁
Merci pour ce retour !!
Mettez la vidéo en x0.75 si ça va trop vite 😁
Je ne commente jamais mais la vraiment merci pour ce tuto ! et chapeau d'avoir eu le courage de faire du montage sur une video de casi 9h !! 😅
Merci à toi !
pourquoi ne pas tout faire avec Remix finalement ?
Ça prendrait plus de temps de setup la base de donnée et de coder chaque chaque route CRUD. Avec Strapi tu peux déléguer la partie contenue à ton équipe !
Tu viens de me sauver la vie ❤️🔥
Avec plaisir!
Impressionnant ! 😮 Merci beaucoup Virgile pour la création de cette vidéo ultra complète ! 🤩
Merci Pierre pour la création de ce headless CMS ultra complet !
Merciii
🔥
Trop bien la vidéo ! :)
Merci Johan !
This is awesome. Looking forwards going through the tutorial.
@@CodingAfterThirty thank you Paul, means a lot !
Toujours au top
@@BrunoFirnadch merci !
merci pour votre éfort j'ai juste une question ? peut on remplacer remix par next c mon freamwork préferer ??
Absolument ! C'est tout pareil avec NextJS !
@@algomax-dev Merci beaucoup bon continuation ❤️❤️❤️
ça marche également si on remplacel e remix par nextjs?
Non. Il y a d'autres moyens d'implémenter NestJS directement avec NextJS, cependant dans cette vidéo nous utilisons l'adapteur Node de Remix, directement dans NestJS. Je ne sais pas si NextJS propose un adapteur NodeJS ...
pourquoi tu n'utilises pas react hook form pour valider l'état du formulaire ? car c'est vraiment plus utilisé que conform et donc maintenu et bien plus efficace pour le reste de ton application non ? en tt cas merci. tu ferai du next et du react native coté front tu aurai une enorme commu avec le temps. t'es bon généreux et t'as pédagogie est exceptionnel
Conform est maintenu et efficace, il répond à mon besoin mais pourquoi pas rester RHF. Merci pour ton commentaire, ça fait plaisir !
Au top ! Même concept avec le fameux GraphQL ? Couplé à Prisma
Je n'ai pas testé GraphQL :)
Au top ta vidéo ! Très pédagogue ! Même concept mais en ajoutant le fameux GraphQL couplé à Prisma et NestJS ??
Merci pour le commentaire!
super quali vraiment bravo. par contre tu carbures au café tu parle grave vite et tu change vite de page sur le vsc c'est chaud a suivre mais a part ça explication très clair et c'est pas donnée a tout le monde. dommage que c'est pas du graphql tu aurai fait de moi un heureux complet
Merci pour ton commentaire ! Tu aurais voulu du graphQL pour appeler l'API côté front ?
@@algomax-dev sa serai top aucun contenu Frenchy correct sur graphql et son fonctionnement dans nestjs mais je vais pas te demander cette surcharge de travail je vais m’adapter à ce que tu fais en rest et le transformer. Mais top t’es vidéos 💪
Superbe tuto
@@TheGetbackers007 merci !
TOP!! merci pour le tuto et les explications profondes !! je vais suivre les mêmes étapes sauf que je vais tester avec Jenkins dans le but de rencontrer d'autres erreurs
Merci pour le commentaire !
2:02 salut pourquoi et que signifie ce T⚠️? avec fond rouge ? Merci de ta réponse et pour l'effort explicative de la vidéo.
@@EiranAtaraxia c’est une erreur au montage de Final Cut Pro à l’emplacement d’un zoom 😅 Je n’avais pas remarqué, merci !
Ayant déjà fait pas mal de dev sur Fastify et Hono, ce walkthrough avec NestJS est vraiment pas mal 🎉
Merci !
franchement je te remercie infiniment pour cette formation
Je te remercie infiniment pour ton commentaire !
Je ne suis plus tres "nest", j'ai plutôt basculé sur Adonis. Mais bien utile quand même ton tuto S3 SDKV3. Cool!
Merci mec ! Qu’est-ce qui t’a fait choisir Adonis au lieu de NestJS ?
@@algomax-dev Je les ai tous pratiqués en 5/6 ans (express, nest, adonis, et d'autres). Mon choix Adonis pour faire simple : une DX (Dev Xperience) vraiment au dessus (c'est mon avis). Pour aller + loin, mes 3 raisons principales : 1/ Nest (de mon point de vue) est bien trop verbeux et les anotations finalement inutiles et lourdes (pourtant je suis full Angular côté front depuis 2016 ) 2/ Adonis est ultra type safe dans tous les sens en restant léger dans la syntaxe grace à ses libs, par exemple pour le type checking des POST httpRequest, bien plus light et puissant je trouve, ou encore l'ORM qui est type Safe de bout en bout sans rajouter du code à part lier nos modeles à la DB 3/ Adonis embarque directement toutes les fonctionnalités et libs utiles pour bootstraper une app typée "startup" (c'est le "Laravel" du NodeJS 😀), ces libs fonctionnent parfaitement ensemble en symbiose y compris quand elles évoluent, la team Adonis veille :) (lib d'authentication/authorization prête à l'emploi token based, security, rate limit api, orm DB Lucid, SSE (Server Sent Event), WebSocket, etc. J'aime développer et aller "vite" tout en restant quali. Adonis match avec mon besoin. Apres on a tous nos preferences :) Le mieux est de prendre une app simple mais suffisamment pertinente (fonctionnalité login, remember password, le type checking sur des methodes POST, etc, rajouter une DB, de la sécu, des tests, et faire par soi-même pour comparer. Perso, je me sens bien plus productif sur Adonis, tout en restant tres souple sur mon architecture à la demande, pour une sortie typeSafe de bout en bout. Nest j'ai aimé longtemps parce que c'est "le Angular du back" :) Mais j'en suis revenu. Sur le back je prefère la philosophie Adonis "all-in-one" tres bien pensé, par exemple sur l'authentication... bien + avancée "mais simple à utiliser" (DX ++ :) ) que beaucoup de libs. Une bonne source sur YT et ailleurs en Fr c'est un de membres core team Romain Lanz => github.com/RomainLanz En espérant avoir donné un éclairage :) -------- Sinon pour revenir à ta video sur S3, top, je l'ai implémenté today mais directement sur le front Angular (avec quelques modifs pour ne pas exposer les data sensibles :) ), mais directement depuis le front si besoin (upload, download, ça match). Merci à toi, notemment sur le côté config des droits sur le bucket sur AWS 😀
Merci pour cette vidéo. Dommage pour PlanetScale, pas envie donner mes n° de CB à tous ces services. Y aurait possibilité d'utiliser XAMPP pour MySQL ? Si oui, comment ? Bonne continuation.
@@fabienmacip tu peux utiliser neon.tech gratuitement sans CB. Ce sera du postgresql !
Hello, good tuto! Hmm, j'ai une petite question, je vois que tu as utilisé les presigned url de S3, je voudrais savoir comment tu fais pour gérer l'expiration de l'url utilisé pour download/afficher l'image stockée sur S3?
Bonjour Mohamed, merci pour le commentaire. Pour gérer l'expiration, ce qui est fait actuellement c'est que nous générons une nouvelle Presigned URL à chaque chargement de la page par un utilisateur. Comme l'URL est générée à chaque fois, elle est fraîche et l'utilisateur n'a aucun risque d'appeler une URL expirée. Comment ferais-tu pour optimiser cette logique ?
@@algomax-dev Merci de ton retour! Pour optimiser ta logique, je mettrai peut etre en place un stockage cache coté client et verifier la validité de l'url avant de générer une nouvelle. Car avec ton approche, on peut se retrouver a faire des calls pour générer une URL inutilement (si l'url courante n'est pas expiré autant continuer à l'utiliser meme si la page se charge). Hmmm, dis moi quelle est la durée de validité de l'url? Si celle-ci est short, toujours avec ta logique, je l'augmenterai. Keep in mind que le max c'est 7 jours
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 👍!
@@nearweb8133 ça fait plaisir ! assieds-toi confortablement et profite !
Combien d'années pour avoir ce niveau ?
Bonjour, j'ai 4 années d'expérience mais je pense que tu n'as pas besoin d'autant d'années pour développer une application NestJS et Remix. Je te conseille de pratiquer et de build avec la même techno, plusieurs projets sans regarder de tuto à côté (entraîne ton cerveau à te souvenir de la syntaxe)
Merci pour ton retour mais je reste impressionné par l'aisance que tu as!!
Hello moi je n'ai pas la base de donnée gratuite sur ton appli :( Pourquoi?
Hello ! Malheureusement ils ont retiré le tiers gratuit : il faut passer chez neon.tech La solution se trouve à 5:00:30
@@algomax-dev j’ai utilisé l’alternative avec mysql et wamp ça devrait bien marcher aussi je pense non? Merci :)
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"
Avec tout ça plus d'excuse pour pas savoir faire !
S'il te plait tu gére le refresh token comment avec nest js et react??
@@garius3559 dans cette stack là, il n’y a pas moyen de forcer l’expiration du token. Il a une date d’expiration de une fois expirer, il faut en régénérer un nouveau via le formulaire de login
@@algomax-dev En se reconnectant, c'est bien ça?
@@algomax-dev Je demande parce qu'actuellement, je suis en train d'apprendre nest js et j'essaie de connecter cette API à une application mobile et j'aimerais implémenter le refresh token de telle sorte que l'access token se génère sans besoin de se reconnecter.
@@garius3559 Exact. À chaque connexion, tu appelles ta route NestJS qui génère un nouveau token. Mais les anciens tokens générés pour cet utilisateur ne sont pas expirés. Ils existent encore côté API (donc l'API autorise tout appel signé par ce token). C'est côté front qu'on "oublie" le token (en vidant le cache par exemple) et c'est plus simple de regénérer un token que de retrouver le token oublié. Généralement on ne sauvegarde pas le token en base de données.
@@garius3559 Généralement, le token expire soit parce que : l'utilisateur est resté connecté 30 jours (ou a dépassé la durée d'expiration), soit parce qu'il a cliqué sur " se déconnecter ", soit parce qu'il a vidé le cache, l'asyncStorage, ou la base de donnée locale dans laquelle il avait enregistré ce token de connexion. Pour les deux derniers cas, tu n'as pas moyen de refresh le token : S'il est inaccessible "côté front" ou "côté mobile", tu dois en regénérer un nouveau (en te connectant). Mais avec le premier cas, je pense qu'il y a moyen de récupérer la date d'expiration du token JWT, et de faire une demande de refresh. Par contre dans ce cas là, tu n'appelerais pas la route login avec identifiants / mdp de l'utilisateur (car tu ne le connais pas), mais tu identifierais l'utilisateur toi même grâce au token sauvegardé (côté client). Le client récupère donc son token, regarde si le token expire bientôt. Si oui, il lance une requête sur une route protégée qui prend en entrée le userId, et renvoie un nouveau token. Ensuite, tu vas remplacer le token sauvegardé dans l'asyncStorage. Et ça devrait être bon.
Merci beaucoup pour ce mega contenu ❤❤
C’est mortel, GG ! Tu essaieras AdonisJS et Elysia ?
@@Gustavewpm pourquoi pas !