Guide to Building a Production-Ready Microservice App: Step-by-Step with Node.js, React, Docker, and Azure

Hey fellow coders! I recently tried a fantastic microservice project at ashutoshkandpal89/microservice-app, and I’m pumped to share how I got it running. This full-stack app uses Node.js, React, MongoDB, Docker, and Azure, complete with CI/CD pipelines and monitoring via Prometheus and Grafana. It’s production-ready, scalable, and packed with developer-friendly features. In this guide, I’ll walk you through every step—cloning, running, testing, and deploying—with clear explanations, diagrams, and commands I ran in the terminal, with all the details you need to dive in. Let’s build something epic! 🚀

Why This Project is Awesome

This microservice app is a treasure for anyone learning modern architectures. It’s got:

• Backend: Node.js/Express API for user management.

• Frontend: React app with a responsive UI.

• Database: MongoDB with validation and pagination.

• Containerization: Docker and Docker Compose for consistency.

• CI/CD: GitHub Actions for automated testing and deployment.

• Cloud: Azure Kubernetes Service (AKS) and Container Instances.

• Monitoring: Prometheus, Grafana, and Loki for performance tracking.

I cloned it, ran it locally, and deployed it to Azure—it’s a blast! Let’s see how you can do the same.

🏗️ Project Architecture

The app is neatly organized into modular services. Here’s the structure from the GitHub README:

microservice/
├── backend/                 # Node.js/Express API
│   ├── config/             # Database and app settings
│   ├── controllers/        # API logic
│   ├── middleware/         # Security and validation
│   ├── models/             # MongoDB schemas
│   ├── routes/             # API endpoints
│   ├── server.js           # Main server
│   ├── Dockerfile          # Docker config
│   └── package.json        # Dependencies
├── frontend/               # React app
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── services/       # API calls
│   │   └── App.js          # Main React component
│   ├── public/             # Static files
│   ├── Dockerfile          # Docker config
│   └── package.json        # Dependencies
├── database/               # MongoDB setup
│   └── init/               # Data seeding scripts
├── deploy/                 # Azure deployment configs
│   └── azure/              # AKS and Container Instances
├── monitoring/             # Prometheus, Grafana, Loki
├── scripts/                # Automation scripts
├── .github/workflows/      # CI/CD pipeline
├── docker-compose.yml      # Service orchestration
└── docker-compose.monitoring.yml # Monitoring stack

Here’s a Mermaid diagram to visualize the flow:

graph TD
    A[Frontend<br>React<br>Port: 3001] -->|HTTP Requests| B[Backend<br>Node.js/Express<br>Port: 3000]
    B -->|MongoDB Queries| C[Database<br>MongoDB<br>Port: 27017]
    D[Docker Compose] --> A & B & C
    E[Monitoring<br>Prometheus/Grafana/Loki] --> B & C
    F[CI/CD<br>GitHub Actions] -->|Deploys| G[Azure<br>AKS/Container Instances]
    H[Scripts & Deploy] --> D & F

The frontend sends HTTP requests to the backend, which queries MongoDB. Docker ties it together, with monitoring and CI/CD for deployment.

✨ Killer Features

Here’s why I love this project:

• Database: MongoDB with Mongoose, supporting CRUD with pagination and data seeding.

• Backend: RESTful API with security (Helmet.js, rate limiting, Joi validation).

• Frontend: React 18 with hooks, responsive design, and real-time updates.

• Containerization: Docker containers with multi-stage builds for efficiency.

• CI/CD: GitHub Actions automates tests, security scans (Trivy), and deployments.

• Cloud: Azure AKS and Container Instances with auto-scaling.

• Monitoring: Prometheus for metrics, Grafana for dashboards, Loki for logs.

• Developer Experience: Hot reload, ESLint/Prettier, Jest tests, and handy scripts.

🛠️ Step-by-Step Setup with Warp Commands

Let’s get this app running! I’ll use commands I ran in Warp terminal, like /ls/ (from "frontend and backend.yaml") and Git pushes (from "t shoot microservice.yaml"). Each step includes a diagram for clarity.

Step 1: Clone and Check the Project

First, clone the repo and verify the structure.

Warp Command (from "frontend and backend.yaml"):
/ls/

This lists folders like backend/, frontend/, and docker-compose.yml.

Steps:

1. Clone the repo:
   /git clone https://github.com/ashutoshkandpal89/microservice-app.git/
   /cd microservice-app/

2. Check files:
   /ls/

You’ll see backend/, frontend/, database/, etc.

Diagram:

