CODEWITHSUNDEEP
reactjsnginxdeploymentnginx-location
user10408806
user10408806

Reputation:

React Router V4 - 404 error on refresh - Nginx issue?

I have a problem with deploying React on my Nginx VPS server. I have a WordPress installation inside my root folder and the application inside the "my-app" folder.

When I first open my directory app loads, and I'm able to switch between components. But when I refresh the page I get a 404 page.

package.json: "homepage": "http://xxxxxx.com/my-app",

and App.js:

Locally with Mamp Pro, this works because I am using Apache. I have tried multiple settings from Google but nothing seems to works.

Who can help me out?

My nginx config:

upstream php-handler-http {
    server 127.0.0.1:9000;
    #server unix:/var/run/php5-fpm.sock;
}

server {
    listen 80 default_server;
    server_name xxxxxx.com;
    #server_name wordpress.example.com;

    root /var/www/html/;
    index index.php index.html;

    # set max upload size
    client_max_body_size 2G;
    fastcgi_buffers 64 4K;

    access_log /var/log/nginx/wordpress_http_access.log combined;
    error_log /var/log/nginx/wordpress_http_error.log;

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    location ~* \.(htaccess|htpasswd) {
        deny all;
    }

    location ~ \.php(?:$|/) {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_pass php-handler-http;
        fastcgi_read_timeout 60s;
    }

    # set long EXPIRES header on static assets
    location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ {
        expires 30d;
        access_log off;
    }

}

Upvotes: 0

Views: 2753

Answers (3)

Sachin Vairagi
Sachin Vairagi

Reputation: 5344

I had the same issue with Nginx and Ubuntu, fixed as follows -

Open the Nginx sites-available configuration file for your website

sudo nano /etc/nginx/sites-available/default

And change the location section to the following:

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

Note : In my case, I placed admin panel theme inside admin directory, like this - "/var/www/html/admin", so I have to use following -

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

Upvotes: 1

Tenza
Tenza

Reputation: 606

I would try this, set the package.json homepage to be "./my-app".

I found this to be helpful previously, since there is now client-side and server-side routing in your app: React-router urls don't work when refreshing or writing manually

Upvotes: 0

Matt Kuhns
Matt Kuhns

Reputation: 1368

I'm not a PHP back end programmer, but React routing doesn't work like client side routing in Angular (React-router urls don't work when refreshing or writing manually).

In Node, I generally add a catch all route that sends back the index, perhaps there is something similar in PHP:

app.get('*', function(req, res) {
    res.sendfile('./public/index.html');
});

Upvotes: 0

Related Questions