Consume SPFx through CDN

Mithun K S 0

Hi Team,

We have an existing web application which is built using requireJS , backboneJS and internal framework . We want to consume/ include SPFx through CDN (not through npm module) to support sharepoint online and sharepoint related feature when our web application is added as sharepoint page.

We manily need SPFx support for below funtionality

MS graph API (currently we are using MSAL but experience of SSO is not great)
SharePoint Dialog
Get SP related inforamation.

Thanks,

Mithun

1 answer

RaytheonXie_MSFT 36,016 Reputation points Microsoft Vendor

2024-06-18T06:52:02.5566667+00:00

Hi @Mithun K S,

To consume a SharePoint Framework (SPFx) web part through the Microsoft 365 Content Delivery Network (CDN), you need to follow specific steps to ensure your web part is correctly packaged, deployed, and configured to use the CDN. Here’s a detailed guide:

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Mithun K S 0 Reputation points

2024-06-18T07:02:39.3+00:00

Hi @RaytheonXie_MSFT

Thank you for the answer.

Now we do not have any webpart and we are not planning to build one. We have already have Teams Tab application using TeamsJS SDK.

Below are the steps we ae following to add our page to Sharepoint.

Upload app to app catalog (this is the Teams tab application using TeamsJS SDK which is in .zip format) .

Naviagate to sharepoint site - > New page -> select "app" tab from template -> select the uploaded the app

Now we are facing issue with dialogs and Graph token which is not working through TeamsJS SDK, we are plannning to cosnume SPFx through CDN and replace it with supported module from framework.

Thanks,

Mithun

Prasad-MSFT 6,876 Reputation points Microsoft Vendor

2024-06-18T11:03:22.2166667+00:00

Could you please refer this and let us know if that helps?
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tabs-in-sharepoint

Also is there any specific error you are getting while using dialogs and Graph API?

Prasad-MSFT 6,876 Reputation points Microsoft Vendor

2024-06-18T11:05:06.7433333+00:00

Could you please provide more details on your issue? Please provide any error you are getting while integrating Teams tab app with SharePoint framework.

Mithun K S 0 Reputation points

2024-06-20T03:46:37.0866667+00:00

Hi @Prasad-MSFT

We follwed https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tabs-in-sharepoint without SPFx . We had used teamsJS SDK

https://learn.microsoft.com/en-us/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest

We are unable to receive promise object for following methods/ API of micsosoftTeams

microsoftTeams.authentication.getAuthToken()

microsoftTeams.authentication.authenticate()

microsoftTeams.tasks.startTask

Even the SDK initialization was failing in sharepoint context . We got an input from MSFT support asking us to send domain while initialzation.

ex : microsoftTeams.app.initializesharepointdomains);

Since the solution already built for Teams using TeamsJS and now for switching to SPFx for sharepoint would be difficult . Our idea is to use single app using TeamsJS for both Teams and Sharepoint

Thanks,

Mithun

Mithun K S 0 Reputation points

2024-06-21T05:59:11.76+00:00

Any update ?

Prasad-MSFT 6,876 Reputation points Microsoft Vendor

2024-06-24T09:54:00.04+00:00

The SDK initialization might fail if the domain you're using to initialize is not included in the valid domains for your app in the app manifest.

Regarding the microsoftTeams.tasks.startTask method, this is typically used to open a task module within Teams. If you're facing issues with this method, it could be related to how the task module is being invoked or the configuration of the task module itself.

Mithun K S 0 Reputation points

2024-06-24T09:58:29.8066667+00:00

IS there a way which we can open dialog in sharepoint using MicrosotteamsJS SDK ?

And any input on gettting bootstrap token using microsoftTeams.authentication.getAuthToken() ? This call is not wrking in Sharepoint context

Prasad-MSFT 6,876 Reputation points Microsoft Vendor

2024-06-26T13:28:22.7266667+00:00

We will check this query with engineering team and will revert back.

RaytheonXie_MSFT 36,016 Reputation points Microsoft Vendor

2024-07-02T01:14:29.21+00:00

Hi @Mithun K S,

would you please provide us with an update on the status of your issue?

Mithun K S 0 Reputation points

2024-07-02T03:28:18.2766667+00:00

Hi @RaytheonXie_MSFT

We are waiting for Microsoft's input on our issue with Teams JS SDK in SharePoint

As i mentioned earlier ,

We are unable to receive promise object for following methods/ API of micsosoftTeams

microsoftTeams.authentication.getAuthToken()

microsoftTeams.dialog.open()

and alternate option to trigger dialog in SharePoint using Teams JS SDK

Thanks,

Mithun
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Consume SPFx through CDN

1 answer

Your answer