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 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?
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'
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
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”
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 :(
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
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 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??
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.
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?
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.
@@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, 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 ?
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.
Followed almost every website, but didn't work.
I followed your defined steps and its running.
Thank you, Sir
Thank you for this video.
i am facing the same issue of loading welcome page
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?
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.
subscribed! keep it up Enrico. helpful video.
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?
Subscribed, thank you a lot, I have finally fixed my problem with building, great tutorial
This is one of the best tutorial to learn how to deploy your app! Thank you so much for sharing this!!
Great tutorial, thank you.
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
Thank you for the great lesson!
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
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?
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
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
I love you Friend! New suscriber here!! :D
For every code changes in react js do we need to rebuild and restart nginx again and again.?
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
It shows the default nginx at the browser... kill me
me too
i want to add different port for different project dirs......how plz explain this too
Awesome and Helpful
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?
you are the best!
very good clarification
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
Great Video!
how can i deploy a reactjs project on the server if i have already the backend in the server
Thank you so much:)
only working for home page but when clicking another link it is not working
Thanks for video
Bro I'm new to linux just come for server part how should i give the root directory no idea
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 ?
Hi, npm run build was not working even after npm i
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
is this automatic deployment
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
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.
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?
can you make your terminal smaller XD
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
Great
thanks
Nice
I have 500 internal error. Anyone could help
same here im keep on getting the same error
bro have font size for ants
LOL
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