Consume SPFx through CDN

Question

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

2 answers

Your answer

Answer 1

RaytheonXie_MSFT 40,491 Microsoft External Staff

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.

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 9,236 Reputation points Microsoft External Staff Moderator

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 9,236 Reputation points Microsoft External Staff Moderator

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 9,236 Reputation points Microsoft External Staff Moderator

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 9,236 Reputation points Microsoft External Staff Moderator

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

We will check this query with engineering team and will revert back.
RaytheonXie_MSFT 40,491 Reputation points Microsoft External Staff

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
Nivedipa-MSFT 3,721 Reputation points Microsoft External Staff Moderator

2025-03-19T08:03:16.84+00:00

@Mithun K S - Is the application hosted in SharePoint, or it is hosted in your provider (e.g. Azure) and you want to surface the application in a SharePoint page?

Answer 2

Mithun K S 0

Our web application is added as a SharePoint page (through Template → App) in SharePoint. It uses the TeamsJS SDK to initialize within SharePoint.

Nivedipa-MSFT 3,721 Reputation points Microsoft External Staff Moderator

2025-04-11T09:54:29.9766667+00:00

In this case you need to understand what is hosting you and, in case of SharePoint, you cannot relay on TeamsJS as that library will fail to initialize outside of Teams.

Share via

Consume SPFx through CDN

2 answers

Your answer