I have two different React applications running through independent node servers. For instance, let's say I have two servers: http://localhost:4000, and http://localhost:5000. Both are running Node servers, which internally expose React applications.
http://localhost:4000 has a product listing application and http://localhost:5000 has a cart application both built using NodeJS & React.
Now on the first server, if the route is: http://localhost:4000/cart I want to consume the React application hosted on the other server (http://localhost:5000) I have added a route listener on the Node server running on 4000 port, and have configured a proxy for those routes:
const proxy = require('express-http-proxy');
const cartProxy = proxy('http://localhost:5000');
router.use('/cart', cartProxy);
On the cart application (running on port 5000), this is the express server config:
router.use(express.static(path.join(__dirname, "..", "build")));
router.get("/*", (req, res) => {
res.sendFile(path.join(__dirname, "..", "build", "index.html"));
});
This is internally getting me the correct HTML file (which is present on port 5000). However, the Javascript & CSS bundles are not fetched as the call to fetch them is made through port 4000 only (and not 5000). I believe the path is not correctly resolved. How can I configure the app (through webpack configuration or any other option) to access the bundle of the React app hosted on server running port 5000 from the server running on port 4000?
I am proxying the calls made on routes /cart
to the other server. But unable to fetch the CSS & JS bundles.