Caddyfile - How to run multiple listeners under the same server?

Question

I am newbie to Caddy.
I have a system that has 2 servers, backend and frontend.
The frontend is a React app.
I want to use reverse proxies in caddy to direct requests coming from outside to my servers.
If I want to run only one server, let's say the frontend, I use a Caddyfile as the following, and it works properly

:2020 {
        reverse_proxy localhost:8092
}

i.e. The react app shows properly on the browser at the address: http://localhost:2020/

However, when I use the following Caddyfile

:2020 {
        reverse_proxy /frontend localhost:8092
        reverse_proxy /backend localhost:8093
}

and try to reach the frontend site, I could see the title on browser's tab, however, the frontend itself won't be loading.

I have took a look at the following question Caddyfile Subdomain with Multiple Proxies and tried to follow similar solution, however, that didn't work.

So my question is how to implement such a configuration.

Edit

I just noticed the following: The resources of my UI are loaded as expected using the first Caddyfile, however, they are missing in the second one!

Here I would add a second question to my previous one: Why some sources are missed using the second configuration?

Answer 1

Does the route of your frontend project contain /frontend, If yes, have you configured routing correctly in your frontend project?

:2020 {
        route /backend/* {
                reverse_proxy localhost:8093
        }
        route /* {
                reverse_proxy localhost:8092
        }
}