How to configure Caddy server for react-router

Question

What kind of Caddyfile configuration do I need to serve a react app (created with create-react-app) with react-router correctly? Basically, domain.com/app/ (this is the root of the app) should redirect to index.html, domain.com/app/sub should redirect to index.html (routing will be done on frontend by react-router), but then again for example domain.com/app/manifest.json should not redirect to anywhere since it's an actual file that needs to be served. Then there's also domain.com/app/static/ url which should be served as is.

My current Caddyfile:

domain.com/app {
        root /server/public/app
        rewrite / {
                to {path} /
        }
}

This kind of works, but it also redirects domain.com/app/manifest.json and all domain.com/app/static/ urls too.

How to tell Caddy to look for a file in the path and if it doesn't exist then redirect to the root? The docs imply this is how the rewrite block should work, but there is something wrong in my configuration file because it does not seem to work.

I have tried many examples already but they all also redirect the /static/ folder and manifest.json etc too.

score 7 · Answer 1 · answered Sep 01 '20 at 13:35

7

The directive you're looking for is try_files.

Rewrites the request URI path to the first of the listed files which exists in the site root. If no files match, no rewrite is performed.

In your case you need:

try_files {path} /index.html

answered Sep 01 '20 at 13:35

silviot

4,615
5
38
51

score 1 · Answer 2 · answered Apr 10 '22 at 09:39

This answer worked: https://stackoverflow.com/a/63688826/4615976 I also wanted to paste my whole configuration of Django + React app in here for future reference:

:443 {
    # django container running on the same host
    handle /api/* {
        reverse_proxy localhost:8080
    }
    # static files that django admin uses
    handle_path /django_static/* {
        root * /etc/caddy/html/django_static
        file_server
    }
    # react app 2
    handle_path /back_office/* {
        root * /etc/caddy/html/back_office
        file_server
        try_files {path} /index.html
    }

    # react app 1
    handle /* {
        root * /etc/caddy/html/oa
        file_server
        try_files {path} /index.html
    }

    header {
        # enable HSTS
        Strict-Transport-Security max-age=31536000;
        # disable clients from sniffing the media type
        X-Content-Type-Options nosniff
    }
    log {
        level info
        format console
    }
}

score 0 · Answer 3 · edited Oct 05 '19 at 14:40

0

I believe this is working as you expect, i was able to reproduce it, When you visit domain.com/app/manifest.json it returns a JSON file

edited Oct 05 '19 at 14:40

β.εηοιτ.βε

33,893
13
69
83

answered Oct 04 '19 at 23:27

Omar Mohammed

33
1
8

score 0 · Answer 4 · answered Jan 28 '20 at 14:36

I was just testing how to serve always index.html for BrowserRouter to work and ended up with the following Caddyfile:

/ {
  tls off
  gzip
  log stdout
  rewrite {
    to {file} index.html
  }
}

That way it will always try accessing files (scripts, styles, images...) before falling back to serving index.html

How to configure Caddy server for react-router

4 Answers4