Nginx + React app with router+ Chrome = subfolders do not work - reactjs

Question

I have a react app running under nginx. App runs just fine and there are no problems.
Now, I have kibana and portainer running on the same server and I configured nginx to run them as a subfolder. The server have a security certificate and I can't really create new sub-domains. So I had to go with the subfolders.
server {
listen 80;
listen 443 ssl;
server_name api.nec.private.systems;
ssl_certificate /etc/ssl/api.nec.private.systems.crt;
ssl_certificate_key /etc/ssl/api.nec.private.systems.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
root /usr/share/nginx/html;
location / {
# Set path
try_files $uri /index.html;
}
# Do not cache sw.js, required for offline-first updates.
location /sw.js {
add_header Cache-Control "no-cache";
proxy_cache_bypass $http_pragma;
proxy_cache_revalidate on;
expires off;
access_log off;
}
location /control/ {
proxy_pass http://portainer:9000/;
add_header Cache-Control "no-cache";
proxy_cache_bypass $http_pragma;
proxy_cache_revalidate on;
expires off;
access_log off;
}
location /kibana/ {
proxy_pass http://kibana:5601/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
# proxy_cache_bypass $http_upgrade;
add_header Cache-Control "no-cache";
proxy_cache_bypass $http_pragma;
proxy_cache_revalidate on;
expires off;
access_log off;
}
}
As you can see the first two locations describe the react app and the last two are all about kibana and poratiner.
Now, here is the problem:
I would open google chrome and go to api.nec.private.systems/control - it would pull up portainer without any problems.
I would open api.nec.private.systems/kibana and would get kibana as expected.
I would open api.nec.private.systems/ and the react app with the react router would open.
Now, having done step #3 I would open api.nec.private.systems/kibana and it won't open kibana anymore, rather it would try to feed /kibana in my router. It WON'T open kibana at all. No matter how much I would try.
Step number X - clear cache of google chrome and try again - kibana and poirtainer works just fine. Until I'll open the react app.
Any ideas?

Answer 1

Ok, so I figured out my own problem here. It's all because of the service worker that comes with create-react-app. Basically, service worker trying to redirect all requests from the app to the local storage cache.
Killed the service worked and it started working fine.