How to Create a Express/Node + React Project | Node Backend + React Frontend

Поделиться
HTML-код
  • Опубликовано: 17 дек 2024

Комментарии • 563

  • @undertaker9138
    @undertaker9138 2 года назад +347

    Absolute legend, explained it way faster and clearer than other tutorials. Thanks a million.

    • @ArpanNeupaneProductions
      @ArpanNeupaneProductions  2 года назад +9

      Thank YOU for your support!

    • @selva1419
      @selva1419 Год назад +1

      Yes bro...superv explaination.. short and sweet

    • @praisennamonu76
      @praisennamonu76 4 месяца назад

      for me who wants to connect a website front end with the backend, i disagree. for simple applications, yh. but it isn't enough to cover for large projects

  • @Rashomon69
    @Rashomon69 Год назад +73

    25 years a dev, here. This was just the right amount of detail. Quick, clean, and concise.
    Subbed!

  • @dlove1219
    @dlove1219 2 года назад +85

    I'm in a coding bootcamp and your explanation was simpler and easier to understand. I learned more in your 12 minute video than in the 12 videos on this subject in my bootcamp. Thanks!

  • @xinwang4973
    @xinwang4973 2 года назад +22

    for the mac users, if you have address already in use error,Apple introduced some changes for AirPlay on macOS Monterey. Now, it uses 5000 and 7000 ports. If you are using these ports in your project, you need to disable this feature.
    System Preferences > Sharing > untick AirPlay Receiver

  • @nathanpetain9079
    @nathanpetain9079 2 года назад +13

    Literally fixed my lack of knowledge in 12 minutes! Thank you dude!

  • @jasondemuro6882
    @jasondemuro6882 2 года назад +17

    I have been looking for just a dead simple explanation for how to get a project like this started for a while and I just found this. Dude it’s awesome. Thanks for such a trimmed down streamlined explanation!

  • @smokecrack520
    @smokecrack520 Год назад +3

    This is still relevant even after 2 years (node has had many changes and so has React) for anyone wondering :)
    Thanks man

  • @abubalo
    @abubalo 2 года назад +12

    Eloquently explained. No wasting of time. Just fun to watch.

  • @eborders100
    @eborders100 Год назад +3

    thanks so much for this - I learned about web development through a bootcamp and they were so focused on just getting us up and running that we didn't get a lot of explanation to the specifics of what express was doing and how the client was getting data from the backend. This definitely cleared things up

  • @fenix20075
    @fenix20075 2 года назад +7

    I love this simple, straight forward description to display all these kind of powerful tools' functions and how it could be.

  • @ET_Bermuda
    @ET_Bermuda Месяц назад +1

    Hey, I know it's been a long time since you've made this video, but I just want to say thanks. I always return to this vid whenever I start a new project just to make sure that I get it right every time. Big thanks, man!

  • @PatrickRuckman-z5d
    @PatrickRuckman-z5d 3 часа назад +1

    I just found this, it was really good! It took me an afternoon, but I got my app working! I learned a lot.

  • @agentebimene3737
    @agentebimene3737 2 года назад +16

    Wow!! Teaching what seems to be difficult to many in a very relatable and brief way such as this is not something that is common in the world. I must add that this tutorial of yours is priceless. Keep it up

  • @sahilchowdhury2229
    @sahilchowdhury2229 Год назад +2

    This is crazy clear. I literally never comment on youtube videos, but I was working on something exactly like this and this was absolutely perfect! It's like you knew what I was thinking!

  • @hrushikeshtawde360
    @hrushikeshtawde360 Год назад +3

    Legend bhai saw a ton of tutorials for hosting my api but yours was way too clean. Thanks a ton

  • @jeremyrivera7615
    @jeremyrivera7615 Год назад +2

    The actual GOAT. I was wondering what the heck I was doing well since i started an ambitious early project but you gave me my confidence back

  • @designordu159
    @designordu159 Месяц назад

    concise, coherent, short, properly structured.. thanks a lot for this video

  • @bigPauliee
    @bigPauliee Год назад +1

    could have watched an 8 hour code camp but i got exactly what i wanted to know from right here, cheers man

  • @Newstatejournal1
    @Newstatejournal1 Год назад +2

    Excellent! All the other learning resources I have come across make the assumption that the student already has the same mental picture of the files and folder setup as the teacher has. Your video is clearest to me so far because I see the folders and files in Visual Studio explorer on the left and although I am not 100% sure, I think those folders and files represent the actual folders and files on the hard drive. What must be installed where is more clear to me now.

  • @TheInternalNet
    @TheInternalNet 10 месяцев назад +1

    THIS IS THE VIDEO I HAVE SPENT WEEKS LOOKING FOR!! Thank you so much.

  • @kumarutsav1123
    @kumarutsav1123 10 месяцев назад

    Humanity is prospering all because of contribution of people like you. Thanks

  • @DeadBabyFoetus
    @DeadBabyFoetus 2 года назад +16

    The most concise video I've came across of connecting front-end to back-end, earned a subscriber!

    • @ArpanNeupaneProductions
      @ArpanNeupaneProductions  2 года назад

      Thank you!!!

    • @jamesorior
      @jamesorior 2 года назад +1

      @@ArpanNeupaneProductions This video is the best. This is how development should work. Most developers don't know shit, they just like to flex their muscles and do simple things in a complicated way for ego purposes. Would like to see how you implement Cordova Frontend and Express NodeJs Backend. Sure it would be similar. Nice video again

    • @ArpanNeupaneProductions
      @ArpanNeupaneProductions  2 года назад

      @@jamesorior
      Thank you very much for your support. I haven’t used Cordova Frontend at all, however, you can use the same methodology described in the video. You can try finding a configuration file that can link with the Node backend via the API URL, then set up the backend the same way it’s set up in the video, and finally find a way to call the API in Cordova to display the data on the screen. Again, thank you for the support :)

  • @dirtman207
    @dirtman207 2 года назад +3

    thanks a lot man, I was trying to connect my front with my back and I had no idea, this tutorial is very clear and concise, thanks for what you did

  • @yurari_san
    @yurari_san Год назад +1

    I am watching from Japan.
    The explanation was very easy to understand.
    Thank you so much for creating useful videos.

  • @moestaxx286
    @moestaxx286 Год назад

    the fact that you are 15 is super impressive bro. keep up the great work.. learned a lot from you.. you will have a very bright future young g!

  • @cmlra
    @cmlra Год назад +1

    An absolute expert, they explained the information in a much quicker and more concise manner than other tutorials. Thank you so much.

  • @tanakachidemo
    @tanakachidemo Год назад +4

    Thank you so much for a very clear and concise video. I have been learning a lot of these tools in isolation. It's good to see how they all fit together. Great work!

  • @thedude121212
    @thedude121212 Год назад +1

    Great tutorial. I spent days trying to figure out how to connect BE and FE, and this video finally explained it clearly.

  • @malikabdullah7709
    @malikabdullah7709 3 года назад +11

    Thanks for this amazing video.
    it helped me understand, how frontend & backend exchange data.
    Thank very much

  • @alessandrorotondo1906
    @alessandrorotondo1906 2 года назад

    Up-to-date video as today 29th september 2022, super helpful, I finally figured out how to connect a React client with an Express server. Big up!

  • @isragaytanmistico
    @isragaytanmistico 10 месяцев назад

    Thats a huge and a great explanation. Coming from the Data Engineering world Finally i understand Node, React and so on. God Bless you.

  • @JusticeTalksTech
    @JusticeTalksTech 2 года назад +3

    That was great short and to the point video on how full stack looks like on a simple level. Very helpful

  • @tally3018
    @tally3018 2 года назад +1

    Maan I was searching like crazy to find something like ths, this is the first guide / tutorial that actually works!

  • @bleulejour
    @bleulejour 2 года назад +6

    Legend! super simple, concise and straight to the point. It would be nice to have tutorials about MERN from you :-)

  • @and_rotate69
    @and_rotate69 Год назад +1

    i came from 0 bg in express and react api's, left with 100% of new information sound and clear

  • @StevieComyn
    @StevieComyn 8 месяцев назад

    Thank you for discribing this relationship clearly, I was struggling with getting backend data to the frontend, Liked and Subscribed!

  • @EzraPoundForPound
    @EzraPoundForPound 2 года назад +2

    By far the best, concise, easy to understand explanation video. Thanks for this.

  • @toprakekinyuksel7667
    @toprakekinyuksel7667 Год назад

    Fast, clean and on the point. Only tutorial you need.

  • @kirillshevchenko7677
    @kirillshevchenko7677 Месяц назад +1

    FINALLY
    i solved this problem
    THANK YOU SO MUCH

  • @gudinaf5009
    @gudinaf5009 2 года назад +4

    Perfect Explanation, this guy knows what we are looking for in a video

  • @dallas8598
    @dallas8598 11 месяцев назад

    Real helpful! Thought setting up an API was much harder but you made it look very easy!

  • @davidbakare827
    @davidbakare827 Год назад +1

    Thank you for making this as simple as possible.

  • @ΤασουλακοςΤασουλινος
    @ΤασουλακοςΤασουλινος 2 месяца назад

    Great video I couldn't connect my front-end and back-end "system" for months until now thank you!

  • @thebaiway
    @thebaiway Год назад

    This is the best I've seen this explained and it clicked so well (and quickly) watching your video. Thanks so much!!

  • @shawn.builds
    @shawn.builds 2 года назад +1

    I watched a couple of tutorials and this was the best one. Thanks!

  • @YoungPilotOfficial
    @YoungPilotOfficial Год назад

    Way clearer then any tutorial so far, thanks man. I was breaking my head over this…

  • @tareqmahmud3902
    @tareqmahmud3902 2 года назад +1

    this is the most important video in this century!

  • @shawnjohnson3433
    @shawnjohnson3433 Год назад +1

    FANTASTIC! Great video! Very easy to follow. Keep pushing more videos.

  • @sujeewa8067
    @sujeewa8067 2 года назад +1

    Subscribed! The way you explain and demonstrate is really really nice. I love it ❤!

  • @tatendamuzenda8442
    @tatendamuzenda8442 Год назад +1

    woooow best video I have seen so straight to the point

  • @microflexe980
    @microflexe980 Год назад +1

    thank you for the tutorial, this saves me a lot of time! AWiting for your tutorial on how to connect the database to the project

  • @Assassin274
    @Assassin274 Год назад

    Amazing , going to watch more of your vids very smooth and clean explanation and not overly fast bravo

  • @Gotostep2
    @Gotostep2 Год назад +2

    Express God Slaying Skills!
    EDIT: FYI, for those using vitejs, try this in your vite.config...
    export default defineConfig({
    plugins: Whatever plugins you use...
    server: {
    proxy: {
    '/api': {
    target: 'localhost:9000',
    changeOrigin: true,
    secure: false,
    }
    }
    }
    })

  • @fourn7wenty
    @fourn7wenty Год назад +2

    Awesome dude thank you. This made it way easier to get a start

  • @dewanmasumanazneen8366
    @dewanmasumanazneen8366 Год назад

    This is the best video to get started with fullstack projects imo❤

  • @tommyshaw2420
    @tommyshaw2420 Год назад

    Nice! I think most videos out there get bogged down and try to over explain or add content etc. This is so clean and literally all you need to get started.

  • @dupligae1326
    @dupligae1326 6 месяцев назад

    Damn that was so informative! I have been looking up for quite some time , and this veedio shown up, most importantly it was exactly what I need, amazing!

  • @cryptofelix5242
    @cryptofelix5242 7 месяцев назад

    Very helpful when you are just starting to work with Node.js, thank you!

  • @adrianacamarottoTricam
    @adrianacamarottoTricam Год назад

    Thank you so much! Your video is so clear that I was finaly able to understand how to setup my project.

  • @someone-k1t
    @someone-k1t 2 года назад +1

    Absolutely what I was looking for. Thank you for the lesson.

  • @vladimir_nguyen
    @vladimir_nguyen Месяц назад

    Nice helpful video. Simplicity and pleasant voice. Thank you!

  • @zoltancaputo9562
    @zoltancaputo9562 Год назад +1

    Awsome ... Tks ! Clear, fast and it works !!! Added and sharing ....

  • @itzmickman7544
    @itzmickman7544 5 месяцев назад

    Great video, you explained this fast but clear. Thank you

  • @mikaelmanninen9128
    @mikaelmanninen9128 2 месяца назад

    Thanks, quick and clear explanation. Saved alot of my time.

  • @tapewormerbinkosti3141
    @tapewormerbinkosti3141 Год назад

    Exactly what I needed in less than 13 minutes. Amazing tutorial, tnx

  • @sh44ko58
    @sh44ko58 2 года назад

    First and best tutorial with Node and React without indian talk, and bullshit talk. Thanks alot mate ! Keep up with this type of great content.

  • @ababyduck717
    @ababyduck717 Год назад +1

    Thanks, this was super helpful. Might be nice to see an updated version using Vite though, now that CRA is no longer maintained.

  • @donovan9905
    @donovan9905 Год назад

    Best explaination! Been struggling to understand this concept. Now I got it!

  • @ives0000
    @ives0000 2 года назад +1

    This video is exactly what i needed! Thanks, and ill be checking out more of your vids!

  • @Bukosaure
    @Bukosaure 2 года назад +5

    Seriously, you need to get more popular. The quality of this explanation is outstanding. Clear and concise. Also, what's the VS theme? :)

    • @gianni16
      @gianni16 2 года назад

      Hi ! As it's been 2 months you asked the question, do you now know what's the VS theme ?

    • @camyana3986
      @camyana3986 2 года назад +1

      @@gianni16 Dracula I believe

    • @gianni16
      @gianni16 2 года назад

      @@camyana3986 Yes ! Thanks

  • @gabrielfono844
    @gabrielfono844 2 года назад

    thanks
    amazing
    love this quick
    I have been working as backend engineer for few months now
    thahanks

  • @himanshuraj296
    @himanshuraj296 2 года назад +1

    Great man U are Legend. i was struggling with this in last 7 days. keep it up man

  • @proexpert7417
    @proexpert7417 10 месяцев назад

    Thank you for the clear explanation, you got a new subscriber.

  • @albertbrannan4
    @albertbrannan4 2 года назад +1

    This was a great lesson. You are the man!!!!

  • @מוצריםלרכב
    @מוצריםלרכב Год назад +1

    where can I add to my VSC project the express-react-project folder you opened at 0:25?

  • @pavanrao1446
    @pavanrao1446 Год назад

    Great way of teaching in less time ,am so satisfied. If you know basics then it will really help to how to setup and link the client and server

  • @jacob258631
    @jacob258631 2 года назад +1

    You have some great videos. Subscribed. I am preparing to be a full stack engineer and these helped so much. Thank you, sir.

  • @angelesc2479
    @angelesc2479 2 года назад

    Great video ! Short, concise and clear. Love it.

  • @CBQReview
    @CBQReview 2 года назад +1

    Thank you bro, you just set me up to finesse this project im working on.

  • @bhavyaparikh667
    @bhavyaparikh667 Год назад +1

    You deserve more views!❤

  • @tuner6914
    @tuner6914 9 месяцев назад

    Explained precisely.. You can be a good professor.

  • @ohlsclason
    @ohlsclason Год назад

    Great stuff, spent a long while trying to figure this out by myself - thanks!!

  • @whatnothin1401
    @whatnothin1401 Год назад

    I needed these fundamentals and step by step quide .. thank you.

  • @hequeda2190
    @hequeda2190 Год назад +4

    If anyone is having trouble around the 8 minute mark when react gives the scary red sign of "Objects are not valid as a React child (found: object with keys {users}). If you meant to render a collection of children, use an array instead.", you should put "setBackend(data.users)" not "setBackend(data)". This is because data is the entire object that encapsulates users, but all we need are the usernames. Hope this helps.

  • @urbanrakhal5622
    @urbanrakhal5622 2 года назад +1

    Give this guy a medal

  • @math001
    @math001 Год назад

    Amazing work man. Currently following along MDN's tutorial for Express and was wondering how the hell that would connect to React. Granted, I still am not finished with it but this is so much more understandable.

  • @CaliburPANDAs
    @CaliburPANDAs Год назад +1

    i learned a lot from this video. thank you so much.

  • @Mossy45
    @Mossy45 3 месяца назад

    This is such an amazing tutorial. Thank you so much!

  • @jarodmorris611
    @jarodmorris611 6 месяцев назад

    Great tutorial. I have noticed that few tutorials explain how to deploy it to a live server. It makes sense considering how different servers can be, but it's frustrating for someone learning.

  • @DillonJurgens
    @DillonJurgens 2 года назад

    Just subbed! excelent explenation, and in depth commenting on what you were doing!

  • @rxlvnd3397
    @rxlvnd3397 6 месяцев назад

    This is exactly what I needed! Thanks a lot!

  • @lasithadulshan7357
    @lasithadulshan7357 Год назад +2

    Thank you for saving my time ❤

  • @OXIDE777-is6gs
    @OXIDE777-is6gs Год назад +1

    Awesome bro, thanks for the tutorial!!

  • @shubhamdas6519
    @shubhamdas6519 Год назад +1

    straight to the point......thanks a lot sir...

  • @MrPneumatikos
    @MrPneumatikos Год назад +1

    Thank you! I’m new, and I was able to follow along and my little app is working! At first I put the “proxy” in the wrong pkg json but the realized it has to be in the client package.json (duh! Lol)

  • @Pagegift
    @Pagegift 2 года назад

    This is an amazing and effective lesson!
    Also it is a simple.
    Thank you!

  • @albertalbaba5101
    @albertalbaba5101 Год назад

    This video was so good and straight forward !! Thanks

  • @patriciamariegatchalian5940
    @patriciamariegatchalian5940 Год назад

    This video is coherent. Thank you for uploading

  • @UnderdogWorks
    @UnderdogWorks Год назад

    got yourself a subscriber man lots of loveeeee

  • @alexeylozin7443
    @alexeylozin7443 Год назад +1

    thanks a lot! clear explanation! how do I add other endpoints for post/update/delete - do I use useEffect hook for all of them ?