3

I am setting up nginx to work with a React SPA. The page loads fine when I do not include a variable path (/rsvp/). But when I try (/rsvp/S0mEtH1NG), it will download the index, manifest, css files... but it doesn't actually apply those things to the index.html. I pretty much just see my index.html with nothing actually loaded.

My config looks something like this: 

server {
    listen 80;
    server_name something.com;

    location / {
        root /srv/something.com/webroot;
        index index.html;
    }

    location /rsvp {
        alias /srv/rsvp/build;
        try_files $uri $uri/ /rsvp/index.html;
    }
}

If I have try_files $uri $uri/ /index.html, it will load the index.html of the root (/) but with a similar issue in that it doesn't use any of the css.

Thanks for help, its much appreciated!

RollinRight
  • 105
  • 1
  • 8

1 Answers1

2

There is a long standing issue with alias and try_files. I would avoid using those directives within the same block. Try:

location /rsvp {
    alias /srv/rsvp/build;
    if (!-e $request_filename) { rewrite ^ /rsvp/index.html? last; }
}

See this caution on the use of if.

Richard Smith
  • 45,711
  • 6
  • 82
  • 81
  • Hmm... still no luck. My index.html gets loaded in both cases and the other files appear to download fine when looking at the network tab. It just doesn't apply the javascript or css. Do you think this may not be a nginx error? Everything works fine though when I navigate to /rsvp/ just not /rsvp/*. – RollinRight Jul 26 '17 at 21:31
  • Yeah, looks like it was an issue with the react router. Went ahead and marked answer correct though for alias/try_files knowledge. Thank you. – RollinRight Jul 26 '17 at 22:17
  • the `alias` directive cannot be used inside the named location block – AamirR Sep 28 '21 at 13:27
  • This is a limitation of `alias` directive, so that was my case, not that something wrong with the answer. However, I did a positive vote on your answer. – AamirR Sep 29 '21 at 09:02
  • Use `root` rather than `alias` in a named `location`. Otherwise, post the details of the problem and your configuration as a new question. Thanks @AamirR – Richard Smith Sep 29 '21 at 09:06
  • I have a `root` clause directly in `server` block, and I need to override that `root` in named `location` block, using `root` did not work either. – AamirR Sep 29 '21 at 09:10