Una de las maneras más sencillas de desplegar y almacenar los archivos JS, CSS, imágenes,… de un WebPart de SPFx en SharePoint es utilizando la CDN de SharePoint Online. Esto nos va a permitir utilizar una librería de SharePoint como CDN para nuestra aplicación.

Para habilitar la CDN en Office 365 hay que seguir los siguientes pasos:

Si no la tienes, descárgate la SharePoint Online Management Shell aquí.

  • Conectar a Office 365
$creds = Get-Credential

Connect-SPOService -Url https://mariocortes15-admin.sharepoint.com/ -Credential $creds
  • Habilitar CDN en nuestro tenant
Set-SPOTenant -PublicCdnEnabled $true
  • Podremos ver el estado de la CDN y los archivos permitidos con el siguiente comando:
Get-SPOTenant
…
PublicCdnEnabled : True
PublicCdnAllowedFileTypes : CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF
PublicCdnOrigins : {}
  • Para actualizar las extensions de ficheros permitidas:
Set-SPOTenant -PublicCdnAllowedFileTypes "CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF,TXT"
  • Para añadir un nuevo origen:
New-SPOPublicCdnOrigin -Url https://maricortes15.sharepoint.com/siteassets/CDN
  • Obtener el listado de CDN:
Get-SPOPublicCdnOrigins
  • Eliminar un origen de CDN:
Remove-SPOPublicCdnOrigin -Identity 3987507161aaae8fe7159…

La URL que se construye para los ficheros tiene el siguiente formato:

https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the public CDN origin>/<sub-path under the origin>

Esta URL es la que podremos utilizar en nuestro proyecto de WebParts SPFx para almacenar nuestros assets en SharePoint.

Dentro de write-manifest.json nos encontramos con la siguiente propiedad vacía, que tendremos que modificar con la de nuestro CDN.

Codigo CDN Manifest.json

Para publicar nuestro WebPart tendremos que ejecutar en nuestra consola los siguientes comandos que nos empaquetarán nuestro código “gulp —ship” y “gulp package-solution —ship”

Los archivos generados en la carpeta temp/deploy son los que guardaremos en nuestra CDN. El paquete de la aplicación que debemos subir a nuestra App Catalog se encuentra en la carpeta sharepoint/solution.