flowchart TD
    A[Start] --> B[/git clone https://github.com/ashutoshkandpal89/microservice-app.git/]
    B --> C[/cd microservice-app/]
    C --> D[/ls/]
    D --> E[See folders: backend/, frontend/, database/, etc.]

Step 2: Run Services Locally

You can run all services together or separately.

Option 1: Run All Together

Use the script to start backend, frontend, and MongoDB.

Warp Command:
/./start-services.sh/

This:

• Installs dependencies.

• Starts backend (http://localhost:3000), frontend (http://localhost:3001), and MongoDB (port 27017).

• Stops gracefully with Ctrl+C.

Option 2: Run Separately

• Backend:
  /cd backend/
  /npm install/
  /npm start/

• Frontend:
  /cd frontend/
  /npm install/
  /npm start/

Diagram:

flowchart LR
    A[Clone Repo] --> B{Choose Option?}
    B -->|Together| C[/./start-services.sh/]
    B -->|Separately| D[/cd backend && npm install && npm start/]
    D --> E[/cd frontend && npm install && npm start/]
    C --> F[Backend: 3000<br>Frontend: 3001<br>MongoDB: 27017]
    E --> F

Step 3: Develop with Hot Reload

For coding, enable hot reload to see changes instantly.

• Backend:
  /cd backend/
  /npm run dev/

• Frontend:
  /cd frontend/
  /npm start/

Use scripts for automation:
/./scripts/dev.sh setup/ # Install dependencies
/./scripts/dev.sh start/ # Start services
/./scripts/dev.sh logs/ # View logs

Step 4: Test the Application

Testing keeps bugs at bay.

• Backend Tests:
  /cd backend/
  /npm test/ # Unit tests
  /npm run test:watch/ # Watch mode

• Frontend Tests:
  /cd frontend/
  /npm test -- --coverage/

• Manual API Test:
  /curl -X POST http://localhost:3000/api/users -H "Content-Type: application/json" -d '{"name":"Test User","email":"test@example.com","age":25}'/

Diagram:

flowchart TD
    A[Run Services] --> B[Backend: /npm test/]
    B --> C[Frontend: /npm test -- --coverage/]
    C --> D[Manual: /curl POST /api/users/]
    D --> E[Verify responses]

Step 5: Containerize with Docker

Docker ensures consistency across environments.

Build Images:
/docker build -t microservice-backend ./backend/
/docker build -t microservice-frontend ./frontend/

Run Containers:
/docker run -d -p 3000:3000 --name backend microservice-backend/
/docker run -d -p 3001:8080 --name frontend microservice-frontend/

Or Use Docker Compose:
/docker-compose up --build/

Add Monitoring:
/docker-compose -f docker-compose.yml -f docker-compose.monitoring.yml up -d/

Access Grafana at http://localhost:3030 (admin/admin) for metrics like API response times.

Diagram:

flowchart LR
    A[Build Images] --> B[/docker build -t microservice-backend ./backend/]
    B --> C[/docker build -t microservice-frontend ./frontend/]
    C --> D{Choose Run?}
    D -->|Individual| E[/docker run -d -p 3000:3000 backend/]
    E --> F[/docker run -d -p 3001:8080 frontend/]
    D -->|Compose| G[/docker-compose up --build/]
    G --> H[Monitoring: /docker-compose -f docker-compose.monitoring.yml up -d/]
    F --> I[Access: localhost:3000, 3001, 3030]
    H --> I

Step 6: Set Up CI/CD with GitHub

Push changes to trigger the CI/CD pipeline.

Warp Command (from "t shoot microservice.yaml"):
/git remote add origin https://github.com/ashutoshkandpal89/microservice-app.git/
/git push -u origin main/

The pipeline:

• Runs tests and security scans (Trivy).

• Builds multi-arch Docker images.

• Deploys to staging, with manual approval for production.

Diagram:

flowchart TD
    A[Make Changes] --> B[/git add ./]
    B --> C[/git commit -m "Your message"/]
    C --> D[/git remote add origin .../]
    D --> E[/git push -u origin main/]
    E --> F[CI/CD: Tests, Scans, Build, Deploy]

Step 7: Deploy to Azure

Deploy to Azure Kubernetes Service (AKS).

Commands:
/az aks create --resource-group microservice-rg --name microservice-aks/
/az aks get-credentials --resource-group microservice-rg --name microservice-aks/
/kubectl apply -f deploy/azure/k8s-deployment.yml/
/kubectl get pods/
/kubectl get services/

Diagram:

flowchart LR
    A[Push Images] --> B[/az aks create .../]
    B --> C[/az aks get-credentials .../]
    C --> D[/kubectl apply -f k8s-deployment.yml/]
    D --> E[/kubectl get pods/services/]
    E --> F[App Live on Azure]

Step 8: Monitor and Troubleshoot

Start monitoring:
/docker-compose -f docker-compose.monitoring.yml up -d/

Access:

• Grafana: http://localhost:3030

• Prometheus: http://localhost:9090

• AlertManager: http://localhost:9093

Troubleshooting:

• Port Conflict:
  /lsof -ti:3000 | xargs kill/

• API Issues: Check /REACT_APP_API_URL/ in /frontend/.env/.

• Dependencies: Delete /node_modules/ and run /npm install/.

Production Checklist:

• Set env vars: /PORT=3000/, /NODE_ENV=production/, /MONGODB_URI/.

• Enable SSL, backups, and alerts (e.g., error rate >5%).

📚 API and Frontend Deep Dive

API Endpoints

Error Format:

{
  "success": false,
  "message": "Invalid email",
  "errors": [{"field": "email", "message": "Please enter a valid email address"}]
}

Frontend Features

• Dashboard: System health and user stats.

• User Management: Create, update, delete users.

• Responsive: Mobile and desktop-friendly.

• Real-Time: Auto-updates without refresh.

🌟 Final Thoughts

This project is a playground for learning microservices. I loved messing with Grafana’s dashboards and seeing the CI/CD pipeline in action. Clone it at ashutoshkandpal89/microservice-app, tweak it, or add features like Redis caching. Stuck? Drop a comment or find me on X. Let’s keep coding cool stuff! 😎

https://www.linkedin.com/in/ashutoshkandpal/

https://x.com/KandpalAshutosh

#microservices #nodejs #react #docker #azure #devops #webdevelopment #tutorial