What CDN do I use for an Office Add-in?

1.3k Views Asked by At

I'm working on Office Add-in projects (O365). Sample projects from GitHub, and Online documentation from Microsoft show a variety of different CDNs.

I'm not sure which one is for use with React, Fabric-UI.JS, or just simply jQuery.

To be used with React?

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">

The Microsoft's Fabric-JS page shows the CDNs below. However, I see on GitHub that they're on 1.5.0 now. Is this technology being taken seriously by Microsoft, or have they moved on to other Javascript Library solutions?

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>

Are these intended for use with React, Fabric-JS, or simply jQuery?

<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">

1

There are 1 best solutions below

5
On

If you are looking for the CDNs, then yes the documentation refers it to:

Since it is on NPM you could use UNPKG CDNs as well. Such as:

  1. https://unpkg.com/[email protected]/dist/css/fabric.min.css
  2. https://unpkg.com/[email protected]/dist/css/fabric.css

The reason why the documentation website has older version of Fabric is because the Fabric team is working on making it significantly better, here is the preview of the new site https://aka.ms/fabric-preview

If you are building the add-in in React, then you don't need the CDN, you can refer to the styles from the package directly and react-create-app (or custom webpack) will bundle it correctly. If your development environment uses NPM, you can do that too with office-ui-fabric-core as well.

Yes, Microsoft is significantly investing in Fabric! Almost all teams are using it.