React production using react-app-rewired nginx

Question

I have tried to deploy my app on heroku and it work normally. But when I build my app using react-app-rewired script and deploy it to my server using nginx. When access my app, it still work fine but if I reload page with contextPath: http://35.240.229.243/products it throws 404 error. You can access my app in http://35.240.229.243 to test. I am using react-router with history. Help me thanks

I dont use any conf. I just throw build folder to /usr/share/nginx/html — Duc Anh Pham, Nov 12 '18 at 06:41

score 1 · Accepted Answer · answered Nov 12 '18 at 08:52

First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default

sudo rm -rf /etc/nginx/sites-enabled/default

and create new file under /etc/nginx/sites-available/

sudo touch /etc/nginx/sites-enabled/default/redbox

and use vim or nano to put this text into new conf file redbox,

server {
        listen 80;

        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
}

and enable it

sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox

next, make sure that there are no syntax errors in Nginx files,

sudo nginx -t

If no problems were found, restart Nginx.

sudo systemctl restart nginx

Thanks. I already make it work correctly with `location / { try_files $uri /index.html; }` — Duc Anh Pham, Nov 12 '18 at 10:16

React production using react-app-rewired nginx

1 Answers1