SlideShare a Scribd company logo
1
aOS Monaco
26/09/2019
I developed a SPFx solution, what
to do next and how to install it by
code?
Yannick
Borghmans
@ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
aOS Monaco
26/09/2019
MERCI à nos
sponsors
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
Agenda
Building SPFx Deployment
SharePoint
Azure
App catalog
ALM API
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
SharePoint UX – Evolving cross versions
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
SharePoint Framework
Is all SP Online development in JavaScript?
In similar ways as with SharePoint Add-in model,
server side development is needed for back end
services
SharePoint Framework concentrates on user
interface, not on fundamentals around the API
usage
• Tooling
• Node.js
• Yeoman
• Gulp
• TypeScript
• Visual Studio (Code)
• Frameworks – Choose yours
• React
• Angular.js
• Knockout
• Etc.
Typical tooling for SharePoint Framework
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
Client-side Web Part Build Flow
Package your webpart
• Use the bundle gulp task to build, localize, and bundle the project
• Use the package-solution gulp task to package the project into
a .sppkg file
• The ship parameter build task creates a minified version of the
bundle and copies all of the web part assets
Package your webpart
Deploy App to the SharePoint App Catalog
Upload static assets
• JSON source file
• Manifest for webpart
• JS Files
• Minified version of your code
• Localized strings
• Located in /temp/deploy folder
Install the app
• Go to your SharePoint Site
• Add an app
Add the web part to a SharePoint page
• Create a page on your Office 365 site
• Add the web part to the page
18
Demo
Files
Updating solutions
Update SPFx solution
• Upgrade version (./config/package-solution.json)
Update SPFx solution
• Gulp clean (optional)
• Gulp bundle --ship
• Gulp package-solution --ship
• Upload to app catalog & upload static assets (.js, .json)
Update SPFx solution
• No need to update app on sites => webparts are automaticaly using
the latest code
Deploy possibilities
SharePoint
Document library
Client side
assets
Office 365
CDN
Azure
CDN
Extra
Tenant deploy
What defines the hosting location?
SHAREPOINT
Document library
SharePoint – document library
• Create a document library
• Create a folder/solution you want to host
SharePoint – document library
• Update the CDNBasePath in write-manifest.json
SharePoint – document library
• Upload app package to app catalog
SharePoint – document library
• Upload .js files to document library
SharePoint – document library
Client side assets
Introduced in SPFx v1.4 to include static assets in .sppkg file
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
36
Demo
SharePoint
AZURE
CDN
38
Demo
Azure CDN
Office 365 - CDN
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
Enable the SharePoint CDN origin
• Open the SharePoint Online Management Shell
• Execute the following Powershell commands to enable the
CDN, set the CDN origin, and return the CDN Origin ID
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
44
Demo
Office 365 CDN
Tenant deploy
Introduced in SPFx v1.4
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans
SharePoint Application
Lifecycle Management API
API to manage the deployment of your SharePoint Framework solutions
SharePoint Application Lifecycle Management
SharePoint Application Lifecycle Management
• Add SharePoint Framework solution or SharePoint Add-in to tenant app catalog.
• Remove SharePoint Framework solution or SharePoint Add-in from tenant app catalog.
• Enable SharePoint Framework solution or SharePoint Add-in to be available for installation in tenant app catalog.
• Disable SharePoint Framework solution or SharePoint Add-in not to be available for installation in tenant app
catalog.
• Install SharePoint Framework solution or SharePoint Add-in from tenant app catalog to a site.
• Upgrade SharePoint Framework solution or SharePoint Add-in to a site, which has a newer version available in the
tenant app catalog.
• Uninstall SharePoint Framework solution or SharePoint Add-in from the site.
• List all and get details about SharePoint Framework solutions or SharePoint Add-ins in the tenant app catalog.
Supported operations
53
Demo
PnP ALM
54
MERCI POUR VOTRE ATTENTION
Photo by Kit Suman on Unsplash
aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans

More Related Content

PPTX
SPSCasablanca - SPFx Deployment
PPTX
Heading to the Cloud : Introduction to deploying a Provider-Hosted App in Azure
PPTX
2018 12-06 SharePoint - the new era of provisioning
PPTX
Sap HCI online training
PDF
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
PDF
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
PPTX
SPS Paris - SPFx deployment
PPTX
Getting started with the PnP Provisioning Engine
SPSCasablanca - SPFx Deployment
Heading to the Cloud : Introduction to deploying a Provider-Hosted App in Azure
2018 12-06 SharePoint - the new era of provisioning
Sap HCI online training
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
SPS Paris - SPFx deployment
Getting started with the PnP Provisioning Engine

