How to send all these requests to the same file when I have an Angular state based router?

Server NGINX
1

I’m using the Angular ui-router which uses states to control the routes.

Meaning that all request should serve the same index.html file, and the
JavaScript worries about loading in appropriate content.

The .htaccess rules that control the same thing are below:

RewriteEngine On
# Required to allow direct-linking of pages so they can be
processed by
Angular
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index RewriteRule (.*) index.html [L]

I’m trying to achieve the same effect, but I’m serving content through
nginx. I tried to achieve this by adding the third location block in the
nginx config below, however, this didn’t seem to do the trick (404s). It
tries to catch all routes that are not /auth.

What am I missing here?

server {
listen 80 default_server;

root /var/www/..../dist;
index index.html index.html;

# Make site accessible from http://localhost/
server_name _;

location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;
    # Uncomment to enable naxsi on this location
    # include /etc/nginx/naxsi.rules
}

location /auth{
    proxy_pass http://auth;
}

location /^(?!auth$).* {
    try_files $uri  /var/www/..../dist/index.html;
}

}

Posted at Nginx Forum:

2

On Wed, Sep 02, 2015 at 01:37:49PM -0400, maplesyrupandrew wrote:

Hi there,

I’m using the Angular ui-router which uses states to control the routes.

Meaning that all request should serve the same index.html file, and the
JavaScript worries about loading in appropriate content.

From those words, and the Subject: line above, I’m not actually sure
what
it is that you want to do. “all requests to the same file” is one thing;
but does not seem to be what the rest of your mail implies.

The .htaccess rules that control the same thing are below:

RewriteEngine On
# Required to allow direct-linking of pages so they can be processed by
Angular
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index RewriteRule (.*) index.html [L]

I think that means “send the file, else send the directory index, else
send the fallback /index.html url”.

Is that correct?

Because if so, that’s what try_files is for.

I’m trying to achieve the same effect, but I’m serving content through
nginx. I tried to achieve this by adding the third location block in the
nginx config below, however, this didn’t seem to do the trick (404s). It
tries to catch all routes that are not /auth.

What am I missing here?

If you have “location /{}” and “location /auth{}”, then the first one
will match all requests that do not start “/auth”.

Your third location seems odd. (It’s a prefix location, since it does
not start with ~.)

index index.html index.html;

That line probably doesn’t do much useful.

server_name _;

That line probably doesn’t do much useful.

location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;

But you want “try as file, then as directory, then fall back to
/index.html”, no?

try_files $uri $uri/ /index.html;

}

location /auth{
    proxy_pass http://auth;
}

location /^(?!auth$).* {
    try_files $uri  /var/www/..../dist/index.html;
}

Remove that location{} altogether. It probably won’t do any harm, as it
is unlikely to match any request. But it is confusing.

f

Francis D. [email protected]

3

Thank you Francis - the “try” line was key :slight_smile:

Posted at Nginx Forum: