Set Up Development Environment

Dyte's devTools module provides a live playground like experience to help you build your plugin locally.

For this you would need to have a dyte meeting setup first. Dyte meetings can be created using the client SDKs.

The code snippet below shows how you can enable devTools for your dyte meeting.

HTML
React
Angular

before you start

Install @dytesdk/web-core@1.x.x or higher to use dev tools.

<body>
 <dyte-meeting id="my-meeting"></dyte-meeting>

  <script>
    const init = async () => {
      const meeting = await DyteClient.init({
        authToken: '',
        roomName: '',
        defaults: {
          audio: true,
          video: true,
        },
        modules: {
          plugin:[{
            name: 'My Awesome Plugin',
            port: '5000',
          }]
        }});

      document.getElementById('my-meeting').meeting = meeting;
    };

    init();
  </script>
</body>

Once your meeting is setup, run your plugin application on the port specified by you. In this case localhost:5000.

before you start

Install @dytesdk/react-web-core@1.x.x or higher to use dev tools.

import { useDyteClient } from '@dytesdk/react-web-core';
import { DyteMeeting } from '@dytesdk/react-ui-kit';

export default function App() {
  const [meeting, initMeeting] = useDyteClient();

  useEffect(() => {
    initMeeting({
      roomName: '<room-name>',
      authToken: '<auth-token>',
      modules: {
        plugin: [
          {
            name: 'My Awesome Plugin',
            port: '5000',
          },
        ],
      },
    });
  }, []);

  return <DyteMeeting mode="fill" meeting={meeting} />;
}

Once your meeting is setup, run your plugin application on the port specified by you. In this case localhost:5000.

before you start

Install @dytesdk/web-core@0.10.x or higher to use dev tools.

Put the dyte component in component.html file

<dyte-meeting #myid></dyte-meeting>

Then in the component.ts or component.js file initialize the meeting

class AppComponent {
  title = 'MyProject';
  @ViewChild('myid') meetingComponent: DyteMeeting;
  dyteMeeting: DyteClient;

  async ngAfterViewInit() {
    const meeting = await DyteClient.init({
      roomName: '<room-name>',
      authToken: '<auth-token>',
      modules: {
        plugin: [
          {
            name: 'My Awesome Plugin',
            port: '5000',
          },
        ],
      },
    });
    meeting.joinRoom();
    this.dyteMeeting = meeting;
    if (this.meetingComponent) this.meetingComponent.meeting = meeting;
  }
}

Once your meeting is setup, run your plugin application on the port specified by you. In this case localhost:5000.

Next Step

Now that you've started building your awesome plugin, let's see how you can publish and manage it.

Next Step​

Next Step