Path Routing: Application Load Balancer for React Application

Question

I'm trying to create path routing in AWS application load balancer.

Example:

1. apple.mango.com/vault goes to instance1 port 80 and nginx routes it to /var/html/reactApp1/build/
2. apple.mango.com/flow goes to instance2 port 80 and nginx routes it to /var/html/reactApp2/build/

My configuration look something like this:

Also, for both /var/html/reactApp1/build/ and /var/html/reactApp2/build/, I have them hosted normally say mango.com and apple.com and they work just fine.

Problem Statement: When the application is visited via path routing like apple.mango.com/vault or apple.mango.com/flow it reaches the correct machines/root but fails to load the sites as expected.

Upon inspecting the blank page, it does not load the node-modules:

Where am I going wrong?

Answer 1

I know this question was asked since almost 2 years, but I think I found the solution, so even if it is not usefull now, it can be important in the near future:

In the rules of your load balancer you must enable one rule to allow redirect the traffic to your app when it try to search /static/... because that is the bundle.js created by react:

I hope this will be as useful for you as it has been for me.