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!
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.
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.
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
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!
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!
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
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.
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; } }
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.
Thank you! Simple straight to the point no nonsense guide. Great work!
Thanks!
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!
You are welcome!
A tutorial where everything just works. Thank you so much
Very welcome!
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.
Thank you for this. It was really beneficial.
Perfect video, wasted my time with a couple others before finding this
Was having trouble deploying onto my Ubuntu server. This worked perfectly!
Yooo. Thanks a lot. I have been serching on how to do this for days.
You are welcome!
Thank you so much man! This was wonderful
Thanks a lot , I have been stuck with this for a long time until i saw this video :)
You are welcome!
the best video Ive ever seen.
You saved my life. Thank you so much
You are very welcome.
Thank you so much. This video was really helpful to me ;D
You are welcome!
Exactly what I needed, thank you.
This makes my project so much easier, thank you
You are welcome!
One I can say - that's it :)
Thank you bro!
Amazing video, just what I needed!
Glad it helped!
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.
thanks bro, it really helped me, keep up the good work
Thanks!
THANKS SO MUCH!!
I LOVE YOU, MY CODE NOW WORKS!!!
You can also define Proxy property in the package.json to avoid CORS problems by providing your front end url in there.
Thanks Dude!
Nice video, didnt fully work for me, but i still found parts of the video usefull
thanks a lot brother
Thank you!
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.
Sir for example in my frontend application there's having routes concept.how to Achieve that from nodejs server application. Any help appreciate!
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"
This looks extremely easy compared to other ways, does that causes a problem in the big project? It look very static
Hi nice and simple. Is there a way to watch react changes and build automatically. without launching manually the command?
How about rendering the pages using the express react view engine
i did the same but images are not loading from url but evrything works fine. please someone help! :(
Thanks a lot.
Welcome!
One problem occured, while refreshing the react page error is occurring. How to solve that?
What if I have a different route, I keep getting an internal serval error for different routes
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
app.get('*',function(req,res){
res.sendFile(path.join(__dirname,'build','index.html'))
})
could be better ?
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!
Thnak you :)
You are welcome
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!
could you please make a video on how to deploy it
Hello! the video starts with the "backend" folder already created, what do you put or install there? Amazing video!
its just an empty folder in the beginning
Yes like Sonal said
Thanks so much, very helpful!!
You are welcome!
Will it work on herokuapp
thank you
Is this some kind of server side rendering?
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
I guess app.use(express.static()) is used to serve static files.
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.
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;
}
}
@@devshah4030 Thanks and thanks for posting that info.
I don't think it is good for SEO because you need to show content on the view page source
@@charlesm.2604 thanks for your opinion
I think we can use node js only and JavaScript for client side instead of using react js that can be better.
fix your microphone it's too bassy and low
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.
This tutorial guidelines how Express can be used to serve a React app.
@@FullstackDevelopment I know, just like I said,.. It's a good video!
what the heck are you doing?😵😵