Presentación de Gustavo Vélez en el SharePoint Saturday Madrid 2017 sobre CDNs para el SharePoint Framework (SPFx)

1. May 20th, 2017
SharePoint Saturday
Madrid
CDNs para el SharePoint Framework SPFx
Gustavo Velez

2. Gustavo Velez
MVP Office Servers And Services
Portiva
http://www.gavd.net
gustavo@gavd.net
http://www.compartimoss.com

4. Introducción
 Que es el SharePoint Framework SPFx
 Configuración de maquinas de desarrollo
 Creación de una WebPart
 Y ahora que hago con mi código?
 Conclusiones, preguntas, etc.

6. SharePoint UX – Evolución a través de sus versiones
2009
SharePoint
Server 2010
2006
Office SharePoint
Server 2007
2003
SharePoint
Portal Server 2003
2001
SharePoint
Portal Server 2001
2012
SharePoint
Server 2013
2016 …
SharePoint
Server 2016, SPO

7. El SharePoint Framework es:

8. Y que son “Paginas Modernas”?

9. SPFx Client-Side WebParts

11. IIS Express
Project Templates
Server/Client Side WebParts tool comparison
MSBuild C#

12. 1. Install developer tools
2. Install Yeoman and gulp
3. Install Yeoman SharePoint generator
4. Install optional tools
Setting Up Your Computer: Steps

13. Demo Dev Environment

15. 1. Create local directory
2. Create project using Yeoman
3. Codify using VS Code
4. Package using Gulp
Creating a WebPart: Steps

16. Demo Creación de una WebPart

18. Y ahora, que hago con mi código?

19. Y que hace SharePoint con mi código?

20. Despliegue local
 Solo para testeo
 Despliegue al Workbench
 Testeo de la interface
 No conexión a datos (aunque se puede simular con datos falsos)
 Modificación en código  visible de inmediato
 Muy fácil para desplegar

21. Despliegue local en SharePoint
 Solo para testeo (use una Dev Site)
 Despliegue del Manifiesto al Catalogo de SharePoint
 Conexión a datos en vivo
 Modificación en código  visible después de refresco de la pagina
 Menos fácil que el Workbench. Mantener WebPart instalada

22. Despliegue en una Biblioteca de SharePoint
 Para producción
 Modificar el pointer en "config/write-manifests.json"
 Despliegue del Manifiesto al Catalogo de SharePoint
 Despliegue del código a una Biblioteca de SharePoint
 Modificación del código  desplegar de nuevo

23. Que es un CDN (Content Deployment Network)
 (Wikipedia) A Content Delivery
Network or Content
Distribution Network (CDN) is a
globally distributed proxy
servers network deployed in
multiple data centers. The goal
of a CDN is to serve content to
end-users with high availability
and high performance.
Any assets in a CDN, are accessible anonymously!!!

24. CDNs para SPFx

25. Despliegue en el CDN de SharePoint
 Para producción
 Configurar el CDN de SharePoint
 Modificar el pointer en "config/write-manifests.json"
 Despliegue del Manifiesto al Catalogo de SharePoint
 Despliegue del código a una Biblioteca del CDN de SharePoint
 Modificación del código  desplegar de nuevo

26. Despliegue en el CDN de Azure
 Para producción
 Configurar Azure
 Modificar los datos en "config/deploy-azure-storage.json"
 Despliegue del Manifiesto al Catalogo de SharePoint
 Despliegue del código a Azure
 Modificación del código  desplegar de nuevo

28. - Diferentes formas de desplegar WebParts: para testeo, para
producción, a SharePoint o a los CDNs de SharePoint o Azure
- SPFx esta aquí para quedarse... Por el momento
- Si no maneja JavaScript, comience a aprenderlo, lo va a necesitar…
Preguntas
Sumario

29. Gold sponsors ______________
Silver sponsors
Bronze sponsors
Collaborate
Platinum sponsor

