StatusNeo

Backstage.io, Spotify’s open-source platform for building developer portals, has quickly become a popular tool for managing software development workflows. Its modular architecture, built around plugins, allows for incredible flexibility and customization. But how do you build your own custom plugin when the out-of-the-box options don’t quite fit your needs?

At StatusNeo, we’ve been actively building and deploying custom Backstage plugins to enhance the developer experience for our clients. In this blog, we’ll share our real-world experiences, highlighting the challenges and solutions we encountered along the way. Let’s dive in!

Building the New Relic Dashboard Plugin: A Case Study

One of the most impactful plugins we built was the New Relic Dashboard plugin. This plugin allows developers to view real-time snapshots of their New Relic dashboards directly within Backstage, providing valuable insights into application performance and health.

Challenges:

• Data Integration: Integrating with New Relic’s API required careful consideration of authentication and data retrieval mechanisms.
• UI Design: Creating a seamless and intuitive UI for displaying complex dashboard data within Backstage presented a challenge.
• Performance Optimization: Ensuring efficient data fetching and rendering was crucial for a smooth user experience.

Solutions:

• We implemented a secure OAuth2 flow for authentication and used the New Relic API to retrieve relevant data points.
• We leveraged React and Backstage’s core UI components to create a consistent and user-friendly experience.
• We optimized data fetching and caching to minimize loading times and improve performance.

Lessons Learned:

• Familiarity with Backstage’s architecture and plugin development guidelines is crucial.
• Clear communication and collaboration with stakeholders are essential for defining plugin requirements and functionalities.
• Testing and performance optimization are critical for a successful plugin deployment.

Link: https://github.com/backstage/backstage/tree/master/plugins/newrelic-dashboard 

Microsoft Calendar: Streamlining Your Workflow with Backstage

Staying organized and managing your time effectively is essential for any developer. The Backstage Microsoft Calendar plugin helps you achieve just that.

Integrate Your Schedule:

• View your upcoming meetings and events directly within Backstage.
• Manage your calendar alongside other developer tools and resources.
• Improve collaboration and coordination with your team.

Challenges:

• Securely accessing and displaying calendar data from Microsoft’s API.
• Providing a clear and concise calendar view within Backstage’s interface.
• Ensuring compatibility with different user preferences and time zones.

Solutions:

• Leveraged Microsoft Graph API with secure OAuth2 authentication.
• Utilized Backstage’s components and design principles for a consistent experience.
• Implemented configurable settings for personalized calendar views.

Benefits:

• Increased productivity by managing calendar alongside development tasks.
• Improved collaboration by sharing calendar events and availability.
• Reduced context switching between multiple tools and platforms.

Link: https://github.com/backstage/backstage/tree/master/plugins/microsoft-calendar

GitHub Integration: Bringing Your Codebase Closer

With the Backstage GitHub integration, you can stay on top of your codebase and development workflow directly from the platform.

Streamline Your Workflow:

• Access code reviews, issues, and pull requests right within Backstage.
• View repository information and commit history with ease.
• Perform basic code review actions without leaving Backstage.

Challenges:

• Integrating with GitHub’s API and handling authentication securely.
• Displaying relevant code information in a user-friendly manner.
• Ensuring smooth data synchronization and performance.

Solutions:

• Implemented secure OAuth2 authentication for accessing GitHub data.
• Utilized React components and Backstage’s design principles.
• Optimized data fetching and caching for a responsive experience.

Benefits:

• Enhanced code review and collaboration through centralized access.
• Improved visibility into code changes and repository activity.
• Increased efficiency by reducing context switching between tools.

Link: https://github.com/StatusNeo/backstage-plugin-github

Conclusion: Building a Better Developer Experience with Backstage Plugins

Building custom Backstage plugins can be a rewarding and impactful experience. By plugging in the tools and workflows that matter most to your team, you can create a truly customized and optimized developer environment. We encourage you to embrace the power of Backstage plugins and share your unique contributions with the community!