How To Serve A React App From A Node Express Server

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

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

  • @mauricebusby3850
    @mauricebusby3850 3 года назад +20

    Thank you! Simple straight to the point no nonsense guide. Great work!

  • @fathersson8641
    @fathersson8641 3 года назад +10

    That was so simple and elegant thanks!
    I didn't like the idea of running page on two separate ports and tried all kinds of hackish ways. Which didn't work and you just blew my mind with such a simple solution! Didn't knew about build script!
    God bless!

  • @Lucas-zd8hl
    @Lucas-zd8hl 2 года назад +4

    A tutorial where everything just works. Thank you so much

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

    Great video, thank you for helping me get express to run the static files of my CRA. This was far from the first video/article I watched for help, but it was the first one that worked for me. Your video from 3 years ago is still solid, well done.

  • @viktormelik-parsadanyan1090
    @viktormelik-parsadanyan1090 5 месяцев назад

    Thank you for this. It was really beneficial.

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

    Perfect video, wasted my time with a couple others before finding this

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

    Was having trouble deploying onto my Ubuntu server. This worked perfectly!

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

    Yooo. Thanks a lot. I have been serching on how to do this for days.

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

    Thank you so much man! This was wonderful

  • @saikrishnadas666
    @saikrishnadas666 3 года назад +1

    Thanks a lot , I have been stuck with this for a long time until i saw this video :)

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

    the best video Ive ever seen.

  • @takdanaicheepsaritdipong9381
    @takdanaicheepsaritdipong9381 3 года назад +3

    You saved my life. Thank you so much

  • @Isaque157ish
    @Isaque157ish 3 года назад +3

    Thank you so much. This video was really helpful to me ;D

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

    Exactly what I needed, thank you.

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

    This makes my project so much easier, thank you

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

    One I can say - that's it :)
    Thank you bro!

  • @fiils6135
    @fiils6135 3 года назад +1

    Amazing video, just what I needed!

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

    What if i want to acess a route like "/posts"? If there is not any posts.html or route for it it returns 404.
    Instead of app.get, put an app.use that return only the index.html.
    In that case, if there isn't any posts.html, it will send index.html, load react and apply the "/posts" route to the react-router-dom.

  • @yashuapervez1533
    @yashuapervez1533 3 года назад +1

    thanks bro, it really helped me, keep up the good work

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

    THANKS SO MUCH!!

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

    I LOVE YOU, MY CODE NOW WORKS!!!

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

    You can also define Proxy property in the package.json to avoid CORS problems by providing your front end url in there.

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

    Thanks Dude!

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

    Nice video, didnt fully work for me, but i still found parts of the video usefull

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

    thanks a lot brother

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

    Thank you!

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

    the only problem with this, it that you have to build, copy and paste everytime you want to see a new insignificant change in the gui.

  • @Js-Lovers
    @Js-Lovers 2 года назад

    Sir for example in my frontend application there's having routes concept.how to Achieve that from nodejs server application. Any help appreciate!

  • @Skyline-ks7qx
    @Skyline-ks7qx Год назад

    I have more routes in react and when I put my node server as in the video it fails to refresh the page, help me get Cannot GET "anyroute"

  • @evolade4044
    @evolade4044 3 года назад +1

    This looks extremely easy compared to other ways, does that causes a problem in the big project? It look very static

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

    Hi nice and simple. Is there a way to watch react changes and build automatically. without launching manually the command?

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

    How about rendering the pages using the express react view engine

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

    i did the same but images are not loading from url but evrything works fine. please someone help! :(

  • @alinamanmedia
    @alinamanmedia 3 года назад +1

    Thanks a lot.

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

    One problem occured, while refreshing the react page error is occurring. How to solve that?

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

    What if I have a different route, I keep getting an internal serval error for different routes

  • @kevinpallado9638
    @kevinpallado9638 3 года назад

    when the page is on the localhost/setup and reload it on the browser after reloads it will not show, the error that I found is that instead of index.js can be found in localhost/assets/index.js it goes to localhost/setup/assets/index.js
    any idea which part I got error? on the server setup or on my client route setup

  • @kambaalayashwanth123
    @kambaalayashwanth123 3 года назад +1

    app.get('*',function(req,res){
    res.sendFile(path.join(__dirname,'build','index.html'))
    })
    could be better ?

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

      I know this comment is old but I was following his tutorial and it kept giving me an error that "_dirname" is not defined, nothing would help but when I found your reply I added an extra "_" to the dirname like you did and now it works perfectly! Thank you so much!

  • @amirsaad8627
    @amirsaad8627 3 года назад +1

    Thnak you :)

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

    This works great, thank you!
    But I have a question. How can I get a module, in the backend folder, that is console.logging something like simple html to instead output it to the browser / react website / app.js?
    Do I need to use cors to connect the backend to the front end or is that already done in this tutorial and I'm just missing something simple? Thanks!

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

    could you please make a video on how to deploy it

  • @nachocodes
    @nachocodes 4 года назад +1

    Hello! the video starts with the "backend" folder already created, what do you put or install there? Amazing video!

  • @ethanjohnsrud6052
    @ethanjohnsrud6052 4 года назад +1

    Thanks so much, very helpful!!

  • @eklavyasharma
    @eklavyasharma 3 года назад

    Will it work on herokuapp

  • @jacobmaes3723
    @jacobmaes3723 4 года назад

    thank you

  • @VelizFrancia2012
    @VelizFrancia2012 4 года назад

    Is this some kind of server side rendering?

  • @voskangrigoryan4214
    @voskangrigoryan4214 3 года назад

    This video is great! But I have a question, I keep getting some errors about the app now reading the static files properly) How did you manage with those, since it's not really explained in the video

    • @dochimekashiariri7610
      @dochimekashiariri7610 3 года назад

      I guess app.use(express.static()) is used to serve static files.

  • @devshah4030
    @devshah4030 3 года назад

    great tutorial though the issue comes down to routes within ReactJs app. i.e. if you try to type in a specific URL within the browser to get to a specific page within the app, it will fail and same issue happens if you use any web proxy such as Nginx or Apache. All routes perfectly works in development env.

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

      ok, found the answer to this client side routing issues here in this SO post stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually?page=1&tab=votes#tab-top
      Add this to your nginx.conf or ssl.conf (depending upon how your site is hosted). It fixes all these client side routing issues.
      location / {
      if (!-e $request_filename){
      rewrite ^(.*)$ /index.html break;
      }
      }

    • @FullstackDevelopment
      @FullstackDevelopment  3 года назад +1

      @@devshah4030 Thanks and thanks for posting that info.

  • @brilliantcity
    @brilliantcity 3 года назад

    I don't think it is good for SEO because you need to show content on the view page source

    • @brilliantcity
      @brilliantcity 3 года назад

      @@charlesm.2604 thanks for your opinion

    • @brilliantcity
      @brilliantcity 3 года назад

      I think we can use node js only and JavaScript for client side instead of using react js that can be better.

  • @b7otato
    @b7otato 4 года назад

    fix your microphone it's too bassy and low

  • @ProgrammingwithPeter
    @ProgrammingwithPeter 5 лет назад

    I don't like how you present the "react js in express js" which is not that true since you can have just an API with express and consume it whoever you want,same goes for react app, you can use any api you want.

    • @FullstackDevelopment
      @FullstackDevelopment  5 лет назад

      This tutorial guidelines how Express can be used to serve a React app.

    • @ProgrammingwithPeter
      @ProgrammingwithPeter 5 лет назад

      @@FullstackDevelopment I know, just like I said,.. It's a good video!

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

    what the heck are you doing?😵😵