Microservices and a React app Part 1

Microservices and a React app:

Microservice 1: Service A

1. Create a new directory for Service A.
2. Inside the directory, create a package.json file:

{
  "name": "service-a",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1",
    "cors": "^2.8.5"
  }
}

1. Run npm install to install the dependencies.
2. Create an index.js file:

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}`);
});

1. Run Service A with node index.js.

Microservice 2: Service B

1. Create a new directory for Service B.
2. Inside the directory, create a package.json file:

{
  "name": "service-b",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1",
    "cors": "^2.8.5"
  }
}

1. Run npm install to install the dependencies.
2. Create an index.js file:

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}`);
});

1. Run Service B with node index.js.

React Frontend

1. Create a new directory for the React frontend.
2. Inside the directory, create a package.json file:

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "axios": "^0.24.0"
  }
}

1. Run npm install to install the dependencies.
2. Create an index.js file:

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;

1. 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.