Building an Azure CI/CD Dashboard: Errors, Solutions, and Lessons Learned

In my journey to build a meaningful Azure CI/CD dashboard as part of my product-led platform, I faced several technical challenges and errors along the way. These obstacles became valuable learning experiences that helped me deepen my understanding of React development, npm, and continuous integration workflows. This blog post walks you through some common errors I encountered, how I diagnosed and fixed them, and the overall significance of these steps in delivering a functional dashboard.

Setting Up the React Project
I started with a React frontend intended to visualize CI/CD pipeline statuses, infrastructure deployment states, and user management info. The idea was to build a dashboard that clearly communicated the progress and health of a cloud-native product development environment.

Initially, I ran the following command to start the development server:

npm start

However, I immediately ran into an error:

npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/workspaces/azure-terraform-setup/package.json

This meant that npm could not find the package.json file in my current directory. Since package.json is essential for npm to manage dependencies and scripts, this error stopped me in my tracks.

Solution: Navigate to the Correct Directory
Upon inspecting my project structure, I realized that my React frontend was inside a frontend folder. The root directory didn't contain the package.json file, but frontend did. So I changed directory:


cd frontend

Then I ran:

npm start`

Solution: Navigate to the Correct Directory
Upon inspecting my project structure, I realized that my React frontend was inside a frontend folder. The root directory didn't contain the package.json file, but frontend did. So I changed directory:

bash
cd frontend
Then I ran:

npm install
npm start

This correctly started the React development server.

Missing index.js File Error
Once inside the frontend directory, I was greeted with a new error after running npm start:

Could not find a required file.
Name: index.js
Searched in: /workspaces/azure-terraform-setup/frontend/src

This error indicated that React’s build tools could not locate the entry point of the application — the index.js file inside the src folder.

Solution: Create the src Directory and Entry File
I checked and found that the src folder was missing. So I created it:


mkdir src
Then I created index.js inside src with basic ReactDOM rendering code:

`import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();`

This told React where to start rendering my components. Once I saved this, the npm start command successfully launched the app.

Syntax Errors in App.js
During development, I wrote a React component called App.js to display my dashboard. However, I encountered a Babel parser error:

SyntaxError: /workspaces/azure-terraform-setup/frontend/src/App.js: Identifier 'React' has already been declared.

This usually means I had imported React multiple times in the same file.

Solution: Remove Duplicate Imports
I reviewed App.js and found that import React from 'react'; was declared twice. Removing the duplicate import fixed the error immediately.

I also faced another syntax issue:

SyntaxError: Missing semicolon. (67:3)

Surprisingly, I had mistakenly included a command like npm start inside my App.js file as if it were code, causing a syntax error.

Solution: Clean up Code and Remove Erroneous Commands
I carefully scanned my App.js and deleted any non-code commands mistakenly placed inside the file. This allowed Babel to parse and compile the file without issues.

Dashboard Rendering the Same Content Repeatedly
Initially, my React dashboard component was rendering the exact same information block five times, which wasn’t the intended behavior. I wanted to show multiple different information blocks such as infrastructure status, build status, and user management.

Solution: Use an Array of Data Objects to Render Multiple Info Blocks
I created a constant array infoBlocks with multiple objects, each representing a different dashboard section:

const infoBlocks = [
{
title: "🚀 Azure CI/CD Platform",
description: "Welcome to your product dashboard.",
items: [
"✅ Infrastructure deployed with Terraform",
"✅ GitHub Actions connected",
"🧪 Add environments, users, or services here",
],
},
{
title: "🔧 Build Status",
description: "Check your latest builds.",
items: [
"✅ Last build passed",
"⏳ 2 builds in queue",
"❌ 1 failed build needs review",
],
},
{
title: "👥 User Management",
description: "Manage your team and permissions.",
items: [
"🟢 12 active users",
"🔒 3 pending invitations",
"🛠️ Admin roles assigned",
],
},
];

Then, inside the App component, I mapped over this array to render distinct content blocks instead of repeating the same one.

This approach made the dashboard much more meaningful and visually informative.

Encountering Development Build Warnings
When I ran the app in development mode, the terminal showed:

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Understanding the Warning
This is a normal message from React’s build system. It informs developers that the current build is optimized for debugging and fast rebuilds, but it is not suitable for production deployment because it is larger and slower.

Key Takeaways from Errors and Solutions
Always check your current directory when running npm commands to ensure you are in the folder containing package.json.

React requires a src/index.js file as the entry point. Creating this file is necessary if missing.

Watch out for duplicate imports and non-JavaScript commands mistakenly placed in source code.

Use data-driven rendering for components when you want to display multiple different info blocks dynamically.

Understand that development build warnings are normal and can be explained as part of your development workflow.

Conclusion
Building a dashboard for an Azure CI/CD platform was both rewarding and educational. The errors and challenges I faced along the way, such as missing files, syntax mistakes, and incorrect rendering, helped me solidify best practices in React development and npm project management.

By overcoming these obstacles, I have built a meaningful, functional dashboard that visually represents vital CI/CD and user management information. This experience positions me well to continue delivering scalable, user-friendly cloud products.