24

I have create a simple Nginx config file to server an Angular like so:

server {
  listen 80;
  listen [::]:80;

  root /path/to/apps/myapp/current/dist;
  access_log /path/to/apps/myapp/current/log/nginx.access.log;
  error_log /path/to/apps/myapp/current/log/nginx.error.log info;

  index index.html;

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  location / {
    try_files $uri $uri/ =404;
  }
}

And all works fine as expected. because I'm using Angular UI Router, I'd like to forward all pages to index.html so Angular will take over (so a request to example.com/users/new will be redirect by Nginx to index.html, for Angular UI to handle it) for pages reloads, links, etc.

How can I achieve this?

I've playing around with options like:

server {
    #implemented by default, change if you need different ip or port
    #listen *:80 | *:8000;
    server_name test.com;
    return 301 $scheme://www.test.com$request_uri;
}

As specified in this answer. But I couldn't anything similar to work based on all requests.

Suggestions will be much appreciated.

3 Answers 3

36

You've nearly got it. try_files is the correct one to use, as Richard shows, you just needed to add your index.html in the list. However, there is no need to remove the =404 from the end, in fact, its better not to.

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

Once the above change is implemented, reload the config with sudo nginx -s reload

  • $uri will try the request as a file, if this fails, it moves to the next one.
  • $uri/ will try the request as a folder /index.html will then be tried, which sends all requests to your index.html where your angular app will be able to route things (also make sure you use html5mode to avoid the use of # in the url.
  • =404 will be your final fallback, basically saying: I've tried this as a file, folder, and via index.html. If index.html fails/does not exist for whatever reason, we will serve a 404 error.

Why =404?

If all goes well, the last one is never used, and routing will just try file, folder, angular app. And that would be it. But I see it as good practice to have the =404 on the end to cover all bases.

Important note about index.html catchall

Regardless of whether or not you use the =404 in try_files, by directing everything to index.html, you basically lose the ability to serve 404 errors from your webserver, unless index.html does not exist (which is where =404 comes in). This means that you will need to handle 'Not Found' urls and missing pages within Angular JS, and you need to be ok with the fact that the error page you use will return a HTTP 200 response, rather than 404. (This is because the moment you direct to the index.html, you've served a page to the user, thus 200).

For added reassurance on the above, google try_files angular js and you will find most examples incorporate =404.

References:

24

You need to add the router to the end of your try_files directive, like this:

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

See this document for more.

7
  • 1
    Unfortunately that didn't work. When I tried to reload the page or follow a link I got a 404 Commented Jan 29, 2016 at 17:18
  • This works, he probably just needed to restart nginx.
    – Justin
    Commented Feb 28, 2017 at 2:47
  • I'd say you need =404 on the end too, as a final fallback
    – redfox05
    Commented Nov 30, 2017 at 20:41
  • @redfox05 Try_files can only accept one default action as the last parameter. Use a response code or a URI not both. See link added to my answer. Commented Nov 30, 2017 at 21:12
  • I think you misunderstood my point. The =404 on the end is a final fallback. It will try each option in turn, and not go further if it succeeds. Best explained with an example. I'll add it as an answer.
    – redfox05
    Commented Dec 21, 2017 at 17:31
1
   location / {
         
           try_files $uri$args $uri$args/ index.html;
          
        }

This worked for me

0

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.