Hospedar una extensión SPFx desde la red CDN de Microsoft 365 (parte 4 de Hello World)

En este artículo se describe cómo implementar el personalizador de aplicación de SharePoint Framework para que se hospede desde una red CDN de Microsoft 365 y cómo implementarlo luego en SharePoint para los usuarios finales.

Antes de comenzar, asegúrese de haber completado los procedimientos descritos en los siguientes artículos:

• Compilar la primera extensión de SharePoint Framework (parte 1 de Hello World)
• Usar marcadores de posición de página en Application Customizer (parte 2 de Hello World)
• Implementar la extensión en SharePoint (parte 3 de Hello World)

También puede seguir estos pasos viendo el vídeo en el canal de YouTube Microsoft 365 Platform Community (PnP):

Habilitar la red CDN en su espacio empresarial de Microsoft 365

La red CDN de Microsoft 365 es la forma más sencilla de hospedar soluciones de SharePoint Framework directamente en el espacio empresarial y, al mismo tiempo, seguir aprovechando el servicio Red de entrega de contenido (CDN) para reducir los tiempos de carga de los recursos.

Siga los pasos descritos en el siguiente documento para asegurarse de que la red CDN de Microsoft 365 está habilitada en su espacio empresarial: Habilitar la CDN de Microsoft 365.

Actualizar el proyecto de solución con las direcciones URL de la red CDN

1. Vuelva a la solución creada anteriormente y abra el archivo ./config/package-solution.json. Observe que el atributo includeClientSideAssets debe establecerse en true para el hospedaje automático de recursos a través de la CDN de Microsoft 365. Con esto se controla si los recursos de JavaScript y los archivos relacionados se incluyen en el archivo *.sppkg al empaquetar la solución para su envío.

   {
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
       "name": "app-extension-client-side-solution",
       "id": "831b6fac-7668-46b4-96c6-e2ee35559287",
       "version": "1.0.0.0",
       "includeClientSideAssets": true,
       ...
     }
   }
   

2. Abra el archivo ./config/write-manifests.json.

   Este archivo debe actualizarse solo cuando se usa una red CDN externa como Microsoft Azure. Asegúrese de que el atributo cdnBasePath está exactamente como se muestra a continuación. Si tiene alguna otra entrada, el hospedaje automático con la CDN pública de Microsoft 365 no funcionará.

   {
     "cdnBasePath": "<!-- PATH TO CDN -->"
   }
   

3. Ejecute las siguientes tareas para agrupar la solución: Esto ejecuta una versión del proyecto.

   gulp bundle --ship
   

4. Ejecute la siguiente tarea para empaquetar la solución. Este comando crea el paquete ./sharepoint/solution/app-extension.sppkg:

   gulp package-solution --ship
   

5. En el Catálogo de aplicaciones del espacio empresarial, cargue (o arrastre y coloque) el nuevo paquete de solución del lado cliente. Cuando se le solicite, seleccione el botón de radio Habilitar solo esta aplicación y seleccione el botón Habilitar aplicación. Observe que la definición de dominio se actualiza a SharePoint Online, ya que los recursos ahora se hospedarán automáticamente con la CDN de Microsoft 365:

   

6. Instale la nueva versión de la solución en el sitio y asegúrese de que funciona correctamente. Tenga en cuenta que si no quitó el paquete con la instalación https://localhost antes de actualizarlo en el catálogo de aplicaciones, el sitio ejecutará automáticamente la versión actualizada y los marcadores de posición se representarán desde la CDN.

   

Enhorabuena, ha habilitado una red CDN pública en la cuenta empresarial de Microsoft 365 y ha sabido aprovecharlo en su solución.

Vea también

• Compilar la primera extensión del conjunto de comandos de ListView
• Compilar la primera extensión Field Customizer
• Información general de SharePoint Framework Extensions