191

Using nginx, I want to preserve the url, but actually load the same page no matter what. I will use the url with History.getState() to route the requests in my javascript app. It seems like it should be a simple thing to do?

location / {
    rewrite (.*) base.html break;
}

works, but redirects the url? I still need the url, I just want to always use the same page.

2
  • 9
    Thanks for asking this question so the answer was ready for me :-)
    – Lasse Bunk
    May 7, 2016 at 20:38
  • You were almost there! 'rewrite ^ /base.html break;' should work, as pointed by @kolbyjack
    – d.popov
    Feb 13, 2021 at 14:59

6 Answers 6

232

I think this will do it for you:

location / {
    try_files /base.html =404;
}
3
  • 6
    Note -- this will first check for the file requested, and if it's not there, it will serve base.html. So make sure that you've got no old extra files sitting around in your document root directory, or they'll get served directly if queried. Aug 11, 2011 at 14:47
  • 25
    Using try_files '' /base.html; (empty string as the first argument to try_files) avoids the lookup of a file called $uri.
    – davidjb
    Mar 27, 2015 at 1:31
  • 21
    try_files '' /base.html; gave me a redirection problem and an internal server error, but modifying it to try_files '' /base.html =404; fixed that, if it helps anyone. Sep 25, 2015 at 12:35
41

Using just try_files didn't work for me - it caused a rewrite or internal redirection cycle error in my logs.

The Nginx docs had some additional details:

http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files

So I ended up using the following:

root /var/www/mysite;

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

location = /base.html {
    expires 30s;
}
2
  • 2
    try_files '' /base.html =404; (see above)
    – Marc
    Sep 14, 2017 at 8:17
  • This worked for me, but I actually did not need the location = /base.html { expires 30s } part.
    – maechler
    Sep 26, 2019 at 12:13
26

Your original rewrite should almost work. I'm not sure why it would be redirecting, but I think what you really want is just

rewrite ^ /base.html break;

You should be able to put that in a location or directly in the server.

0
21

This worked for me:

location / {
    try_files $uri $uri/ /base.html;
}
3
  • 1
    For a React application's production build, this works: try_files $uri $uri/ /index.html =404;. Why? Because the build comprises more other files, including static JavaScript and CSS files. Feb 12, 2021 at 8:03
  • @ParamSiddharth What about getting 404 on refresh Jul 31, 2022 at 16:53
  • How do you handle refreshing problem that gives 404 @Abhishek Jul 31, 2022 at 16:54
20

This worked for me:

location / {
    alias /path/to/my/indexfile/;
    try_files $uri /index.html;
}

This allowed me to create a catch-all URL for a javascript single-page app. All static files like css, fonts, and javascript built by npm run build will be found if they are in the same directory as index.html.

If the static files were in another directory, for some reason, you'd also need something like:

# Static pages generated by "npm run build"
location ~ ^/css/|^/fonts/|^/semantic/|^/static/ {
    alias /path/to/my/staticfiles/;
}
1
  • tks, this works for me, but the tailing slash at alias is important
    – Dan D.
    Mar 14, 2021 at 13:34
8

The correct way would be:

location / {
    rewrite (.*) base.html last;
}

Using last will make nginx find a new suitable location block according to the result of rewriting.

try_files is also a perfectly valid approach to this problem.

Your Answer

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

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