Modern platform engineering teams need centralized observability directly inside their developer portals. In this guide, we build a production-ready integration between Backstage, Prometheus, and Grafana using the new Backstage frontend system. You’ll learn how to expose metrics, configure Prometheus scraping, create a custom entity tab, and display live monitoring data directly inside Backstage.
Backstage + Prometheus Integration (Production Setup)
Custom Plugin: Backstage & Prometheus
The environment is now in a good state.
The important part is verifying the environment and ensuring all services are healthy.
Environment Verification
Check Environment Details
echo "================ SYSTEM VERSIONS ================" && \
echo "NODE: $(node -v)" && \
echo "YARN: $(yarn -v)" && \
echo "NPM: $(npm -v)" && \
echo "TYPESCRIPT: $(yarn tsc -v)" && \
echo "BACKSTAGE CLI: $(yarn backstage-cli --version)" && \
echo "" && \
echo "================ REACT VERSIONS ================" && \
yarn why react && \
yarn why react-dom && \
echo "" && \
echo "================ BACKSTAGE PACKAGE VERSIONS ================" && \
yarn backstage-cli versions && \
echo "" && \
echo "================ FRONTEND SYSTEM CHECK ================" && \
grep -R "createApp" packages/app/src/App.tsx && \
echo "" && \
echo "================ BACKEND HEALTH ================" && \
curl -I http://localhost:7007 || true && \
echo "" && \
echo "================ FRONTEND HEALTH ================" && \
curl -I http://localhost:3000 || true && \
echo "" && \
echo "================ PROMETHEUS HEALTH ================" && \
curl http://localhost:9090/api/v1/query?query=up || true && \
echo "" && \
echo "================ GRAFANA HEALTH ================" && \
curl -I http://localhost:3010 || true && \
echo "" && \
echo "================ DUPLICATE PACKAGE CHECK ================" && \
yarn dedupe --check || true
Component Status
| Component | Status |
|---|---|
| Node 22 | OK |
| Yarn 4.4.1 | OK |
| TypeScript 5.8 | OK |
| React 18 | OK |
| Prometheus | OK |
| Metrics Endpoint (3010) | OK |
| Backstage Backend | OK |
| Backstage Frontend (3000) | OK |
Goal
Integrate:
Backstage
Prometheus
Grafana
Custom Frontend Plugin
Entity-level Metrics Visualization
Prometheus Service Setup
STEP 1 — Install Prometheus
Update Packages
sudo apt update
Install Prometheus
sudo apt install prometheus -y
Verify Installation
prometheus --version
Enable and Start Service
sudo systemctl enable prometheus
sudo systemctl start prometheus
Check Status
sudo systemctl status prometheus
STEP 2 — Open Prometheus UI
http://YOUR_SERVER_IP:9090
Example:
http://192.168.1.10:9090
STEP 3 — Configure Prometheus
Edit Configuration
sudo vi /etc/prometheus/prometheus.yml
Replace With
global:
scrape_interval: 5s
scrape_configs:
- job_name: 'prometheus'
static_configs:
- targets: ['localhost:9090']
- job_name: 'demo-service'
metrics_path: /metrics
static_configs:
- targets: ['localhost:3010']
Restart Prometheus
sudo systemctl restart prometheus
Verify
curl http://localhost:9090/api/v1/query?query=up
STEP 4 — Install Node.js
sudo apt install nodejs npm -y
Verify
node -v
npm -v
STEP 5 — Create Demo Service
Create Project
mkdir ~/demo-service
cd ~/demo-service
Create package.json
vi package.json
Paste
{
"name": "demo-service",
"version": "1.0.0",
"main": "server.js",
"dependencies": {
"express": "^4.18.2",
"prom-client": "^15.1.0"
}
}
Install Dependencies
npm install
STEP 6 — Create Metrics Server
Create File
vi server.js
Paste
const express = require('express');
const client = require('prom-client');
const app = express();
client.collectDefaultMetrics();
const counter = new client.Counter({
name: 'demo_requests_total',
help: 'Total requests',
});
app.get('/', (req, res) => {
counter.inc();
res.send('Hello from monitored service');
});
app.get('/metrics', async (req, res) => {
res.set('Content-Type', client.register.contentType);
res.end(await client.register.metrics());
});
app.listen(3010, () => {
console.log('Demo service running on port 3010');
});
Run Service
node server.js
Test Metrics
http://YOUR_SERVER_IP:3010/metrics
You should see Prometheus metrics output.
End Prometheus Service Setup
Plugins Integration
Architecture
Backstage Entity Page
↓
Custom Prometheus Tab
↓
Loads metrics from Prometheus:9090
↓
Reads metrics from app:3010
You are using the NEW Frontend System, which changes how plugins are added.
Final Working Architecture
packages/app/src/
│
├── App.tsx
├── components/
│ └── prometheus/
│ └── PrometheusPage.tsx
│
└── modules/
└── prometheus/
└── index.tsx
STEP 1 — Install Required Packages
From Backstage root:
yarn --cwd packages/app add \
@backstage/plugin-catalog-react \
@backstage/frontend-plugin-api \
@material-ui/core \
recharts
STEP 2 — Create Prometheus Component
Create Directory
mkdir -p packages/app/src/components/prometheus
STEP 3 — Create PrometheusPage.tsx
Create File
cat > packages/app/src/components/prometheus/PrometheusPage.tsx <<'EOF'
import { useEffect, useState } from 'react';
import {
Card,
CardContent,
Typography,
} from '@material-ui/core';
export const PrometheusPage = () => {
const [metrics, setMetrics] = useState<any[]>([]);
useEffect(() => {
fetch(
'http://localhost:9090/api/v1/query?query=up',
)
.then(res => res.json())
.then(data => {
setMetrics(data.data.result || []);
})
.catch(console.error);
}, []);
return (
<Card>
<CardContent>
<Typography variant="h5">
Prometheus Metrics
</Typography>
{metrics.map((metric, index) => (
<div key={index} style={{ marginTop: 20 }}>
<Typography variant="body1">
Job: {metric.metric.job}
</Typography>
<Typography variant="body2">
Instance: {metric.metric.instance}
</Typography>
<Typography variant="body2">
Status: {metric.value[1]}
</Typography>
</div>
))}
</CardContent>
</Card>
);
};
EOF
STEP 4 — Create Frontend Module
Create Folder
mkdir -p packages/app/src/modules/prometheus
STEP 5 — Create index.tsx
Create File
cat > packages/app/src/modules/prometheus/index.tsx <<'EOF'
import { createFrontendModule } from '@backstage/frontend-plugin-api';
import {
EntityContentBlueprint,
} from '@backstage/plugin-catalog-react/alpha';
export const prometheusModule = createFrontendModule({
pluginId: 'catalog',
extensions: [
EntityContentBlueprint.make({
name: 'prometheus-tab',
params: {
path: '/prometheus',
title: 'Prometheus',
loader: async () => {
const { PrometheusPage } = await import(
'../../components/prometheus/PrometheusPage'
);
return <PrometheusPage />;
},
},
}),
],
});
EOF
STEP 6 — Update App.tsx
Your current App.tsx:
import { createApp } from '@backstage/frontend-defaults';
This is GOOD.
Replace With
import { createApp } from '@backstage/frontend-defaults';
import catalogPlugin from '@backstage/plugin-catalog/alpha';
import { prometheusModule } from './modules/prometheus';
export default createApp({
features: [
catalogPlugin,
prometheusModule,
],
});
STEP 7 — Create Entity YAML
Create File
cat > examples/demo-entities.yaml <<'EOF'
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: demo-service
description: Demo monitored service
links:
- url: http://localhost:3010
title: Metrics App
- url: http://localhost:9090
title: Prometheus UI
spec:
type: service
lifecycle: production
owner: guests
EOF
STEP 8 — Add Entity to app-config.yaml
Edit File
vi app-config.yaml
Add
locations:
# Local example data
# File locations are relative to the backend process
- type: file
target: ../../examples/entities.yaml
- type: file
target: ../../examples/demo-entities.yaml
STEP 9 — Start Backstage
yarn start
Expected Services
| Service | Port |
|---|---|
| Frontend | 3000 |
| Backend | 7007 |
STEP 10 — Verify Frontend
curl http://localhost:3000
Should return HTML.
STEP 11 — Register Entity
Open:
http://localhost:3000/catalog-import
Choose:
Register Existing Component
Use:
https://raw.githubusercontent.com/YOUR_REPO/main/demo-entities.yaml
Or use a local file.
STEP 12 — Open Entity
Go to:
Catalog → demo-service
You should now see:
Overview | Prometheus
STEP 13 — Open Prometheus Tab
The tab loads:
http://localhost:9090/api/v1/query?query=up
Displays:
demo-service
localhost:3010
localhost:9090
node exporter
Outcome for above steps
You now have:
Prometheus collecting metrics
A monitored Node.js service
Backstage custom entity tab
Live Prometheus metrics inside Backstage
Frontend module using the NEW Backstage frontend system
Production-ready plugin architecture
Frequently Asked Questions (FAQ)
1. What is Backstage?
Backstage is an open-source developer portal platform created by Spotify. It helps organizations manage software catalogs, developer tools, documentation, CI/CD integrations, monitoring systems, and internal developer workflows from a single platform.
2. Why integrate Prometheus with Backstage?
Integrating Prometheus with Backstage allows developers and platform teams to view application health, uptime, and metrics directly inside the developer portal without switching between multiple monitoring tools.
3. What is the benefit of adding Grafana?
Grafana provides advanced dashboards and visualization capabilities. While Prometheus collects metrics, Grafana helps display those metrics using charts, graphs, alerts, and operational dashboards.
4. Why use a custom Backstage plugin instead of built-in integrations?
A custom plugin gives complete flexibility to:
Display organization-specific metrics
Build custom dashboards
Integrate internal APIs
Create custom tabs for entities
Support production workflows
Extend monitoring capabilities
5. Which Backstage frontend system is used in this guide?
This guide uses the NEW Backstage frontend system based on:
createAppcreateFrontendModuleEntityContentBlueprint
This is the modern recommended architecture for Backstage plugins.
6. Which versions are recommended?
Recommended versions:
| Component | Recommended Version |
|---|---|
| Node.js | 22+ |
| Yarn | 4+ |
| React | 18 |
| TypeScript | 5.8+ |
| Backstage | Latest Stable |
| Prometheus | Latest Stable |
| Grafana | Latest Stable |
7. Can this setup run in Kubernetes?
Yes.
This setup can be deployed on:
Kubernetes
Docker
Virtual Machines
Bare Metal Servers
Cloud Platforms (AWS, Azure, GCP)
Prometheus and Grafana are commonly deployed using Helm charts in Kubernetes environments.
8. Is this architecture production-ready?
Yes.
This architecture supports:
Production monitoring
Platform engineering
Internal developer portals
Service observability
Multi-service metrics
Enterprise plugin development
Additional enterprise hardening may include:
Authentication
RBAC
HTTPS
Reverse proxy
Service discovery
Alerting systems
9. Can Grafana dashboards also be embedded into Backstage?
Yes.
Grafana dashboards can be integrated into Backstage using:
iFrame embedding
Custom frontend plugins
Grafana APIs
Existing Backstage Grafana plugins
10. How does Prometheus collect metrics?
Prometheus periodically scrapes metrics endpoints exposed by applications.
Example:
http://localhost:3010/metrics
Applications expose metrics using libraries like:
prom-client (Node.js)
Micrometer (Java)
Prometheus client_python
Go Prometheus client
11. What are the common use cases of this setup?
Common use cases include:
Internal Developer Portals
DevOps Dashboards
SRE Monitoring
Kubernetes Platform Monitoring
Microservices Health Tracking
API Monitoring
CI/CD Observability
Enterprise Platform Engineering
12. Can multiple services be monitored?
Yes.
Prometheus can scrape metrics from multiple services simultaneously by adding multiple targets inside:
scrape_configs:
13. Is Grafana mandatory?
No.
Prometheus alone is sufficient for metrics collection.
Grafana is optional but highly recommended for:
Visualization
Alerting
Dashboarding
Executive monitoring views
14. Can this be integrated with cloud-native environments?
Yes.
This setup works well with:
Kubernetes
Docker Swarm
OpenShift
AWS ECS
Azure AKS
Google GKE
15. Is this suitable for enterprise platform engineering teams?
Yes.
Many enterprises use Backstage with observability integrations to create centralized developer platforms for:
Monitoring
Documentation
Service ownership
Deployment visibility
Operational excellence
Training & Learning Support by EduArn
How EduArn Delivers This Training
EduArn provides comprehensive training programs for:
Individuals
Engineering students
DevOps professionals
Platform engineers
Corporate teams
Enterprise organizations
Training Delivery Modes
1. Online Live Training
Instructor-led live online sessions covering:
Backstage
Prometheus
Grafana
Kubernetes
DevOps
Platform Engineering
Cloud Native Monitoring
Features:
Live mentoring
Hands-on labs
Real-world projects
Recorded sessions
Interview preparation
Production use cases
2. Offline Classroom Training
EduArn also conducts classroom-based offline training programs for:
Colleges
Enterprises
Corporate offices
Training centers
Includes:
Lab setup
Instructor-led workshops
Infrastructure deployment
Enterprise case studies
Team-based implementation exercises
3. Corporate Training Programs
EduArn provides customized corporate training solutions for organizations.
Corporate batches can include:
Beginner to advanced learning paths
Customized curriculum
Internal infrastructure setup
Kubernetes observability
Backstage platform engineering
Monitoring & SRE practices
CI/CD integrations
Enterprise plugin development
Training can be delivered:
Online
Onsite
Hybrid model
EduArn LMS Platform
Free LMS Access for Learners
EduArn LMS provides free learning access for learners.
Features include:
Course materials
Video sessions
Assignments
Practice labs
Notes
Interview questions
Project documentation
Certification preparation
Recorded sessions
Technologies Covered in EduArn Programs
EduArn training programs may include:
Backstage
Prometheus
Grafana
Kubernetes
Docker
Jenkins
GitHub Actions
Terraform
AWS
Azure
GCP
Linux
DevOps
SRE
Platform Engineering
Monitoring & Observability
Who Should Learn This?
Recommended for:
DevOps Engineers
Platform Engineers
SRE Engineers
Cloud Engineers
Software Developers
Infrastructure Engineers
Monitoring Teams
Enterprise Architects
Students interested in Cloud & DevOps
Final Note
Modern organizations are increasingly adopting platform engineering and centralized observability solutions. Learning Backstage, Prometheus, and Grafana together provides strong practical skills for building scalable internal developer platforms and production monitoring systems.