30. INSTALLATION
01 - Install NodeJS Long Term Support (LTS) (latest version) (https://nodejs.org/en/)
02 - Install npm --> npm install -g npm@3
03 - Install windows-build-tools --> npm install -g --production windows-build-tools
04 - Install Yeoman and Gulp --> npm install -g yo gulp
05 - Install Yeoman SharePoint generator --> npm install -g @microsoft/generator-sharepoint
WEBPART
06 - Create directory --> md blabla --> cd blabla
07 - Create project with Yeoman (5 min) --> yo @microsoft/sharepoint
08 - Start VS Code (don't forget " .") --> code .
09 - Install dev. certif. (only one time) --> gulp trust-dev-cert
DEPLOY TO LOCAL WORKBENCH
10 - Build and preview the WebPart --> gulp serve (stop with Ctrl+C)
DEPLOY TO SHAREPOINT FROM LOCAL
11 - Generate the package for SP Catalog --> gulp package-solution (Pack in "..sharepointsolution")
12 - Start Gulp in dev environment --> gulp serve --nobrowser
13 - Install package .sppkg in Catalog ==> Install App is Site Coll ==> Install WebPart in page
DEPLOY TO SHAREPOINT FROM SHAREPOINT LIBRARY
14 - Create Library in SharePoint
15 - In "config/write-manifests.json" --> use the Library full path as cdnBasePath (and Save)
16 - Create the files to deploy --> gulp bundle --ship ("--ship" for release build version)
17 - Copy the generated files --> (files in "..tempdeploy") to the Library
18 - Generate the package for SP Catalog --> gulp package-solution --ship (Pack in "..sharepointsolution")
19 - Install package .sppkg in Catalog ==> Install App is Site Coll ==> Install WebPart in page

31. DEPLOY TO SHAREPOINT FROM SHAREPOINT CDN
20 - Configure SharePoint CDN --> Run Cmdlets to make one Library or folder the SharePoint CDN
Needs to have the SP Online PowerShell Cmdlets already installed (https://www.microsoft.com/en-
us/download/details.aspx?id=35588)
$creds = Get-Credential
Connect-SPOService -Url https://contoso-admin.sharepoint.com/ -Credential $creds
Set-SPOTenant -PublicCdnEnabled $true
New-SPOPublicCdnOrigin -Url "https://contoso.sharepoint.com/siteassets/folder1"
21 - Get the ID of the SP CDN Library --> Get-SPOPublicCdnOrigins (Copy the ID of the SharePoint CDN repository)
22 - In "config/write-manifests.json" --> use the following path as cdnBasePath (and Save)
"https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the SharePoint CDN>/<sub-path under the origin>"
for example, if the Library is in the root of the Tenant:
"https://publiccdn.sharepointonline.com/contoso.sharepoint.com/17280044dc65df7..."
23 - Create the files to deploy --> gulp bundle --ship ("--ship" for release build version)
24 - Copy the generated files --> (files in "..tempdeploy") to the SP CDN Library
25 - Generate the package for SP Catalog --> gulp package-solution --ship (Pack in "..sharepointsolution")
26 - Install package .sppkg in Catalog ==> Install App is Site Coll ==> Install WebPart in page
DEPLOY TO SHAREPOINT FROM AZURE CDN
- In Azure create a Resource Group
- In the Resource Group create a Storage Account (example spfxstoragegavd)
- In the Storage create a Blob Container (example ss01webpart)
- In the Resource Group create a CDN Profile
- In the CDN Profile create a CDN Endpoint (example ss01webpartendpoint)
- In "config/deploy-azure-storage.json" --> Change the values (and save):
account == The Storage Account Name (in the example spfxstoragegavd)
container == The Blob Container Name (in the example ss01webpart)
accessKey == In the storage account dashboard, choose Access Key in the dashboard and copy the first access keys
- In "config/write-manifests.json" --> in the cdnBasePath use (and save):
"https:// + "Endpoint hostname" + ".azureedge.net/" + Name of the Container in the Storage Blob + "/"
in the example: "https://ss01webpartendpoint.azureedge.net/ss01webpart/")
- Buil the assets (.js, .css, etc.) --> gulp bundle --ship
- Deploy the assets to the Azure Storage --> gulp deploy-azure-storage
- Generate the package for SP Catalog --> gulp package-solution --ship (Pack in "..sharepointsolution")
- Install package .sppkg in Catalog ==> Install App is Site Coll ==> Install WebPart in page