How to use the UI Library Composites in other frameworks than React

[dmceachernmsft]

The Azure Communication Services UI library is built in React and as such is best used inside react applications. However, your use case may differ, like having an existing application in another Node framework like Angular or VueJS.

This show and tell will highlight how you can create a wrapper function that will create a React node and mount it to your application's DOM. In this situation you are bringing React into your application along with our composites. With that lets look at some code.

Note: To Follow along with this show and tell you will need an Azure Communication Services resource and know how to mint Tokens and ID's from it.

Getting started

If you have your own application already you can skip this section.
We are going to need a node application to follow along with this show and tell. In our case we will use a Angular application since we are wanting to highlight how this is beneficial for platforms that are not React. We will create the application with the following command

npm init @angular acs-react-wrapper

This will create a new Angular application after it completes. Open that application in VS code when the generation of app is completed.

Updating your Dependencies

In your Node application you will need to update the dependencies that you are working with. Add the @azure/communication-react package with the following command:

npm install @azure/communication-react

When this finishes you should see the following in your applications dependency array.

"dependencies": {
    // ... your existing dependencies
    "@azure/communication-react": "^1.20.0"
  },

In this show and tell we are going to focus on Angular as a platform. Regardless of your framework however, it is important to note that you should be calling the JS loader functions when your application has access to the window object. It is best to know your frameworks component lifecycle so be sure to check out your framework's documentation regarding this. Linked below are some common UI frameworks documentation on the topic:

• React
• VueJS
• Angular
• SolidJS

We are going to use some special functions from @azure/communication-react these functions allow us to load the CallComposite or any other composite for that matter, into the Angular application. These Functions are :

• loadCallComposite
• loadChatComposite
• loadCallWithChatComposite
• loadOutboundCallComposite

These are useful for using our composites when your application does not use React.

With that cleared up, let's look at some code.

Using the Loader

Like stated earlier, we are going to be using Angular for this tutorial. We are going to keep it simple and use the component that they give us for free when creating a new application. In Angular a component is broken up into 3 files:

• your scripting, app.component.ts
• your template, app.component.html
• your styles, app.component.css

First we will look at the code for the app.component.ts file. Here we will want to import the Loader functions from @azure/communication-react/javascript-loaders. This is a submodule of @azure/communication-react that we export to allow the main package to still be compatible with other versions of React by isolating the dependency of React-Dom to the submodule.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';
import { CallCompositeOptions, fromFlatCommunicationIdentifier } from '@azure/communication-react';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'acs-angular-react';
  userId = 'Enter your ACS ID';
  token = 'Enter your ACS Token';
  displayName = 'User';
  groupId = 'Enter your GUID Group Id';

  
async loadCalling(): Promise<void> {
    import('@azure/communication-react/javascript-loaders').then(
      async (communicationreact) => {
        const compositeOptions: CallCompositeOptions = {
          callControls: {
            displayType: 'compact',
            cameraButton: false,
          },
        };
        /**
         * We want to fetch a reference
         */
        const compositeContainer = document.getElementById(
          'call-composite-container'
        );

        const identifier = fromFlatCommunicationIdentifier(this.userId);
        const credential = new AzureCommunicationTokenCredential(this.token);
        if (compositeContainer) {
          this.adapter = await communicationreact
            .loadCallComposite(
              {
                userId: identifier as CommunicationUserIdentifier,
                credential: credential,
                displayName: this.displayName,
                locator: {
                  groupId: this.groupId,
                },
                callCompositeOptions: compositeOptions,
              },
              compositeContainer
            )
            .then((adapter) => {
              if (adapter) {
                adapter.on('callEnded', () => {
                  console.log('Call ended');
                });
              }
            });
        }
      }
    );
  }

  ngOnDestroy(): void {
    if (this.adapter) {
      this.adapter.dispose();
    }
  }
}

Next we will look at the change for the template. We want to add a div with the same id that we are specifying in the Angular component we just updated. That will look something like this somewhere in your application's template in this case the file app.component.html added anywhere inside the body of the template.

<div id="call-composite-container"></div>

Finally we will want to set some styles constraining the composite. In this show and tell we will have the composite in a container, rendering above the page. We will add those styles to the CSS that goes with the component in app.component.css

#call-composite-container {
    height:40rem;
    width: 45rem;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
    padding: 0.5rem;
    background-color: white;
}

Once we have done these 3 things we are good to go with running our app. In the case of this show and tell we use the following command to start the app.

npm run start

to run the application and see the following:

You now have a React composite inside your Anuglar application!

[GillesTourreau]

Hello @dmceachernmsft,

Thanks for this simple tutorial for other framework integration!

For information I used the same approach to wrap the Communication UI Library for Blazor and I started to make a NuGet package for the community : PosInformatique.Azure.Communication.UI.Blazor
The source code of this project is available in the PosInformatique/PosInformatique.Azure.Communication.UI.Blazor GitHub repository.

This library try to wrap the Communication UI Library by exposing only .NET APIs, which allows the developers to manipulate the UI Library without usage of JavaScript code.