What's hot (20)

PDF
Slides: How to Select a PaaS
PPTX
Image Now Interact For Share Point
PDF
Penny coventry auto-bp-spsbe31
PPTX
What is Serverless Computing?
PDF
O365con14 - the new sharepoint online apps - napa in action
PPTX
Accelerate Sitecore DevOps on Microsoft Azure
PPTX
Duet Enterprise: Bring SAP data and workflow to SharePoint
PPTX
The citizen integrator
PPTX
Keynote speech
PPTX
D2 - Automate Custom Solutions Deployment on Office 365 and Azure - Paolo Pia...
PPTX
MSDN - SharePoint 2013 to app or not to app
PPTX
SharePoint Designer 2013 Workflows - SP Intersection
PPTX
SAP Teched for Integration takeaway 2017
PPTX
[Jansen] Transforming your classic team sites into modern group connected tea...
PPT
Rt camp..........a company overview
PDF
Office Online Server 2016 - a must for on-premises installation for SharePoin...
PPTX
Logic Apps – Deployments
PPTX
A Deep Dive into SharePoint 2016 architecture and deployment
PPTX
Creating reusable pieces in Logic Apps
PPT
Alfresco activiti workflows
Slides: How to Select a PaaS
Image Now Interact For Share Point
Penny coventry auto-bp-spsbe31
What is Serverless Computing?
O365con14 - the new sharepoint online apps - napa in action
Accelerate Sitecore DevOps on Microsoft Azure
Duet Enterprise: Bring SAP data and workflow to SharePoint
The citizen integrator
Keynote speech
D2 - Automate Custom Solutions Deployment on Office 365 and Azure - Paolo Pia...
MSDN - SharePoint 2013 to app or not to app
SharePoint Designer 2013 Workflows - SP Intersection
SAP Teched for Integration takeaway 2017
[Jansen] Transforming your classic team sites into modern group connected tea...
Rt camp..........a company overview
Office Online Server 2016 - a must for on-premises installation for SharePoin...
Logic Apps – Deployments
A Deep Dive into SharePoint 2016 architecture and deployment
Creating reusable pieces in Logic Apps
Alfresco activiti workflows
Ad

Similar to aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans (20)

PDF
SPS Dakar 2018 - I developed a SharePoint framework solution, what to do next...
PPTX
Biwug 20180410 - I developed a SharePoint Framework solution, what to do next...
PPTX
SPSNL - SPFx Deployment
PPTX
Introduction to SharePoint Framework
PPTX
The Greatest Introduction to SharePoint Framework (SPFx) on earth!
PPTX
Introduction to development using the share point framework mv ps
PPTX
New SharePoint Features in Visual Studio 2012!
PDF
Power Saturday 2019 F6 - I developed a SPFx solution, what to do next and how...
PDF
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
PDF
Understanding SharePoint Framework Extensions
PPTX
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
PPTX
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
PPTX
aOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
PPTX
aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
PPTX
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
PPTX
Deep dive into share point framework webparts
PPTX
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
PDF
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
PDF
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
PPTX
Uncovering the Latest in SharePoint Development
SPS Dakar 2018 - I developed a SharePoint framework solution, what to do next...
Biwug 20180410 - I developed a SharePoint Framework solution, what to do next...
SPSNL - SPFx Deployment
Introduction to SharePoint Framework
The Greatest Introduction to SharePoint Framework (SPFx) on earth!
Introduction to development using the share point framework mv ps
New SharePoint Features in Visual Studio 2012!
Power Saturday 2019 F6 - I developed a SPFx solution, what to do next and how...
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Understanding SharePoint Framework Extensions
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
aOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
Deep dive into share point framework webparts
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
Uncovering the Latest in SharePoint Development
Ad

More from aOS Community (20)

