Create feature

Create features to compose backend and frontend components into a unified platform. To create an aspect, run the following command:

bit create aspect support
Copied

To compose the feature into an Harmony platform, head to the application shell and include your aspects under the aspects property:

// acme-platform.bit-app.ts
import { SupportAspect } from '@acme/support.support';

export const Acme = HarmonyPlatform.from({
  name: 'acme-platform',
  aspects: [
    SupportAspect
  ]
});
Copied

Learn more about platform application shells in the Harmony documentation.

Create components

Compose the UI components, hooks or data entities needed for implementing the feature functionality.:

bit create react routes/create-ticket
Copied

Create the components you need to implement your desired architecture. Bit provides a variety of templates for different frameworks and use cases:

Learn more in creating components documentation.

Compose the component to the platform

Integrate the create ticket component into the platform by registering a /create-ticket route that renders the CreateTicket component:

// support.browser.runtime.ts
import { SymphonyPlatformAspect, type SymphonyPlatformBrowser } from '@bitdev/symphony.symphony-platform';
import { CreateTicket } from '@acme/support.routes.create-ticket';

export class SupportBrowser {
  // declare dependencies to use.
  static dependencies = [SymphonyPlatformAspect];

  // plugin your aspect to other aspect and initiate the aspect API.
  static async provider([symphonyPlatform]: [SymphonyPlatformBrowser], config) {
    const support = new SupportBrowser();

    // register route to the platform route integration slot.
    symphonyPlatform.registerRoute([
      {
        path: '/create-ticket',
        component: () => {
          return <CreateTicket />;
        }
      }
    ]);

    return support;
  }
}
Copied

Head to http://localhost:3000/create-ticket to view your new route. Create and compose further components as needed to meet the desired functionality.

Compose the backend API

Implement your feature's backend API within an Aspect's Node.js runtime. Aspects in Bit are programmatic and API-first. Compose them to define routes, GraphQL schemas, or other necessary interfaces.

// people.node.runtime.ts
import { SymphonyPlatformAspect type SymphonyPlatformNode } from '@bitdev/symphony.symphony-platform';
import { User, createUserMock } from '@pied/people.entities.user';
import { peopleGqlSchema } from './people.graphql.js';

export class PeopleNode {
  /**
   * Define the API to list users.
  **/
  async listUsers(): Promise<User[]> {
    const peopleMock = createUserMock();

    return peopleMock.map((plainUser) => {
      return User.from(plainUser);
    });
  }

  static dependencies = [SymphonyPlatformAspect];

  static async provider([symphonyPlatform]: [SymphonyPlatformNode]) {
    const people = new PeopleNode(config, providerSlot);
    const peopleGqlSchema = peopleGqlSchema(people);

    symphonyPlatform.registerBackendServer([
      {
        // define your express routes
        routes: [],
        // define your graphql schema.
        gql: peopleGqlSchema
      }
    ]);

    return people;
  }
}
Copied

Once you've defined your Aspect's API, create corresponding React hooks and data entities. These will allow you to seamlessly integrate the Aspect's functionality into your UI components.

Creating SOA features

You can create features without Harmony, in a service oriented fashion by creating a backend service and composing the UI components and directly into your existing apps.

Create the GraphQL backend service:

bit create graphql-server support-service
Copied

Install the Create ticket component in your app:

npm install @acme/support.route.create-ticket
Copied

Learn more about modernizing existing projects with Bit components.