Hospedar un elemento web del lado cliente desde la red CDN de Microsoft 365 (parte 4 de Hello World)

Artículo
06/29/2022

La red de entrega de contenido de Microsoft 365 (CDN) le proporciona una solución sencilla para hospedar recursos directamente desde su propio espacio empresarial de Microsoft 365. Se puede usar para hospedar cualquier recurso estático que se use en SharePoint Online.

Nota

Existen varias opciones de hospedaje diferentes para los recursos del elemento web. Este tutorial se centra en mostrar la opción Microsoft 365 CDN, pero también puede usar Azure CDN o simplemente hospedar los activos de la biblioteca de SharePoint desde su espacio empresarial, en cuyo caso, no se beneficiaría de las mejoras de rendimiento de la red CDN, pero también serviría desde un punto de vista funcional. Cualquier ubicación a la que los usuarios finales puedan acceder mediante HTTP(S) sería, técnicamente, adecuada para hospedar los recursos para los usuarios finales.

Importante

En este artículo se usa el atributo includeClientSideAssets, que se introdujo en SharePoint Framework (SPFx) v1.4. Esta versión no es compatible con SharePoint 2016 Feature Pack 2. Si usa una configuración local, debe decidir la ubicación de hospedaje de la red CDN por separado. También puede hospedar los archivos de JavaScript desde una biblioteca centralizada de SharePoint local a la que los usuarios tengan acceso. Vea consideraciones adicionales en la guía específica de SharePoint 2016.

Asegúrese de que ha completado las siguientes tareas antes de comenzar:

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

Habilitar la CDN en su espacio empresarial de Microsoft 365

Para obtener información sobre cómo habilitar y configurar la CDN de Microsoft 365 en su espacio empresarial de SharePoint Online, vea Habilitar la CDN de Microsoft 365.

Finalizar la solución para la implementación

Cambie a la consola y asegúrese de que aún está en el directorio del proyecto que ha usado para configurar el proyecto de elementos web.
Si sigue ejecutando el servidor web local ejecutando gulp serve en el tutorial anterior, presione CTRL + C para finalizarlo.
Asegúrese de que está en el directorio del proyecto:
```
cd helloworld-webpart
```

Revisar la configuración de la solución

Abra el proyecto de elementos web HelloWorldWebPart en Visual Studio Code, o su IDE preferido.

Abra package-solution.json desde la carpeta config.

El archivo package-solution.json define los metadatos del paquete como se muestra en el siguiente código:

{
    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
    "solution": {
        "name": "mysolution-client-side-solution",
        "id": "ee1a495d-c7bb-499b-bd71-728aaeb79cd2",
        "version": "1.0.0.0",
        "includeClientSideAssets": true,
        "skipFeatureDeployment": true,
        "isDomainIsolated": false,
        "developer": {
            "name": "",
            "websiteUrl": "",
            "privacyUrl": "",
            "termsOfUseUrl": "",
            "mpnId": "Undefined-1.14.0"
        },
        "metadata": {
        "shortDescription": {
            "default": "mysolution description"
        },
        "longDescription": {
            "default": "mysolution description"
        },
        "screenshotPaths": [],
        "videoUrl": "",
        "categories": []
        },
        "features": [
        {
            "title": "mysolution Feature",
            "description": "The feature that activates elements of the mysolution solution.",
            "id": "d72e47b2-d5a2-479f-9f9a-85e1e7472dee",
            "version": "1.0.0.0"
        }
        ]
    },
    "paths": {
        "zippedPackage": "solution/mysolution.sppkg"
    }
}

El valor predeterminado de includeClientSideAssets es true, lo que significa que los recursos estáticos se empaquetan automáticamente en los archivos *.sppkg y no es necesario hospedar los recursos por separado desde un sistema externo.

No cambie la configuración de este ejercicio para que los recursos se hospeden automáticamente cuando se implemente la solución en su espacio empresarial.

Si la CDN de Microsoft 365 está habilitada, se usa automáticamente con la configuración predeterminada. Si la CDN de Microsoft 365 no está habilitada, los recursos se sirven desde la colección de sitios del Catálogo de aplicaciones. Esto significa que si deja esta includeClientSideAssetsconfiguracióntrue, los recursos de la solución se hospedan automáticamente en el espacio empresarial.

Preparar los activos del elemento web para la implementación

Ejecute la tarea siguiente para agrupar la solución. Se ejecutará una compilación de versión del proyecto con una etiqueta dinámica como la dirección URL de host para los activos. Esta dirección URL se actualiza automáticamente en función de la configuración de la red CDN del espacio empresarial.
```
gulp bundle --ship
```
Ejecute la siguiente tarea para empaquetar la solución. Se crea un paquete helloworld-webpart.sppkg actualizado en la carpeta sharepoint/solution.
```
gulp package-solution --ship
```
Nota

Si está interesado en saber qué es lo que realmente se empaqueta dentro del archivo *.sppkg, puede buscar en el contenido de la carpeta sharepoint/solution/debug.
Cargue (o arrastre y coloque) en el Catálogo de aplicaciones de su espacio empresarial el nuevo paquete de solución del lado cliente.
Dado que ya ha implementado el paquete, se le pedirá que reemplace el paquete existente. Seleccione Reemplazar.
En la lista de dominios del mensaje se muestra SharePoint Online. Esto se debe a que el contenido se sirve desde la CDN de Microsoft 365 o desde el Catálogo de aplicaciones, dependiendo de cómo esté configurado el espacio empresarial. Seleccione Habilitar aplicación.
Abra el sitio donde haya instalado anteriormente helloworld-webpart-client-side-solution o instale la solución en un sitio nuevo.
Después de instalar la solución, seleccione Agregar una página en el menú de engranaje y elija HelloWorld en el selector de elementos web de la página moderna para agregar su elemento web personalizado a la página.
Observe cómo se representa el elemento web aunque no esté ejecutando el servidor web local.
Guarde los cambios de la página con el elemento web.
Abra las herramientas de desarrollo del explorador y luego la pestaña Orígenes.
Amplíe publiccdn.sharepointonline.com bajo el origen y observe cómo el archivo hello-world-web-part se carga desde la dirección URL de la red CDN pública que apunta dinámicamente a una biblioteca ubicada bajo la colección de sitios del catálogo de aplicaciones.

Nota

Si no tiene la red CDN habilitada en su espacio empresarial y el parámetro includeClientSideAssets es true en package-solution.json, la dirección URL de carga para los activos se actualizará dinámicamente y apuntará directamente a la carpeta ClientSideAssets ubicada en la colección de sitios del Catálogo de aplicaciones. En este caso de ejemplo, la dirección URL sería https://sppnp.microsoft.com/sites/apps/ClientSideAssets/. Este cambio es automático en función de la configuración de su espacio empresarial y no se necesita realizar ningún cambio en el paquete de soluciones real.

Ya ha implementado su elemento web personalizado en SharePoint Online que se hospeda automáticamente desde la CDN de Microsoft 365.

Pasos siguientes

Puede cargar jQuery y jQuery UI y compilar un elemento web jQuery Accordion. Para continuar, consulte Agregar jQueryUI Accordion al elemento web del lado cliente.