PPTX
Commencer le IaaS sur Azure - aOS Tahiti 03-03-2020
PPTX
Migrer vers O365. Quelles stragtégies? - aOS Tahiti 03-03-2020
PPTX
Passer des macro Excel à la power plateform - aOS Tahiti 03-03-2020
PDF
Serverless avec azure functions - aOS Tahiti 03-03-2020
PPTX
Passer des macro Excel à la power plateform - aOS Nouméa 28-02-2020
PDF
MS ignite : les nouveautés autour des content services et projet cortex - aOS...
PDF
Cybersecurité dans M365 - aOS Noumea 28-02-2020
PDF
Introduction a Power Automate - aOS Nouméa 28-02-2020
PDF
aOS Monaco 2019 - S3 - Présentation Varonis - Cloud Data Protection - Benjami...
PDF
aOS Monaco 2019 - S2 - Présentation ARKADIN - TEAMS Adoption - Laurent Pilo
PDF
aOS Monaco 2019 - C1 - Sécuriser sa messagerie sur Office 365 - Hakim Taoussi...
PDF
aOS Monaco 2019 - B6 - Mister Governance and Doctor Teams - Jean-François Ber...
PDF
aOS Monaco 2019 - B5 - The good, the bad and the unexpected - a BOT story - K...
PDF
aOS Monaco 2019 - B4 - Three must have workflows with Microsoft Flow - Vlad C...
PDF
aOS Monaco 2019 - B3 - Create purchase request in PowerApps - Robi Voncina
PDF
aOS Monaco 2019 - B2 - Intégrer la Power Platform avec SharePoint - Patrick G...
PDF
aOS Monaco 2019 - B1 - Construire son infrastructure sur Azure un jeu d'enfan...
PDF
aOS Monaco 2019 - A7 - Sécurisez votre SI et vos services Office 365 partie 2...
PDF
aOS Monaco 2019 - A6 - Sécurisez votre SI et vos services Office 365 partie 1...
PDF
aOS Monaco 2019 - Dois-je protéger mes données Office 365 - Christopher Glémot
Commencer le IaaS sur Azure - aOS Tahiti 03-03-2020
Migrer vers O365. Quelles stragtégies? - aOS Tahiti 03-03-2020
Passer des macro Excel à la power plateform - aOS Tahiti 03-03-2020
Serverless avec azure functions - aOS Tahiti 03-03-2020
Passer des macro Excel à la power plateform - aOS Nouméa 28-02-2020
MS ignite : les nouveautés autour des content services et projet cortex - aOS...
Cybersecurité dans M365 - aOS Noumea 28-02-2020
Introduction a Power Automate - aOS Nouméa 28-02-2020
aOS Monaco 2019 - S3 - Présentation Varonis - Cloud Data Protection - Benjami...
aOS Monaco 2019 - S2 - Présentation ARKADIN - TEAMS Adoption - Laurent Pilo
aOS Monaco 2019 - C1 - Sécuriser sa messagerie sur Office 365 - Hakim Taoussi...
aOS Monaco 2019 - B6 - Mister Governance and Doctor Teams - Jean-François Ber...
aOS Monaco 2019 - B5 - The good, the bad and the unexpected - a BOT story - K...
aOS Monaco 2019 - B4 - Three must have workflows with Microsoft Flow - Vlad C...
aOS Monaco 2019 - B3 - Create purchase request in PowerApps - Robi Voncina
aOS Monaco 2019 - B2 - Intégrer la Power Platform avec SharePoint - Patrick G...
aOS Monaco 2019 - B1 - Construire son infrastructure sur Azure un jeu d'enfan...
aOS Monaco 2019 - A7 - Sécurisez votre SI et vos services Office 365 partie 2...
aOS Monaco 2019 - A6 - Sécurisez votre SI et vos services Office 365 partie 1...
aOS Monaco 2019 - Dois-je protéger mes données Office 365 - Christopher Glémot

Recently uploaded (20)

PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
NewMind AI Monthly Chronicles - July 2025
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Approach and Philosophy of On baking technology
PDF
Review of recent advances in non-invasive hemoglobin estimation
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Machine learning based COVID-19 study performance prediction
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Modernizing your data center with Dell and AMD
Per capita expenditure prediction using model stacking based on satellite ima...
Understanding_Digital_Forensics_Presentation.pptx
Building Integrated photovoltaic BIPV_UPV.pdf
NewMind AI Monthly Chronicles - July 2025
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Reach Out and Touch Someone: Haptics and Empathic Computing
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Agricultural_Statistics_at_a_Glance_2022_0.pdf
MYSQL Presentation for SQL database connectivity
Unlocking AI with Model Context Protocol (MCP)
Approach and Philosophy of On baking technology
Review of recent advances in non-invasive hemoglobin estimation
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Machine learning based COVID-19 study performance prediction
Encapsulation_ Review paper, used for researhc scholars
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Network Security Unit 5.pdf for BCA BBA.
The Rise and Fall of 3GPP – Time for a Sabbatical?
Modernizing your data center with Dell and AMD

aOS Monaco 2019 - B7 - I Developed a SPFx solution, what to do next and how to intall it by code - Yannick Borghmans