Thank you, Enrico! Great lesson! Works great. If someone has something that doesn't work, you can always debug it with Nginx logs. In my case, I had "/build" folder permission issues. Fixed it by giving the right permission.
really appreciate for this video. I been searching around for hours on web on how to serve react app but couldn't get it. (written the nginx try_files wrongly) really grateful about this video, it worked perfectly as I needed. Nice video with clear explanation.
I have a question for you. I deploy on server Ubuntu and domain points to IP addresses. If i type ip address on browser, it is Ok but no routing when i type domain. Can you explain??
I have followed your steps and configured. Page rendered but login api call is not working after npm run build. That means package.json proxy is working in react whole project but not work in build. Can you explain what the exact issue?
is it necessary to do npm install if I copy my build file directly from my machine to ec2? That seems like the only reason we need npm run build from it. my ec2 keeps freezing when I run npm run build, maybe the memory is too small :(
Sure, in react + express + nginx express is acting as the web server, serve the React app and nginx is routing the traffic to express. In the other configuration, nginx is serving react as a static file so it’s acting as a “web server”
For me, There is no code inside my root div. The files are being loaded in my Network tab and even sources. My favicon is being displayed properly but no code inside my root div
hey everything worked for me except the end result. I still just get the default Welcome to Nginx! Only thing I did differently was I did the create react app/create react routes last, would that have any affect? please let me know anything i can check
@@EnricoPortolan I did run the reload, i've just gone through it again but no luck. I did notice i did input the wrong root path during the last step, so corrected that but same result D: Might give the github repo thing a go but never used it.
The problem isn't running the app though, it works fine locally like at the start of the video. It's just the end result when you are going to the IP of the server. Mine still just points to the Nginx default page. Seems like there is an additional step to point nginx to use the react.conf insted of the default file? I'm really not sure.
what did you press to save the react.conf file i.e DOS Format, Mac Format, Append, Prepend, Backup files, to Files? Please tell we the command you used
Thanks! For anyone stuck on the Welcome Page - uncomment include /etc/nginx/sites-enabled/*, and anyone stuck on error 500 -> chmod +x each part of the path 'home/ubuntu/..../build'
Hey super thanks for this crisp video. Also, have you created video explaining starting application from subpath which you said you will at the end of this video?
I did everything that you explain. But, my server dont shows the react application. The server is showing a starter page called "Welcome to nginx!". Can you help me?
@@EnricoPortolan Thank you, this is indeed a very clear walk through, appreciate it alot pal! Yet I am still crying all over my error 500 after a night of testing T.T...could it be something related to that the npm start won't run in port 80?
I totally agree with you, in fact I made a video about it: ua-cam.com/video/CQ8vzm1kYkM/v-deo.html. Unfortunately some companies don't have the technology stack to deploy on S3 with Cloudfront and they prefer to use EC2 instances.
Thank you, Enrico! Great lesson! Works great.
If someone has something that doesn't work, you can always debug it with Nginx logs.
In my case, I had "/build" folder permission issues. Fixed it by giving the right permission.
how did you give it the right permissions ?
Followed almost every website, but didn't work.
I followed your defined steps and its running.
Thank you, Sir
really appreciate for this video. I been searching around for hours on web on how to serve react app but couldn't get it. (written the nginx try_files wrongly) really grateful about this video, it worked perfectly as I needed. Nice video with clear explanation.
i am facing the same issue of loading welcome page
Thank you for this video.
Is there a reason we don’t just point nginx to the build folder within our react application? Why make a new directory and copy?
This is one of the best tutorial to learn how to deploy your app! Thank you so much for sharing this!!
Thank you so much for this. I've tried so many tutorials but this was just so well explained and right for my app. Thank you again.
I have a question for you. I deploy on server Ubuntu and domain points to IP addresses. If i type ip address on browser, it is Ok but no routing when i type domain. Can you explain??
Have you added an A record on route 53 or on your DNS provider?
subscribed! keep it up Enrico. helpful video.
It shows the default nginx at the browser... kill me
me too
I have followed your steps and configured. Page rendered but login api call is not working after npm run build.
That means package.json proxy is working in react whole project but not work in build.
Can you explain what the exact issue?
is it necessary to do npm install if I copy my build file directly from my machine to ec2? That seems like the only reason we need npm run build from it. my ec2 keeps freezing when I run npm run build, maybe the memory is too small :(
Same thing happening. Built locally
i want to add different port for different project dirs......how plz explain this too
May I ask what's the difference between
react + express + nginx
vs
react + nginx?
Sure, in react + express + nginx express is acting as the web server, serve the React app and nginx is routing the traffic to express. In the other configuration, nginx is serving react as a static file so it’s acting as a “web server”
Latest node version isn't working (20) - any recommendations for specific node version to use?
For me, There is no code inside my root div. The files are being loaded in my Network tab and even sources. My favicon is being displayed properly but no code inside my root div
Thank you for the great lesson!
Subscribed, thank you a lot, I have finally fixed my problem with building, great tutorial
Great tutorial, thank you.
only working for home page but when clicking another link it is not working
how can i deploy a reactjs project on the server if i have already the backend in the server
For every code changes in react js do we need to rebuild and restart nginx again and again.?
hey everything worked for me except the end result. I still just get the default Welcome to Nginx!
Only thing I did differently was I did the create react app/create react routes last, would that have any affect?
please let me know anything i can check
Hey, did you run nginx reload to have your changes applied? if you have a Github repo I can have a look
@@EnricoPortolan I did run the reload, i've just gone through it again but no luck.
I did notice i did input the wrong root path during the last step, so corrected that but same result D:
Might give the github repo thing a go but never used it.
@@Klausenitzer ok another thing you can do is to check the difference between my repo and your code: github.com/enricop89/react-app-expressjs-nginx
The problem isn't running the app though, it works fine locally like at the start of the video. It's just the end result when you are going to the IP of the server. Mine still just points to the Nginx default page.
Seems like there is an additional step to point nginx to use the react.conf insted of the default file? I'm really not sure.
@@Klausenitzer I am also having the same problem as you
what did you press to save the react.conf file i.e DOS Format, Mac Format, Append, Prepend, Backup files, to Files? Please tell we the command you used
Thanks! For anyone stuck on the Welcome Page - uncomment include /etc/nginx/sites-enabled/*, and anyone stuck on error 500 -> chmod +x each part of the path 'home/ubuntu/..../build'
I am stuck on welcome page of nginx. /etc/nginx/sites-enabled/* already uncommented
I love you Friend! New suscriber here!! :D
Hi, npm run build was not working even after npm i
hello ! i have followed the tutorial but when launching on ec2 instance i get "500 Internal Server Error" does any one know why ? Thanks !
x2
Bro I'm new to linux just come for server part how should i give the root directory no idea
is this automatic deployment
Hey man, ec2, ubuntu 22.04 LTS require permission to approach the folder ( in video ubuntu).......... I spent time a lot man
how did you fix the permission issue ?
Awesome and Helpful
Hey super thanks for this crisp video. Also, have you created video explaining starting application from subpath which you said you will at the end of this video?
ua-cam.com/video/6CjbezdbB8o/v-deo.html Sure
you are the best!
very good clarification
I did everything that you explain. But, my server dont shows the react application. The server is showing a starter page called "Welcome to nginx!". Can you help me?
you fix?
@@grandioso6668 no... Do you have the same problem?
@@felipperian6710 yeah
Why do we run "npm run build" then " npm i" then "npm run build" again?
Probably I said it by mistake, you need only npm install & npm run build
@@EnricoPortolan Thank you, this is indeed a very clear walk through, appreciate it alot pal! Yet I am still crying all over my error 500 after a night of testing T.T...could it be something related to that the npm start won't run in port 80?
Thank you so much:)
Great Video!
can you make your terminal smaller XD
I have 500 internal error. Anyone could help
same here im keep on getting the same error
Why use an EC2? S3 with cloudFront is perfect for hosting static files. EC2 are so expensive
I totally agree with you, in fact I made a video about it: ua-cam.com/video/CQ8vzm1kYkM/v-deo.html. Unfortunately some companies don't have the technology stack to deploy on S3 with Cloudfront and they prefer to use EC2 instances.
Thanks for video
bro have font size for ants
LOL
Great
Nice
thanks
Thank you Enrico. Do you have a video for deploying the same app with docker?
Sure, check it out: ua-cam.com/video/5lK_iFJsWv4/v-deo.html
Thanks! Redirecting the files to try_files $uri /index.html; fixed my Problem. Always got an 404-error.
try_files $uri /index.html -- that`s what we neeeeeeeeed !!! ) TY SOOO MA