useEffect(() => { fetchUsers(); }, []);
return ( <div> <h1>Microservices User Management</h1> <form onSubmit={createUser}> <input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <input placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} /> <button type="submit">Add User</button> </form> <ul> {users.map(user => ( <li key={user._id}>{user.name} - {user.email}</li> ))} </ul> </div> ); }
Now the React app can make requests to http://localhost:5000/users instead of directly to each service. Sometimes services need to communicate without blocking the request-response cycle. Redis Pub/Sub is a lightweight solution. Example: When a user is created, notify the email service. In user-service (publisher):
// Proxy requests to services app.use('/users', createProxyMiddleware({ target: 'http://localhost:4001', changeOrigin: true, })); microservices with node js and react download
Introduction In modern web development, the microservices architecture has become a go-to approach for building scalable, maintainable, and resilient applications. When combined with Node.js for the backend and React for the frontend, you get a powerful, full-stack JavaScript solution.
const createUser = async (e) => { e.preventDefault(); await axios.post( ${API_GATEWAY}/users , { name, email }); fetchUsers(); setName(''); setEmail(''); };
res.status(201).json(newUser); });
app.post('/users', async (req, res) => { const newUser = new User(req.body); await newUser.save(); res.status(201).json(newUser); });
app.use('/orders', createProxyMiddleware({ target: 'http://localhost:4003', changeOrigin: true, }));
// Publish event await publisher.publish('user-created', JSON.stringify(newUser)); useEffect(() => { fetchUsers(); }, []); return (
version: '3.8' services: user-service: build: ./services/user-service ports: - "4001:4001" environment: - MONGO_URI=mongodb://mongo-users:27017/usersdb depends_on: - mongo-users mongo-users: image: mongo ports: - "27017:27017"
const subscriber = redis.createClient(); subscriber.subscribe('user-created', (message) => { const user = JSON.parse(message); console.log(`Send welcome email to ${user.email}`); // Integrate with email provider here }); 5.1 Create React App cd frontend npx create-react-app react-app cd react-app npm install axios 5.2 Fetch Data from the API Gateway src/App.js