React site not loading for example.com/path

1. The problem I’m having:

I am trying to deply my React site (using Vite) to my public web server. It just shows a blank page and the console gives errors like: was not loaded because its MIME type, “text/html”, is not “text/css”. and was blocked because of a disallowed MIME type (“”).
I am not certain this is a Caddy issue, but I am trying to serve the site from Sermon Slides PNG Exporter, not the root eauclaireweb.dev. So I am wondering if have something set up wrong in my caddy config.

2. Error messages and/or full log output:

Only errors I’m seeing are in the console.

The stylesheet https://eauclaireweb.dev/assets/index-XrQuTA_x.css was not loaded because its MIME type, “text/html”, is not “text/css”.
Loading module from “https://eauclaireweb.dev/assets/index-8EqHQPGb.js” was blocked because of a disallowed MIME type (“”).
Loading failed for the module with source “https://eauclaireweb.dev/assets/index-8EqHQPGb.js”.

3. Caddy version:

v2.7.6 h1:w0NymbG2m9PcvKWsrXO6EEkY9Ru4FJK8uQbYcev1p3A=

4. How I installed and ran Caddy:

a. System environment:

Running Ubuntu 23.10, using systemd

b. Command:

`sudo systemctl reload caddy` etc

c. Service/unit/compose file:

n/a

d. My complete Caddy config:

eauclaireweb.dev/slidexporter {
        tls dmikester1@gmail.com.com

        handle {
                root * /var/www/html/slidexporter/prod

                try_files {path} /index.html

                encode gzip zstd

                file_server
        }

}

#eauclaireweb.dev {
#       tls dmikester1@gmail.com.com
#
#       handle {
#               root * /var/www/html/main

#               try_files {path} /index.html

#               encode gzip zstd

#               file_server
#       }
#}


5. Links to relevant resources:

The relevant logs we want to see are your Caddy logs.

Don’t do this – path matchers in the site address is deprecated and will soon be removed.

If you need to do path matching, move it to inside your site block.

Either way, this is only matching exactly /slidexporter and nothing else. You need to append a * to match more.

Also, remember that Caddy does not transform request paths when matching paths, you need to use handle_path or uri strip_prefix to strip a path prefix.

Thank you for the quick reply. So I’m understanding you…

If I want two seperate sites, one at eauclaireweb.dev and one at eauclaireweb.dev/slidexporter then my config should look like this?

eauclaireweb.dev {

  handle_path // match everything except /slidexporter ?? {
    root * /var/www/html/main
    try_files {path} /index.html
  }

  handle_path  /slidexporter/* {
    root * /var/www/html/slidexporter/prod
    try_files {path} /index.html
    encode gzip zstd
    file_server
  }
}

This would be handle {

A handle with no matcher acts as a fallback.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.