Skip to content

Instantly share code, notes, and snippets.

@cjus
Last active July 12, 2023 14:59
Show Gist options
  • Select an option

  • Save cjus/b46a243ba610661a7efb to your computer and use it in GitHub Desktop.

Select an option

Save cjus/b46a243ba610661a7efb to your computer and use it in GitHub Desktop.
AngularJS Nginx and html5Mode
server {
server_name yoursite.com;
root /usr/share/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
@mateussmohamed

Copy link
Copy Markdown

Hi guys !
Just some information to supplement. I had trouble making the configuration mentioned by our friend, had to do a restart of the settings for her always applied.
I used the following commands after the implementation of configuration in nginx.conf

- sudo nginx -t

  • This command is used to check for problems in nginx configuration, when I tried to reload nginx me he was returning a failure, needed to run this command to test the settings.
      Reference: https://www.digitalocean.com/community/questions/service-nginx-restart-fail
  • sudo service nginx reload
    to recharge the settings
  • sudo service nginx restart
    stop restart the service nginx

Tks.

@dj2bee

dj2bee commented Apr 11, 2016

Copy link
Copy Markdown

Awesome! This saved me a lot of time.

@aarmora

aarmora commented Apr 22, 2016

Copy link
Copy Markdown

This is great and also saved me a lot of time. Well done!

@Codenator81

Copy link
Copy Markdown

Solve my problem on Angular 2

@benallamar

Copy link
Copy Markdown

Thx @rudeb0t, you saved my day 👍

@jpduckwo

jpduckwo commented Aug 3, 2016

Copy link
Copy Markdown

I'm running nginx locally with docker and needed to adjust the settings to this:

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
    }
...

@pulyaevskiy

Copy link
Copy Markdown

The example from @jpduckwo for Docker setup worked for me.

@rcshubhadeep

Copy link
Copy Markdown

Really helped me. Thanks 👍

@kentoj

kentoj commented Oct 10, 2016

Copy link
Copy Markdown

Thanks @jpduckwo for the try_files and @mato75 for the expires and cache configurations. My finished config looks like this:

server {
    listen       80;
    server_name  localhost;


    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
        try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
    }


}

And my Dockerfile looks like this:

# Dockerfile
#

FROM nginx:1.11.3-alpine
MAINTAINER Kent Johnson <my email@gmail.com>

COPY dist/ /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

@rbo13

rbo13 commented Nov 11, 2016

Copy link
Copy Markdown

How can I configure my nginx that ignores #? I've added html5mode to my js file, but if I refresh the page when I'm in /home I get a 404 not found error from nginx and if I will add #/home in the URL everything will be okay. How do I fix this one?

@SamuelMarks

Copy link
Copy Markdown

@jpduckwo $args did the trick, thanks

@semos

semos commented Dec 8, 2016

Copy link
Copy Markdown

@whaangbuu, nginx does not see the hash part, browsers never sends it. If you look into your logs, you won't see it.

@anandchakru

Copy link
Copy Markdown

@Whaangbuu, thats not an nginx issue, angular2 issue - refer the docs - change yours to PathLocationStrategy from HashLocationStrategy

@leonetosoft

Copy link
Copy Markdown

A solução funcionou para mim também.

@ChristianUlbrich

Copy link
Copy Markdown

@kentoj Your configuration works like a charm. Thanks! I have built a docker image based on it -> https://hub.docker.com/r/zalari/nginx-html5/

@kevinhowbrook

kevinhowbrook commented Mar 6, 2017

Copy link
Copy Markdown

Thanks @jpduckwo! and @ChristianUlbrich for the image

@pajingko

Copy link
Copy Markdown

@jpduckwo @ChristianUlbrich, they are Savior.
Thanks so much.

@mscoobby

Copy link
Copy Markdown

@cjus Thank you!

@psk11

psk11 commented Aug 12, 2017

Copy link
Copy Markdown

What about two angular apps?
`

    listen       80;
    server_name  localhost;


    location /app1 {
        root /usr/share/nginx/app1;
        index index.html index.htm;
    }

    location /app2 {
        root /usr/share/nginx/app2;
        index index.html index.htm;
    }

`

What will be the nginx configs for two angular apps deployed on same server with html5mode? The above example is working fine for hashbang url's but not for the former one.

@SamuelMarks

Copy link
Copy Markdown

@psk11 This worked for me:

location /site0 {
    try_files $uri$args $uri$args/ /index.html;
    root   /var/www/static/site0/dist;
    index  index.html index.htm;
}

location /site1 {
    try_files $uri$args $uri$args/ /index.html;
    root   /var/www/static/site1/dist;
    index  index.html index.htm;
}

@sumitramteke

Copy link
Copy Markdown

Thanks @jpduckwo, your solution works for me. I guess in gist there's no way to thumbs up.

@cescgie

cescgie commented Nov 28, 2017

Copy link
Copy Markdown

@cjus this saves my time

@clov0

clov0 commented Jan 17, 2018

Copy link
Copy Markdown

Really Helped
Thanks

@mattisebastian

Copy link
Copy Markdown

You guys saved me a lot of time, thank you!

@royge

royge commented Oct 25, 2018

Copy link
Copy Markdown

Thanks @jpduckwo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment