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
Please ensure your plugin is published in order to use this.
meeting.
- HTML
- React
- Angular
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',
id: '<your-plugin-id>',
}]
}});
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.
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',
id: '<your-plugin-id>',
},
],
},
});
}, []);
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.
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',
id: '<your-plugin-id>',
},
],
},
});
meeting.join();
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.