How to serve both an API and a UI on the same domain using caddy

Question

I'm trying to get a UI and an API both on the same domain using caddy. So far I have tried these two approaches:

foo.local {
    reverse_proxy /api/* localhost:4000  
    root * /bar
    try_files {path} /index.html
    file_server 
}

In this instance foo.local doesnt redirect to my default 404 route from the UI, but also doesnt work as an api endpoint.

I have also tried 2 reverse proxies:

foo.local {
    reverse_proxy /* localhost:12102
    reverse_proxy /api/* localhost:4000  
}

In this instance, the /api route just returns a 404.

Any ideas as to how I can get this setup working?

Answer 1

Use route, it will be matched in order.

foo.local {
    route /api/* {
        reverse_proxy localhost:4000
    }
    route /* {
        root * /bar
        try_files {path} /index.html
        file_server
    }
}