nginx loading CSS/JS incorrectly when navigating to routes with more than one slash

Question

I'm having an issue with nginx serving my static website files (CSS and JS) when you navigate to any route with more than one slash. For example, example.com/test works, but example.com/test/test will try and load the css/js from example.com/test/{.css|.js} instead of the root directory.

For context, I am using React and ReactRouter on this website.

nginx config

server {
    listen 80;

    server_name example.com;

    root /var/www/example.com;
    index index.html;

    rewrite ^.*$ /index.html;

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

Where do you specify the name of the CSS/JS file. You need to put a / in front. — Richard Smith
– Richard Smith, Commented Sep 18, 2020 at 15:34
Yep, that was the problem. I found the solution here: stackoverflow.com/questions/43191569/… — matthewdowns
– matthewdowns, Commented Sep 18, 2020 at 15:45

matthewdowns · Accepted Answer · 2020-09-18 15:46:37Z

1

Turns out it was html-webpack-plugin not putting a / in front of the assets because publicPath was not set in the output.

See answer here: html-webpack-plugin and webpack 2: no starting slash '/'

answered Sep 18, 2020 at 15:46

matthewdowns

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

nginx loading CSS/JS incorrectly when navigating to routes with more than one slash

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related