Backstage + Prometheus + Grafana Integration (Production Setup with Custom Plugin) | EduArn

 

 

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:

• createApp

• createFrontendModule

• EntityContentBlueprint

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 Official Website

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.