Learn tRPC In 45 Minutes

Поділитися
Вставка
  • Опубліковано 27 гру 2024

КОМЕНТАРІ •

  • @WebDevSimplified
    @WebDevSimplified  Рік тому +5

    Highlight: app.highlight.run/?promo=SIMPLIFIEDHIGHLIGHT
    Coupon Code: SIMPLIFIEDHIGHLIGHT (This should be automatically filled in as you go through the signup process)

  • @gzucca
    @gzucca 11 місяців тому +6

    Man, I never get tired of your videos. Your explanations are so clear and to the point, plus they always have tips such as folder organization. Keep up the work!

  • @emanuelefavero
    @emanuelefavero Рік тому +57

    Thank you Kyle. tRPC was the part of the t3 stack I struggled the most this week and this video helped me so much. Would you mind making something like this about the t3 stack?

  • @techwithattila
    @techwithattila Рік тому +31

    Really interesting to see how many traditionally "backend concepts" break into the frontend world. It's a welcome change though, everyone is looking for less error-prone code 🐞

  • @OtterSwims
    @OtterSwims 11 місяців тому

    The last part about websockets was something i really needed, thanks for making this explainer.

  • @theisoj
    @theisoj Рік тому +7

    Thanks once again Kyle for this tRPC tutorial. I'm going to learn about this on Friday or Saturday evening.

  • @diegoalairelibre
    @diegoalairelibre Рік тому +1

    ¡Gracias! Thanks

  • @StrayKev
    @StrayKev Рік тому +4

    Thank you. tRPC is something I have always wanted to learn about.

  • @satvik0099
    @satvik0099 Рік тому +2

    Your explanation is next level as usual ♥️🌟
    But I request you to make a video of how to apply TRPC in real world applications .
    Also the application of web sockets is needed because without that it seems to be empty

  • @pablom2274
    @pablom2274 Рік тому

    At min 16 coding along just amazed how good this is

  • @SteveBoyer10
    @SteveBoyer10 Рік тому

    Dude just been looking to learn this and boom, here's your video. Gracias sir.

  • @NOT_TON_Fan
    @NOT_TON_Fan Рік тому +1

    T3 stack tutorial needed!

  • @VladdyHell
    @VladdyHell Рік тому +12

    It would be cool if you make a crash course for t3 stack too

  • @jeromemanceau4263
    @jeromemanceau4263 Рік тому +1

    Thanks Kyle!.. just wanted to also review Prisma and... look at that, you have a tutorial about Prisma as well :D

  • @DavidBowmanJr
    @DavidBowmanJr Рік тому

    I asked for this, and it happned. Thank you :)

  • @ayushdedhia25
    @ayushdedhia25 Рік тому +3

    I think tRPC can be the new standard for building APIs!! 🤔

  • @clarkhinchcliff7824
    @clarkhinchcliff7824 Рік тому

    Perfect, just when I needed it!
    Thanks so much for this.

  • @cirex314
    @cirex314 7 місяців тому

    5:33 is throw new TRPCError() not applicable here?

  • @stevepr7430
    @stevepr7430 Рік тому

    Thanks, this video is the best support to tRPC docs.

  • @MattBodman
    @MattBodman 9 місяців тому

    Excellent tutorial, thanks!

  • @pablom2274
    @pablom2274 Рік тому

    33:00 should I worry about sending 'Content-Type': 'application/json' ??

    • @oleh1
      @oleh1 Рік тому

      No. TRPC does it for you

  • @juanisimioli
    @juanisimioli Рік тому

    Kyle, I need some solidity videos from you! ❤🧡💛💚💙💜

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

    also what version are you using, because i need to load a transformer for some reason

  • @isaacgarcia2745
    @isaacgarcia2745 24 дні тому

    my question is how it gets deployed, if the client has to be aware of the files on the server to import the AppRouter. what happens when you distribute these from different endpoints like a webserver and a regular VM. the files wouldn't be accesible to each other is this a type of feature designed to server side rendering?

  • @RomanOstolosh
    @RomanOstolosh Рік тому

    13:44 Is it possible to create several routers though and attach them to different endpoint to separate between the apps in a more complex setup? Or it's a technical limitation of TRPC?

    • @pablom2274
      @pablom2274 Рік тому

      I'm at min 16 right now but I just did what you say and it works, you just have to create another "client" in the client side and pass the router to the createTRPCProxyClient function.

  • @plasmadice
    @plasmadice Рік тому

    I have watched several of your videos. You don't waste time. So when I saw that this video was 45 minutes I decided to leave this comment and go to sleep. This can wait until tomorrow.

  • @hardcorecode
    @hardcorecode Рік тому

    very efficient tutorial.... love this style.

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

    Since you're in a monorepo, why not create a separate package for types, and then on client-side do typecasting after fetching. I don't get it. what's the benefit from it

  • @AZ-kh9ex
    @AZ-kh9ex Рік тому +1

    If we are importing AppRouter from server into client, I am unable to understand how are we going to deploy this. We can't deploy react and nodejs separately in this case, right?
    Please help

  • @mahboobmohammad1868
    @mahboobmohammad1868 Рік тому +1

    Out of curiosity, why don't you use node --watch instead of nodemon

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

    mind blown, thanks!

  • @leomangold
    @leomangold 8 місяців тому

    Is the code available in some kind of repo anywhere? I'm having troubles with setting up the server and would want to know whats inside of the package.json files and stuff

  • @metalsadman
    @metalsadman Рік тому

    thanks,. that's really cool way of doing things syncing frontend requests wiith serverside is godsend. i hope trpc gets more traction and adoption.

  • @elonmask7271
    @elonmask7271 Рік тому

    Was actually waiting for this. Thank you so very much.

  • @Michael-Martell
    @Michael-Martell Рік тому +1

    So, with this and the prisma course, are you leaning towards T3?

  • @nicolasbatistoni2036
    @nicolasbatistoni2036 Рік тому

    Thanks! Great explanation!

  • @rolandfancier3666
    @rolandfancier3666 Рік тому

    thx for your tutorial~ but how can i get the demo you show in the video?

  • @cruz.aljon1990
    @cruz.aljon1990 Рік тому +1

    Should the server and client in the same server?

  • @firewatermoonsun
    @firewatermoonsun Рік тому

    Thank you so much buddy!

  • @alirashad23
    @alirashad23 Рік тому

    that was so helpful for me thank you

  • @navneetpatel6193
    @navneetpatel6193 Рік тому

    Thankyou soo much Kyle.

  • @unhandledexception1948
    @unhandledexception1948 Рік тому

    would it be reasonable to think of this as alternative to React Query ?

  • @PartneredBrands
    @PartneredBrands 9 місяців тому

    Kyle hi love your vids! Can you do one for auto-gen of unittests using plawright and also generates interactive swagger docs from any nextjs app that uses zod, lucia and trpc?

  • @MueezKhan1
    @MueezKhan1 Рік тому +1

    Thanks! Thoughts on create-t3-app?

  • @hd.r6545
    @hd.r6545 Рік тому +2

    Thank you for posting such great content! I learned a lot from all of your videos. They are really really helpful. And I am also shocked you can talk and code at same time keep everything on the track. Is there way to practice such ability ?

    • @ChristopherPhillipsDev
      @ChristopherPhillipsDev Рік тому

      He's got the ready made code on another monitor that he's already proofed. You can tell because he looks to the side before he writes something new.

  • @whoisthe.l
    @whoisthe.l Рік тому +1

    what if i deploy on vercel but different repo? is it possible?

    • @metalsadman
      @metalsadman Рік тому

      both needs. to be. in the same repo it seems.

    • @whoisthe.l
      @whoisthe.l Рік тому

      @@metalsadman so, how structure project look like?

  • @eleah2665
    @eleah2665 Рік тому +1

    Hi Kyle. Thanks for this. Is the code available somewhere? I don't see it in your github repository.

  • @BarisPalabiyik
    @BarisPalabiyik Рік тому

    Yes, I am glad it's getting popular. It's an amazing magic.

  • @faizanahmed9304
    @faizanahmed9304 Рік тому

    Wooo thanks man!

  • @farazayaz2526
    @farazayaz2526 Рік тому

    ❤ Love you man!

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

    Are you still using this or have you moved to server actions? Would be cool to see you create a project using this!

    • @WebDevSimplified
      @WebDevSimplified  6 місяців тому +3

      I have a Twitter clone using tRPC. I have tried moving more to server actions, though, as they work well in many situations.

  • @pablom2274
    @pablom2274 Рік тому

    30:20 how was the normal way??

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

    Anyone watching this anytime from now , you should know that the trpc is now v11 while it was v10 in this video so check the documentation

  • @rukeeojigbo2221
    @rukeeojigbo2221 Рік тому

    Thanks a lot

  • @KitaTFT
    @KitaTFT Рік тому

    Supabase crash course in 45 minutes. Will you make it ?

  • @mediocreTyler
    @mediocreTyler Рік тому

    Thanks Kyle

  • @aseemanand1
    @aseemanand1 Рік тому +2

    What if backend and Frontend have separate repos

    • @mmmm-kl3rd
      @mmmm-kl3rd 29 днів тому

      that's the point and the problem. Without trpc we can find a similar solution, maybe with the same interface. But what
      happens if i have FE and BE seperate repos?

  • @yaroslavozerov1121
    @yaroslavozerov1121 Рік тому +2

    1. Every tutorial Kyle creates - always it seems like he knows it since his childhood. You even don't make a pauses to think or to remember something...I have no clue how is it possible at all xD
    2. I still didn't get why do we need at all such complicated stuff as tRPC :(( I didn't saw many benefits

  • @wavyboyjodii
    @wavyboyjodii 9 місяців тому

    thanks bruv

  • @afonsonzango
    @afonsonzango Рік тому

    Kyle, can you make a video Abt how to live preview a website template, live bootstrap themes? Please bro.

  • @ToddDunning
    @ToddDunning Рік тому +2

    Mmmm I glazed over at about the halfway point. It would help me to get more of an architectural outline and the project context in the beginning. You do a great job flying through the code but I'm losing it figuring out the context of each function; when to do what and why. Longtime subscriber and fan here.

  • @zombiefacesupreme
    @zombiefacesupreme Рік тому

    9:19
    Can you not use top level await here?

    • @douglascounts4634
      @douglascounts4634 Рік тому +1

      Using await at the top level requires a lot of changes to your "package.json" and your "tsconfig.json" files. Most of these changes involve forcing node to use newer module types and break a lot of other libraries that you may have in a larger project. You can't use node's popular "require" function for example to do imports.

    • @zombiefacesupreme
      @zombiefacesupreme Рік тому

      @@douglascounts4634 thank you so much for the detailed answer. I had some issues with the compiler yelling at me about that and that makes total sense in that context. :)

  • @JokeryEU
    @JokeryEU Рік тому

    thank you, was thinking of looking to learn more about tRPC :D to use it in my nextjs project

  • @TariqSajid
    @TariqSajid Рік тому

    i would awesome if we can you this in a separate backend and frontend like php backend and react js frontend

  • @llmaboi
    @llmaboi Рік тому

    Instead of using cors in the server use a vite proxy less packages and very easy to configure

    • @ts8960
      @ts8960 Рік тому

      no. cors is the easiest thing in the world to configure

  • @cherubin7th
    @cherubin7th Рік тому +3

    You must put a privacy policy on your website when you use that and disable it if the user disagrees in the EU.

    • @vrechko
      @vrechko Рік тому +2

      source?

    • @Fuzbo_
      @Fuzbo_ Рік тому

      @@vrechkomaybe they’re talking about the Highlight sponsor? I don’t see anything online related to tRPC needing to be put into the privacy policy

    • @vrechko
      @vrechko Рік тому

      @@Fuzbo_ Yeah might be it. Was genuienly curious if that was true.

  • @masuya444
    @masuya444 Рік тому

    Is this trpc v10 tutorial?

  • @spinix3744
    @spinix3744 9 місяців тому

    so it is tightly coupled

  • @t3dotgg
    @t3dotgg Рік тому +2

    o n e o f u s

  • @TsoiIzAlive
    @TsoiIzAlive Рік тому +1

    Gains are noticeable 👍

  • @satvik0099
    @satvik0099 Рік тому

    Why not in next js 😭

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

    It would have been really helpful if you had given the github repo with the code

  • @ts3798
    @ts3798 Рік тому

    Didn't know Robert Paul Champagne was in web development.

  • @farzadmf
    @farzadmf Рік тому

    NICE! I'm wondering if tRPC and gRPC can be used together 🤔

  • @firewatermoonsun
    @firewatermoonsun Рік тому +1

    I watch at 0.75 speed))

  • @rhul0017
    @rhul0017 Рік тому +1

    People hate angular and all other frameworks settle down to patterns from angular!!!

    • @oleh1
      @oleh1 Рік тому

      how is trpc a pattern from angular?

  • @chanmyaemaung
    @chanmyaemaung Рік тому

    Awesome!!!

  • @Zagoorland
    @Zagoorland Рік тому

    New hair, who dis

  • @rajnishsrivastava4231
    @rajnishsrivastava4231 Рік тому +1

    Theo pushed trpc alot

    • @metalsadman
      @metalsadman Рік тому

      it's great tech so understandable. problem I'm seeing is when working on a team where peeps work on different repo for backend and frontend.

  • @tariqal-malki8401
    @tariqal-malki8401 Рік тому

    Who gave you the black eye??

  • @jamesselene
    @jamesselene Рік тому +1

    The single repository makes this a non-starter for many. Especially larger team projects.

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

    webdevs try not to overcomplicate things to shit challenge: impossible xD

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

      we need a new framework to make things simpler

  • @dt7472
    @dt7472 Рік тому

    It reminds me apollographql

  • @adambickford8720
    @adambickford8720 Рік тому

    "Impossible" even though we were doing it 20 years ago, in java of all languages (yes, type safe to the client via cross compilation; gwt was exciting back when google was credible) There are *HUGE* downsides to this tightly coupled monolithic approach and being JS/TS isn't even one of them!
    If you need to mash out a simple app in a week or 2? Great. Need an app that will more than a year or 2? Not so much.

  • @DeepanshMaurya-w7i
    @DeepanshMaurya-w7i 5 місяців тому

    your video is obselete now delete this , most of the methods are deprecated that you have used

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

      Wouldn't call it obselete. It's still good if you are learning from scratch but some parts are deprecated and some parts have new/better practises.

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

      ladies and gentlmen: WEB DEVS

  • @jaabel249
    @jaabel249 Рік тому

    I did not find this to be useful. Sorry.

  • @VercJames
    @VercJames Рік тому +1

    node_modules/@trpc/client/dist/index.mjs:1:43: ERROR: Could not resolve "@trpc/server/observable" anyone?

    • @aghilannathan8169
      @aghilannathan8169 Рік тому

      Yep I can't solve this issue.

    • @VercJames
      @VercJames Рік тому +2

      @@aghilannathan8169 npm install @trpc/server to the client side. Found the answer, it’s in the official documentation