Deploy a React App using Nginx

[@crazyvolt1660]

Followed almost every website, but didn't work. I followed your defined steps and its running. Thank you, Sir

[@sergiyrudenko905]

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.

[@mnyandeni]

how did you give it the right permissions ?

[@_Mandal_]

i am facing the same issue of loading welcome page

[@User_jkjsbbk]

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

[@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.

[@thevolcanick]

subscribed! keep it up Enrico. helpful video.

[@sgwong513]

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.

[@1995taunus]

Thank you for the great lesson!

[@user-ux1mz9ox6j]

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

[@dancruz7845]

me too

[@steelangelariana]

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

[@d0m2288]

Great tutorial, thank you.

[@mohammadfalahi3369]

Awesome and Helpful

[@BP-qy2pb]

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

[@EnricoPortolan]

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”

[@njtuts5818]

very good clarification

[@agustinfeijoo1462]

you are the best!

[@ethangordon3935]

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?

[@jasonhumphrey2464]

Great Video!

[@rankstrikers9187]

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?

[@CharlyBGood11]

I love you Friend! New suscriber here!! :D

[@Mahesha999]

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?

[@EnricoPortolan]

kzbin.info/www/bejne/bHTNk5iwmcd1btE Sure

[@mihirdoshi1262]

Thank you so much:)

[@SanketPatil]

Thanks for video

[@tylertyler965]

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 :(

[@igorpostoev2077]

Same thing happening. Built locally

[@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

[@EnricoPortolan]

Hey, did you run nginx reload to have your changes applied? if you have a Github repo I can have a look

[@Klausenitzer]

@@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.

[@EnricoPortolan]

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

[@Klausenitzer]

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.

[@tanphan2899]

@@Klausenitzer I am also having the same problem as you

[@Rory-qu4cx]

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'

[@nidhityagi2076]

I am stuck on welcome page of nginx. /etc/nginx/sites-enabled/* already uncommented

[@anonymoustv8604]

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

[@nagarajkalakutagi5717]

Nice

[@DuyTran-ss4lu]

Great

[@smdjunaid1064]

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

[@mohitchandra2680]

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

[@amarjeetsingh5473]

only working for home page but when clicking another link it is not working

[@breaker__]

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

[@SSSWorldClass]

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

[@asmaaat6266]

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

[@bhargavitummala7690]

Hi, npm run build was not working even after npm i

[@yashtibrewal4259]

thanks

[@mdshadab3470]

Bro I'm new to linux just come for server part how should i give the root directory no idea

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

[@EnricoPortolan]

Have you added an A record on route 53 or on your DNS provider?

[@felipperian6710]

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?

[@grandioso6668]

you fix?

[@felipperian6710]

@@grandioso6668 no... Do you have the same problem?

[@grandioso6668]

@@felipperian6710 yeah

[@mathieugrosso93340]

hello ! i have followed the tutorial but when launching on ec2 instance i get "500 Internal Server Error" does any one know why ? Thanks !

[@patrickrios99]

x2

[@user-ux1mz9ox6j]

Hey man, ec2, ubuntu 22.04 LTS require permission to approach the folder ( in video ubuntu).......... I spent time a lot man

[@mnyandeni]

how did you fix the permission issue ?

[@Ben-pv9yh]

Why use an EC2? S3 with cloudFront is perfect for hosting static files. EC2 are so expensive

[@EnricoPortolan]

I totally agree with you, in fact I made a video about it: kzbin.info/www/bejne/eYKbp62jZtCMoa8. Unfortunately some companies don't have the technology stack to deploy on S3 with Cloudfront and they prefer to use EC2 instances.

[@srappytrex3946]

Why do we run "npm run build" then " npm i" then "npm run build" again?

[@EnricoPortolan]

Probably I said it by mistake, you need only npm install & npm run build

[@srappytrex3946]

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

[@balasubramaniam7904]

is this automatic deployment

[@private6117]

I have 500 internal error. Anyone could help

[@ayeshazahid2421]

same here im keep on getting the same error

[@jorgeramiroalarconvargas2580]

can you make your terminal smaller XD

[@simranbanwait]

bro have font size for ants

[@EnricoPortolan]

LOL

[@edchelstephens]

Thank you Enrico. Do you have a video for deploying the same app with docker?

[@EnricoPortolan]

Sure, check it out: kzbin.info/www/bejne/a52ukJx8f9iKrJY

[@vladislav_pikiner]

try_files $uri /index.html -- that`s what we neeeeeeeeed !!! ) TY SOOO MA

[@22lordnik22]

Thanks! Redirecting the files to try_files $uri /index.html; fixed my Problem. Always got an 404-error.