Skip to main content

Documentation Index

Fetch the complete documentation index at: https://backstage.spotify.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

​
Introduction

We understand that the default terminology within Skill Exchange is not one size fits all. To help adjust Skill Exchange’s terminology to fit what makes sense for your organization, we’ve created and enabled some features that allow you to customize Skill Exchange.

​
Setting Up Custom Translations

Skill Exchange uses Backstage’s internationalization feature to customize the frontend text. You can customize various text elements throughout the application by providing your own translations. All available translation keys are listed below.
Custom translations only affect the frontend text. If you’re looking to also customize url feature paths, please refer to the Customizing Skill Exchange Feature Paths section.
packages/app/src/App.tsx
import { TranslationBlueprint } from '@backstage/frontend-plugin-api';
import { skillExchangeTranslationRef } from '@spotify/backstage-plugin-skill-exchange/alpha';

const skillExchangeCustomTranslations = TranslationBlueprint.make({
  name: 'skill-exchange-custom-translations',
  params: {
    resource: createTranslationMessages({
      ref: skillExchangeTranslationRef,
      messages: {
        // Your custom translations here
        'navigation.hacks': 'Jams',
        'homePage.title': 'Find others who can help',
        // ... more translations
      },
    }),
  },
});

export const app = createApp({
  features: [
    createFrontendModule({
      pluginId: 'app',
      extensions: [
        // ... extensions,
        skillExchangeCustomTranslations,
        // ... other extensions,
      ],
    }),
  ],
});

​
Home

​
Embeds

​
Mentors

​
Hacks

​
Customizing Skill Exchange Feature Paths

Skill Exchange uses feature paths to determine the url path for each feature. At default, feature paths are set to embeds, mentors, and hacks. You can customize these paths by providing your own feature paths in your backend app-config.yaml file.
app-config.yaml
skillExchange:
  embedsPath: 'remixes' # default: 'embeds'
  mentorsPath: 'pairings' # default: 'mentors'
  hacksPath: 'jams' # default: 'hacks'
The example configuration above will change the url paths for each feature to the following:
  • Embeds -> http://localhost:3000/skill-exchange/remixes
  • Mentors -> http://localhost:3000/skill-exchange/pairings
  • Hacks -> http://localhost:3000/skill-exchange/jams

​
Customizing Skill Exchange Notifications

Skill Exchange notifications can be customized to match your organization’s communication style and preferences. You can tailor notification messages, formatting, and content for Backstage’s native notification system.

​
Customizing Backstage Notifications

Backstage notifications appear directly within your Backstage instance and can be customized to match your organization’s terminology and communication style.

​
Prerequisites

Before customizing Backstage notifications, you must first enable Backstage notifications. Please refer to the Backstage Notifications setup section for detailed configuration instructions.

​
Example: Customizing Embed Notifications for Backstage Notifications

The following example shows how to customize embeds notification messages. Since we’re only providing a custom embeds message builder, the default message builders for mentors and hacks will continue to be used. For detailed information on available methods and customization options, refer to the EmbedsMessageBuilder, MentorsMessageBuilder, and HacksMessageBuilder documentation.
src/customNotificationEmbedsMessageBuilder.ts
import { DefaultNotificationEmbedsMessageBuilder } from '@spotify/backstage-plugin-skill-exchange-backend';
import { InquiryMessageArgs } from '@spotify/backstage-plugin-skill-exchange-node/alpha';

export class CustomNotificationEmbedsMessageBuilder extends DefaultNotificationEmbedsMessageBuilder {
  // Override other methods as needed
  buildInquiryMessage({
    postTitle,
    sender,
    customMessage,
  }: InquiryMessageArgs): string {
    return `${sender} is interested in your Embed ${postTitle}. They sent you a message: ${customMessage}`;
  }
}
Once you’ve created your custom message builder, you can register it with Skill Exchange using the extension point.

​
Registering Custom Message Builders

Once you’ve created your custom message builders, register them with Skill Exchange by using the skillExchangeMessageBuilderExtensionPoint extension point.
src/customSkillExchangeMessageBuilderModule.ts
import { createBackendModule } from '@backstage/backend-plugin-api';
import { skillExchangeMessageBuilderExtensionPoint } from '@spotify/backstage-plugin-skill-exchange-node/alpha';
import { CustomNotificationEmbedsMessageBuilder } from './customNotificationEmbedsMessageBuilder';

export default createBackendModule({
  pluginId: 'skill-exchange',
  moduleId: 'custom-message-builder',
  register(env) {
    env.registerInit({
      deps: {
        messageBuilder: skillExchangeMessageBuilderExtensionPoint,
      },
      async init({ messageBuilder }) {
        // Register custom embeds message builder for Backstage Notifications
        messageBuilder.setNotificationsEmbedMessageBuilder(
          new CustomNotificationEmbedsMessageBuilder(),
        );

        // You can also register custom builders for other features
        // messageBuilder.setNotificationsMentorsMessageBuilder(new CustomNotificationMentorsMessageBuilder());
        // messageBuilder.setNotificationsHacksMessageBuilder(new CustomNotificationHacksMessageBuilder());
      },
    });
  },
});
src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();
// ...
backend.add(import('@backstage/plugin-notifications-backend'));

backend.add(import('@spotify/backstage-plugin-skill-exchange-backend'));
backend.add(
  import('@spotify/backstage-plugin-search-backend-module-skill-exchange'),
);
backend.add(import('./customSkillExchangeMessageBuilderModule'));
// ...

backend.start();