git clone https://github.com/your-username/microservices-node-react.git cd microservices-node-react docker-compose up Building microservices with Node.js and React gives you a scalable, modern full-stack architecture. Node.js provides a lightweight runtime perfect for microservices, while React delivers a responsive, component-based user interface.
function App() { const [users, setUsers] = useState([]); const [name, setName] = useState(''); const [email, setEmail] = useState('');
const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); microservices with node js and react download
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> ); }
// Proxy requests to services app.use('/users', createProxyMiddleware({ target: 'http://localhost:4001', changeOrigin: true, })); git clone https://github
const createUser = async (e) => { e.preventDefault(); await axios.post( ${API_GATEWAY}/users , { name, email }); fetchUsers(); setName(''); setEmail(''); };
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): Sometimes services need to communicate without blocking the
useEffect(() => { fetchUsers(); }, []);