Deploy a React App using Nginx

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.

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:

🌎 Find me here:

[sergiyrudenko]

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.

[rankstrikers]

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?

[sgwong]

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.

[crazyvolt]

Followed almost every website, but didn't work.

I followed your defined steps and its running.

Thank you, Sir

[steelangelariana]

This is one of the best tutorial to learn how to deploy your app! Thank you so much for sharing this!!

[dmontesa]

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.

[ethangordon]

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?

[_Mandal_]

i am facing the same issue of loading welcome page

[thevolcanick]

subscribed! keep it up Enrico. helpful video.

[BP-qypb]

May I ask what's the difference between
react + express + nginx
vs
react + nginx?

[Klausenitzer]

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

[inhVanongFEFICHN]

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??

[User_jkjsbbk]

Subscribed, thank you a lot, I have finally fixed my problem with building, great tutorial

[breaker__]

Latest node version isn't working (20) - any recommendations for specific node version to use?

[mohitchandra]

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

[SSSWorldClass]

For every code changes in react js do we need to rebuild and restart nginx again and again.?

[uxmzoxj]

It shows the default nginx at the browser... kill me

[anonymoustv]

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

[asmaaat]

how can i deploy a reactjs project on the server if i have already the backend in the server

[smdjunaid]

i want to add different port for different project plz explain this too