DEV Community

Avinash Maurya
Avinash Maurya

Posted on

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"
  }
}
Enter fullscreen mode Exit fullscreen mode
  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}`);
});
Enter fullscreen mode Exit fullscreen mode
  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"
  }
}
Enter fullscreen mode Exit fullscreen mode
  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}`);
});
Enter fullscreen mode Exit fullscreen mode
  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"
  }
}
Enter fullscreen mode Exit fullscreen mode
  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;
Enter fullscreen mode Exit fullscreen mode
  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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay