Algomax
Algomax
  • 28
  • 41 091
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
Переглядів: 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

КОМЕНТАРІ

  • @BrunoFirnadch
    @BrunoFirnadch 17 днів тому

    Salut bonne vidéo mais il y a un décalage entre la voix et image

    • @algomax-dev
      @algomax-dev 15 днів тому

      Bonjour, merci pour ton commentaire ! Désolé pour le désagrément, on évite ce bug pour les prochaines vidéos :)

  • @ApprendreSansNecessite
    @ApprendreSansNecessite Місяць тому

    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

    • @algomax-dev
      @algomax-dev 29 днів тому

      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.

  • @fouad-hachour9968
    @fouad-hachour9968 Місяць тому

    J'ai beaucoup apprécié la formation, elle est claire, captivante et agréable à suivre ! ❤

    • @algomax-dev
      @algomax-dev Місяць тому

      Merci beaucoup pour ce précieux retour, Fouad !

  • @etiennemc2613
    @etiennemc2613 Місяць тому

    Super ! Une série de vidéo sur React Router v7 et Hono ?

  • @youcodeuse
    @youcodeuse Місяць тому

    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 ?

    • @algomax-dev
      @algomax-dev Місяць тому

      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 !

  • @souhailkaoussi6415
    @souhailkaoussi6415 Місяць тому

    🔥

  • @hakimgueye1542
    @hakimgueye1542 Місяць тому

    💯

  • @youcodeuse
    @youcodeuse Місяць тому

    Et encore un énorme merci !

    • @algomax-dev
      @algomax-dev Місяць тому

      Merci pour ton com Néphélim !

  • @souhailkaoussi6415
    @souhailkaoussi6415 Місяць тому

    Tres bien!

  • @abdrahim9307
    @abdrahim9307 Місяць тому

    nice l content 🎉❤ keep it up ❤

  • @soleilfroid2615
    @soleilfroid2615 Місяць тому

    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

    • @algomax-dev
      @algomax-dev Місяць тому

      Merci pour ce commentaire pertinent !

  • @youcodeuse
    @youcodeuse Місяць тому

    Après RR7 la vidéo de la communauté remix paris !!!! Merci a bientôt

    • @algomax-dev
      @algomax-dev Місяць тому

      Plait-il ? Aucune vidéo de remix Paris de prévu malheureusement j’ai rien filmé 🥺

    • @youcodeuse
      @youcodeuse Місяць тому

      @algomax-dev c'est toi la communauté remix a paris, tu nous représente sur youtube 😛

  • @souhailkaoussi6415
    @souhailkaoussi6415 Місяць тому

    Awesome! You should add english subtitles!

    • @algomax-dev
      @algomax-dev Місяць тому

      You’re right brother ! Thank you for the comment

  • @ddjoe_era
    @ddjoe_era Місяць тому

    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

    • @algomax-dev
      @algomax-dev Місяць тому

      Merci beaucoup pour ce magnifique commentaire ! À très vite !

  • @Judor75
    @Judor75 2 місяці тому

    Il faut faire pareil avec GRAPH QL por favor ! 😊

  • @yorinis
    @yorinis 2 місяці тому

    La musique de WoW en fond 😙 Super tuto, merci !

  • @erudicnt
    @erudicnt 2 місяці тому

    Super contenu! Bravo !

  • @cedvano
    @cedvano 2 місяці тому

    C'est très bien expliqué, avec plein de détails sur le pourquoi du comment. Bravo !

  • @MrG-lox
    @MrG-lox 3 місяці тому

    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 !

    • @algomax-dev
      @algomax-dev 3 місяці тому

      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.

  • @mahmoudmoussa9294
    @mahmoudmoussa9294 3 місяці тому

    Très beau tuto, j'avais hate de l'apprendre merci bcp, juste un conseil pour la prochain fois va moin vite stp 😁

    • @algomax-dev
      @algomax-dev 3 місяці тому

      Merci pour ce retour !!

    • @isteveb4551
      @isteveb4551 2 місяці тому

      Mettez la vidéo en x0.75 si ça va trop vite 😁

  • @thibaulasblei8338
    @thibaulasblei8338 3 місяці тому

    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 !! 😅

  • @denisdd5626
    @denisdd5626 3 місяці тому

    pourquoi ne pas tout faire avec Remix finalement ?

    • @algomax-dev
      @algomax-dev 3 місяці тому

      Ç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 !

  • @Mrchiken3
    @Mrchiken3 3 місяці тому

    Tu viens de me sauver la vie ❤️🔥

  • @pierreburgy7442
    @pierreburgy7442 3 місяці тому

    Impressionnant ! 😮 Merci beaucoup Virgile pour la création de cette vidéo ultra complète ! 🤩

    • @algomax-dev
      @algomax-dev 3 місяці тому

      Merci Pierre pour la création de ce headless CMS ultra complet !

  • @felixfale964
    @felixfale964 3 місяці тому

    Merciii

  • @johancode
    @johancode 3 місяці тому

    Trop bien la vidéo ! :)

  • @CodingAfterThirty
    @CodingAfterThirty 3 місяці тому

    This is awesome. Looking forwards going through the tutorial.

    • @algomax-dev
      @algomax-dev 3 місяці тому

      @@CodingAfterThirty thank you Paul, means a lot !

  • @BrunoFirnadch
    @BrunoFirnadch 3 місяці тому

    Toujours au top

    • @algomax-dev
      @algomax-dev 3 місяці тому

      @@BrunoFirnadch merci !

  • @malekmalek4536
    @malekmalek4536 3 місяці тому

    merci pour votre éfort j'ai juste une question ? peut on remplacer remix par next c mon freamwork préferer ??

    • @algomax-dev
      @algomax-dev 3 місяці тому

      Absolument ! C'est tout pareil avec NextJS !

    • @malekmalek4536
      @malekmalek4536 3 місяці тому

      @@algomax-dev Merci beaucoup bon continuation ❤️❤️❤️

  • @djo7460
    @djo7460 3 місяці тому

    ça marche également si on remplacel e remix par nextjs?

    • @algomax-dev
      @algomax-dev 3 місяці тому

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

  • @userinconnu2852
    @userinconnu2852 4 місяці тому

    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

    • @algomax-dev
      @algomax-dev 4 місяці тому

      Conform est maintenu et efficace, il répond à mon besoin mais pourquoi pas rester RHF. Merci pour ton commentaire, ça fait plaisir !

  • @SammyTempo1
    @SammyTempo1 4 місяці тому

    Au top ! Même concept avec le fameux GraphQL ? Couplé à Prisma

    • @algomax-dev
      @algomax-dev 4 місяці тому

      Je n'ai pas testé GraphQL :)

  • @SammyTempo1
    @SammyTempo1 4 місяці тому

    Au top ta vidéo ! Très pédagogue ! Même concept mais en ajoutant le fameux GraphQL couplé à Prisma et NestJS ??

    • @algomax-dev
      @algomax-dev 4 місяці тому

      Merci pour le commentaire!

  • @userinconnu2852
    @userinconnu2852 4 місяці тому

    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

    • @algomax-dev
      @algomax-dev 4 місяці тому

      Merci pour ton commentaire ! Tu aurais voulu du graphQL pour appeler l'API côté front ?

    • @userinconnu2852
      @userinconnu2852 4 місяці тому

      @@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 💪

  • @TheGetbackers007
    @TheGetbackers007 4 місяці тому

    Superbe tuto

    • @algomax-dev
      @algomax-dev 4 місяці тому

      @@TheGetbackers007 merci !

  • @ahmedhichri7031
    @ahmedhichri7031 4 місяці тому

    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

    • @algomax-dev
      @algomax-dev 4 місяці тому

      Merci pour le commentaire !

  • @EiranAtaraxia
    @EiranAtaraxia 4 місяці тому

    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.

    • @algomax-dev
      @algomax-dev 4 місяці тому

      @@EiranAtaraxia c’est une erreur au montage de Final Cut Pro à l’emplacement d’un zoom 😅 Je n’avais pas remarqué, merci !

  • @pHBonheur
    @pHBonheur 4 місяці тому

    Ayant déjà fait pas mal de dev sur Fastify et Hono, ce walkthrough avec NestJS est vraiment pas mal 🎉

  • @automecanik8508
    @automecanik8508 4 місяці тому

    franchement je te remercie infiniment pour cette formation

    • @algomax-dev
      @algomax-dev 4 місяці тому

      Je te remercie infiniment pour ton commentaire !

  • @road2dev
    @road2dev 4 місяці тому

    Je ne suis plus tres "nest", j'ai plutôt basculé sur Adonis. Mais bien utile quand même ton tuto S3 SDKV3. Cool!

    • @algomax-dev
      @algomax-dev 4 місяці тому

      Merci mec ! Qu’est-ce qui t’a fait choisir Adonis au lieu de NestJS ?

    • @road2dev
      @road2dev 4 місяці тому

      @@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 😀

  • @fabienmacip
    @fabienmacip 5 місяців тому

    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.

    • @algomax-dev
      @algomax-dev 5 місяців тому

      @@fabienmacip tu peux utiliser neon.tech gratuitement sans CB. Ce sera du postgresql !

  • @mohamedlamine2604
    @mohamedlamine2604 5 місяців тому

    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?

    • @algomax-dev
      @algomax-dev 5 місяців тому

      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 ?

    • @mohamedlamine2604
      @mohamedlamine2604 5 місяців тому

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

  • @nearweb8133
    @nearweb8133 5 місяців тому

    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 👍!

    • @algomax-dev
      @algomax-dev 5 місяців тому

      @@nearweb8133 ça fait plaisir ! assieds-toi confortablement et profite !

  • @Shakurjor
    @Shakurjor 5 місяців тому

    Combien d'années pour avoir ce niveau ?

    • @algomax-dev
      @algomax-dev 5 місяців тому

      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)

    • @Shakurjor
      @Shakurjor 5 місяців тому

      Merci pour ton retour mais je reste impressionné par l'aisance que tu as!!

  • @bricematias8128
    @bricematias8128 6 місяців тому

    Hello moi je n'ai pas la base de donnée gratuite sur ton appli :( Pourquoi?

    • @algomax-dev
      @algomax-dev 6 місяців тому

      Hello ! Malheureusement ils ont retiré le tiers gratuit : il faut passer chez neon.tech La solution se trouve à 5:00:30

    • @bricematias8128
      @bricematias8128 6 місяців тому

      @@algomax-dev j’ai utilisé l’alternative avec mysql et wamp ça devrait bien marcher aussi je pense non? Merci :)

  • @FranckMekoulou-i7w
    @FranckMekoulou-i7w 6 місяців тому

    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"

  • @RomainCerezo
    @RomainCerezo 6 місяців тому

    Avec tout ça plus d'excuse pour pas savoir faire !

  • @garius3559
    @garius3559 6 місяців тому

    S'il te plait tu gére le refresh token comment avec nest js et react??

    • @algomax-dev
      @algomax-dev 6 місяців тому

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

    • @garius3559
      @garius3559 6 місяців тому

      @@algomax-dev En se reconnectant, c'est bien ça?

    • @garius3559
      @garius3559 6 місяців тому

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

    • @algomax-dev
      @algomax-dev 6 місяців тому

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

    • @algomax-dev
      @algomax-dev 6 місяців тому

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

  • @garius3559
    @garius3559 6 місяців тому

    Merci beaucoup pour ce mega contenu ❤❤

  • @Gustavewpm
    @Gustavewpm 6 місяців тому

    C’est mortel, GG ! Tu essaieras AdonisJS et Elysia ?

    • @algomax-dev
      @algomax-dev 6 місяців тому

      @@Gustavewpm pourquoi pas !