CODEWITHSUNDEEP
djangoreactjsdockernginxdocker-compose
EltraEden
EltraEden

Reputation: 111

Why sites served with nginx have no styling applied

I try to put build of react app on localhost/ using nginx. As far as i understand this, i need to build app with "npm run build" and then serve build dir with static content. After many hours i managed to get it into work with docker and my django service as a api under localhost/api/. But what is not working is css and js on this sites. On any page neither is it react or django endpoints there is only raw html with attached css but not working. After many attempts with changing configs etc. I ended with same raw html. Why on nginx there is no styling on sites even if with inspecting these pages there is linked css to them.
This is my nginx.conf

http {

  server {
  listen 80;
  listen [::]:80;
        root /var/www/html;
  server_name localhost;
         index index.html index.htm;
  location /api/ {
        proxy_pass "http://web:8000/";
}
  location / {
        include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
        root /var/www/html;
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }
}
}

This is part of docker-compose

  nginx:
    image: nginx:latest
    ports:
      - 80:80
      - 443:443
    volumes:
    - ./nginx_conf/:/etc/nginx/
    - ./frontend/build/:/var/www/html/
    depends_on:
      - web

When i run this app with npm start : image
When i enter localhost/ with nginx running : image

Upvotes: 2

Views: 1131

Answers (3)

Randall
Randall

Reputation: 2858

Actually only need to add one include for correct location.

In my case nginx.conf file looks like this.

events {}

http {

    server {

        listen 3000;
        add_header Access-Control-Allow-Origin: *;

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

            try_files $uri $uri/ /index.html;

            expires off;
            add_header Cache-Control "no-cache";
        }
    }
}

I add include inside of location block like this.

location / {
    # other configuration
    index index.html index.htm;
    include /etc/nginx/mime.types; # <- This line was added

    try_files $uri $uri/ /index.html;
    # other configuration
}

And everything worked.

Upvotes: 0

Vinh Lai
Vinh Lai

Reputation: 119

i add 2 include into server and it's worked: include /etc/nginx/mime.types; include /etc/nginx/conf.d/*.conf;

Upvotes: 1

EltraEden
EltraEden

Reputation: 111

Ok i don't understand why. But i was messing with inspector and i clicked by accident disable http cache AND bootstrap loaded!? I really have no idea how but now it works.

Upvotes: 1

Related Questions