Deploy a React App using Nginx
ฝัง
- เผยแพร่เมื่อ 28 มิ.ย. 2024
- In this video, I will show how to deploy a React application on an EC2 Instance using Nginx. React applications are SPAs hence Nginx is a good option to serve static files. I will also show how to install Nginx and NodeJS on the EC2 Instance.
Once we have installed all the required modules, the next step is to clone the project, run the build script and start the Nginx Server.
Code: github.com/enricop89/react-ap...
00:00 Introduction
00:42 Create React App
01:07 Create React Routes
03:19 Create EC2 Instance
05:01 Install Nginx and NodeJS on the EC2 Instance
06:42 Clone the Repo and build the Project
09:15 Nginx Config explanation
12:53 Conclusion
If you want to learn more about DynamoDB and AWS Services, make sure to
subscribe to the channel:
TH-cam 🎥 - / @enricoportolan
🌎 Find me here:
Twitter - / enricop89 - วิทยาศาสตร์และเทคโนโลยี
Subscribed, thank you a lot, I have finally fixed my problem with building, great tutorial
subscribed! keep it up Enrico. helpful video.
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.
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.
Thank you for the great lesson!
This is one of the best tutorial to learn how to deploy your app! Thank you so much for sharing this!!
Followed almost every website, but didn't work.
I followed your defined steps and its running.
Thank you, Sir
Great tutorial, thank you.
Great Video!
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 ?
very good clarification
Awesome and Helpful
I love you Friend! New suscriber here!! :D
Thank you so much:)
you are the best!
Thanks for video
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?
th-cam.com/video/6CjbezdbB8o/w-d-xo.html Sure
i am facing the same issue of loading welcome page
Nice
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?
Great
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
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?
For every code changes in react js do we need to rebuild and restart nginx again and again.?
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
Latest node version isn't working (20) - any recommendations for specific node version to use?
i want to add different port for different project dirs......how plz explain this too
thanks
how can i deploy a reactjs project on the server if i have already the backend in the server
Bro I'm new to linux just come for server part how should i give the root directory no idea
It shows the default nginx at the browser... kill me
me too
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'
Hi, npm run build was not working even after npm i
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”
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
only working for home page but when clicking another link it is not working
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
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
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?
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 ?
can you make your terminal smaller XD
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
Thank you Enrico. Do you have a video for deploying the same app with docker?
Sure, check it out: th-cam.com/video/5lK_iFJsWv4/w-d-xo.html
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?
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: th-cam.com/video/CQ8vzm1kYkM/w-d-xo.html. Unfortunately some companies don't have the technology stack to deploy on S3 with Cloudfront and they prefer to use EC2 instances.
bro have font size for ants
LOL
try_files $uri /index.html -- that`s what we neeeeeeeeed !!! ) TY SOOO MA
Thanks! Redirecting the files to try_files $uri /index.html; fixed my Problem. Always got an 404-error.