Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react router app on nginx server

I have a app, with two router home and results. In the home page I have to go to our authorization microservices and the return to my react app, to the result page, but the result.html file does not exist, because is a react app, so I get 404 error.

I'm trying the following config on my nginx:

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}

    # Any route that doesn't have a file extension (e.g. /devices)
    location / {
        try_files $uri $uri/ /results.html;
    }
}

but still not working. Any suggestion please.

like image 317
Jean Avatar asked Nov 21 '25 05:11

Jean


1 Answers

This how I solve this problem without using an expressjs server:

this is my nginx config file:

# pushState friendly!
# The setup:
#   * website name is `_`
#   * javascript app is located at `/app`

charset utf-8;

tcp_nopush on;
tcp_nodelay off;
client_header_timeout 10s;
client_body_timeout 10s;
client_max_body_size 128k;
reset_timedout_connection on;

gzip on;
gzip_types
    text/css
    text/javascript
    text/xml
    text/plain
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/rss+xml
    application/atom+xml
    font/truetype
    font/opentype
    image/svg+xml;

server {
  listen 80;
  server_name localhost;
  root /usr/share/nginx/html;


  # To make sure any assets can get through :)
  location / {
    try_files $uri @rewrites;
  }

  # If no asset matches, send it to your javascript app. Hopefully it's a route in the app!
  location @rewrites {
    rewrite ^(.+)$ /index.html last;
  }
}
like image 90
Jean Avatar answered Nov 22 '25 17:11

Jean