Connecting Backend and Frontend in MERN Stack + Fixing CORS Error - MERN Stack Project Tutorial #8

Поділитися
Вставка
  • Опубліковано 14 жов 2024
  • #MernStack #mern #MernTutorial #MernStackProject
    MERN Stack Tutorial Series with Redux where we will learn to build an Awesome Full Stack Notes Taking Web App Project.
    In this video we will Connect our backend and frontend and serve the notes through the API and fix the cors error with proxy.
    Source Code -
    github.com/piy...
    Live Site - notezipper.her...
    Full Playlist -
    • MERN Stack Project Tut...
    Movie App in React JS and Material UI -
    • Movies and TV Series S...
    Quiz App in React JS and Material UI -
    • Quiz App in React JS w...
    Dictionary App in React JS and Material UI -
    • 12 Language Dictionary...

КОМЕНТАРІ • 63

  • @sahilbutala6911
    @sahilbutala6911 3 місяці тому +1

    Bro yarr tu itna achsee sikhata hai literally 1 bar me samaj ata hai sachi .....

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

      Bro muje ak doubt tha aap reply karoge kya

  • @7daysinSunnyJune
    @7daysinSunnyJune Рік тому +2

    Great stuff man! thank you for sharing your knowledge and great content!

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

    And what about the productions, should I add the base url of the backend after deployment just same as shown in this for the localhsot

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

    Awsome tutorial ! Its really helpful. Keep up the good work.

  • @Sushanta-Das
    @Sushanta-Das Рік тому

    Sir, I am making an edtech website. I have some doubts , could you please answer them?. I have landing page (before log in) and dashboard page after log in. Should I use react for the whole website?. Or can I use just template engine ? But will user experience be good ? I am going to add video lecture section, online test . In this video is it client side rendering? Can I use server side rendering for landing page+ client side rendering for dashboard and other interractive functionalities? How can I do the same ?

  • @stuartYoung559
    @stuartYoung559 9 місяців тому +1

    Proxy error: Could not proxy request can connect front end to backend
    why this happening, followed all stack overflow approaches.
    plz help

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

    how can we deploy such app, what configurations do we have to apply for deploying?

  • @sabirullah6297
    @sabirullah6297 3 роки тому +1

    Hello sir, Actually I'm following your playlist one by one but I got stuck somewhere because I have an error to connect the notes.js and to bring or connect the backend to the frontend right inside the console after inspecting , even though I have been following your tutorial step by step. Kindly do me needful !!!
    I really love and appreciate your method because it can be understood by quite beginners as well. the reference is starting from 5:40

  • @johnkamau3442
    @johnkamau3442 2 роки тому

    Excellent tutorial,works great even for PERN,it worked for me

  • @atdc1779
    @atdc1779 3 роки тому +2

    My English is not good, can u keep subtitles for your whole video 😘
    Thank u bro

    • @RoadsideCoder
      @RoadsideCoder  3 роки тому +1

      There will be auto-generated captions below, you can turn them on by clicking on cc

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

    Thanks Sir. You are amazing.

  • @aungchanmin4205
    @aungchanmin4205 2 роки тому

    Thank you so much. You save my life!!!

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

    When we use proxy then frontend is not working completely

  • @studywithrobin2715
    @studywithrobin2715 3 роки тому

    Is it generally good practice to have 2 package.json files like this?

    • @RoadsideCoder
      @RoadsideCoder  3 роки тому +1

      Yeah both are isolated from each other, if you don't wanna do this, create separate folder for both backend and frontend

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

    Can you tell me why you use "npm start" instead of "npm run start"?

  • @NSWMods
    @NSWMods 3 роки тому +2

    OMG i had my editor open when to cook dinner come back and my cat had jump up on my desk and wipe out my server js file Had to go back and do the server Part again Lol, anyway Did it again and got part 8 done to and its working great My teacher ok head to part 9 Now

  • @pawntozy
    @pawntozy 2 роки тому

    10:41 Concurrently. Very useful tool

    • @kalynndier6524
      @kalynndier6524 2 роки тому

      I couldn't get it to work. I had to revert back to what I had because using concurrently completely broke my site

  • @ANKITKUMAR-ih3yk
    @ANKITKUMAR-ih3yk Рік тому +1

    After setting proxy still I'm getting same error

  • @digiartpassion8513
    @digiartpassion8513 2 роки тому

    Can we use cors insted of setting proxies in 6:27...just curious

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

    thank you !!

  • @kiranraj7960
    @kiranraj7960 2 роки тому

    Hi am getting this error
    [0] Error: Cannot read property 'host' of undefined

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

    Thank you so much yarrrrrr, I just found...where I'm making a mistake 🥺🥺🥺🥺🥺

  • @isitMaaz
    @isitMaaz 3 роки тому

    I am getting this error at 7:14 = React Hook "useEffect" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

    • @RoadsideCoder
      @RoadsideCoder  2 роки тому

      Yeah use hooks inside of a function

    • @vcrohithutagonna2105
      @vcrohithutagonna2105 2 роки тому

      maybe you have typed "myNotes" then inside that used "useEffect". Just change the name "myNotes" to "MyNotes"......Maybe it may help you

  • @suchitaghadge3071
    @suchitaghadge3071 2 роки тому

    event after adding proxy my api is hitting on locaalhost:3000. hence getting bad request. Any idea how to resolve?

    • @spaghettimeatball915
      @spaghettimeatball915 2 роки тому

      Did you ever figure this out? I am having the same problem

    • @ANKITKUMAR-ih3yk
      @ANKITKUMAR-ih3yk Рік тому

      I'm having the same.

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

      me too!

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

      Guys I added cors to the sever.js and changed the get call to the previous one so "localhost:5000/api/notes" instead of "api/notes/" and it logs the object as intended I guess

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

      Have you got the solution for it ​@@ANKITKUMAR-ih3yk

  • @developerrihab7993
    @developerrihab7993 3 роки тому

    i am follwing the tutorial but I am getting 401 (Unauthorized) do you have an idea how to solve this ?

    • @RoadsideCoder
      @RoadsideCoder  3 роки тому

      Try to compare your code with mine, must be some typo. Link in description

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

    good video

  • @garbjorn1757
    @garbjorn1757 2 роки тому

    Thank you

  • @aluuusch
    @aluuusch 2 роки тому

    You are a star!

  • @nawazishali274
    @nawazishali274 3 роки тому

    sir have u telegram channel ??

  • @sabirullah6297
    @sabirullah6297 3 роки тому

    Sir also my concurrently is not working too I hv tried every possible trick

    • @RoadsideCoder
      @RoadsideCoder  3 роки тому

      Did you compare with my code?
      Contact me on instagram @RoadsideCoder

    • @sabirullah6297
      @sabirullah6297 3 роки тому

      Ok Sir I'm going to contact you on instagram

  • @yolla_4
    @yolla_4 2 роки тому

    concurrently command not working for frontend

  • @27sosite73
    @27sosite73 Рік тому

    0:08 why on earth would you move this picture preventing people from concentrating and reading.
    it is possible to pull out a man from india but pull out india from man is not so easy.

  • @nawazishali274
    @nawazishali274 3 роки тому

    i have some queries to ask to you about this video plz read my comment and tell me