Microservices and a React app:
Microservice 1: Service A
- Create a new directory for Service A.
- Inside the directory, create a
package.jsonfile:
{
"name": "service-a",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"express": "^4.17.1",
"cors": "^2.8.5"
}
}
- Run
npm installto install the dependencies. - Create an
index.jsfile:
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3001;
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ value: 5, service: 'A' });
});
app.listen(PORT, () => {
console.log(`Service A is running on port ${PORT}`);
});
- Run Service A with
node index.js.
Microservice 2: Service B
- Create a new directory for Service B.
- Inside the directory, create a
package.jsonfile:
{
"name": "service-b",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"express": "^4.17.1",
"cors": "^2.8.5"
}
}
- Run
npm installto install the dependencies. - Create an
index.jsfile:
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3002;
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ value: 7, service: 'B' });
});
app.listen(PORT, () => {
console.log(`Service B is running on port ${PORT}`);
});
- Run Service B with
node index.js.
React Frontend
- Create a new directory for the React frontend.
- Inside the directory, create a
package.jsonfile:
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"axios": "^0.24.0"
}
}
- Run
npm installto install the dependencies. - Create an
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('http://localhost:3001/api/data')
.then(response => setDataA(response.data))
.catch(error => console.error(error));
// Fetch data from Service B
axios.get('http://localhost:3002/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} (Service: {dataA.service})</p>
<p>Value from Service B: {dataB.value} (Service: {dataB.service})</p>
</div>
);
}
export default App;
- Run the React frontend with
npm start.
This example demonstrates how to create modular microservices and fetch data from both services in a React frontend. Adjust the code as needed based on your specific requirements and use case.
Top comments (0)