3

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.

10
  • When you say "I have no html file because it's a react App", do you mean you are executing webpack in your server ?
    – Vashnak
    Commented Jun 20, 2017 at 9:00
  • Did you create something to server your React JS files like express?
    – ickyrr
    Commented Jun 20, 2017 at 9:00
  • You need to run your React JS app on top of the express or any web server to make it work.
    – ickyrr
    Commented Jun 20, 2017 at 9:01
  • @Vashnak I have a script that generate the and index and all assets like js, css files etc. So I only have a index.html
    – Jean
    Commented Jun 20, 2017 at 9:02
  • And it doesn't work if you replace results.html by index.html ? By the way, the best way to do is to create a server to render your files (express for example)
    – Vashnak
    Commented Jun 20, 2017 at 9:03

2 Answers 2

5

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;
  }
}
1

This answer is the following of the comments in the question section.

App.js

const app = require('./app');

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}!`);
});

Server.js

const express = require('express');
const path = require('path');

const app = express();

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));

// I always return index.html, react-router takes control
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

module.exports = app;

Then in my nginx config I use proxy_pass 127.0.0.1:3000 But you can also delete nginx, and use directly the Port 80 in the App.js file. I keep nginx because I have multiple website in the same vps

2
  • I have a very similar setup, but am running into issues. When trying to access the served static files in build, index.html is being returned instead. Can you please post your entire nginx config? Thanks! Commented Jun 18, 2018 at 13:01
  • I recently made a new nginx config, you can find it here github.com/GreenCom-Networks/Franz-manager/blob/master/…
    – Vashnak
    Commented Jun 19, 2018 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.