Another approach involves using a proxy server to route requests from the React app to the respective microservices. This can be achieved using a package like http-proxy-middleware.
Proxy Server
- Create a new directory for the proxy server.
- Inside the directory, create a
package.jsonfile:
{
"name": "proxy-server",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"express": "^4.17.1",
"http-proxy-middleware": "^1.0.6"
}
}
- Run
npm installto install the dependencies. - Create an
index.jsfile:
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
const PORT = 3000;
app.use('/serviceA', createProxyMiddleware({ target: 'http://localhost:3001', changeOrigin: true }));
app.use('/serviceB', createProxyMiddleware({ target: 'http://localhost:3002', changeOrigin: true }));
app.listen(PORT, () => {
console.log(`Proxy server is running on port ${PORT}`);
});
- Run the proxy server with
node index.js.
Microservice 1: Service A
Follow the steps mentioned in the first example to set up Service A.
Microservice 2: Service B
Follow the steps mentioned in the first example to set up Service B.
React Frontend
- Update the React frontend
package.jsonto include a proxy configuration:
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"axios": "^0.24.0"
},
"proxy": "http://localhost:3000"
}
- Update the
index.jsfile:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [dataA, setDataA] = useState({});
const [dataB, setDataB] = useState({});
useEffect(() => {
// Fetch data from Service A
axios.get('/serviceA/api/data')
.then(response => setDataA(response.data))
.catch(error => console.error(error));
// Fetch data from Service B
axios.get('/serviceB/api/data')
.then(response => setDataB(response.data))
.catch(error => console.error(error));
}, []);
return (
<div>
<h1>Microservices Example</h1>
<p>Value from Service A: {dataA.value}</p>
<p>Value from Service B: {dataB.value}</p>
</div>
);
}
export default App;
- Run the React frontend with
npm start.
This approach uses a proxy server to forward requests from the React app to the microservices. It allows you to centralize routing and manage CORS issues effectively. Adjust the code as needed based on your specific requirements and use case.
Top comments (0)