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

What's hot (20)

PDF
Slides: How to Select a PaaS
Altoros
 
PPTX
Image Now Interact For Share Point
Marcus Hinterseer
 
PDF
Penny coventry auto-bp-spsbe31
BIWUG
 
PPTX
What is Serverless Computing?
AIMDek Technologies
 
PDF
O365con14 - the new sharepoint online apps - napa in action
NCCOMMS
 
PPTX
Accelerate Sitecore DevOps on Microsoft Azure
Perficient, Inc.
 
PPTX
Duet Enterprise: Bring SAP data and workflow to SharePoint
Maarten Eekels
 
PPTX
The citizen integrator
BizTalk360
 
PPTX
Keynote speech
BizTalk360
 
PPTX
D2 - Automate Custom Solutions Deployment on Office 365 and Azure - Paolo Pia...
SPS Paris
 
PPTX
MSDN - SharePoint 2013 to app or not to app
Joris Poelmans
 
PPTX
SharePoint Designer 2013 Workflows - SP Intersection
Asif Rehmani
 
PPTX
SAP Teched for Integration takeaway 2017
Daniel Graversen
 
PPTX
[Jansen] Transforming your classic team sites into modern group connected tea...
European Collaboration Summit
 
PPT
Rt camp..........a company overview
simplypari18
 
PDF
Office Online Server 2016 - a must for on-premises installation for SharePoin...
SPC Adriatics
 
PPTX
Logic Apps – Deployments
BizTalk360
 
PPTX
A Deep Dive into SharePoint 2016 architecture and deployment
SPC Adriatics
 
PPTX
Creating reusable pieces in Logic Apps
BizTalk360
 
PPT
Alfresco activiti workflows
Muralidharan Deenathayalan
 
Slides: How to Select a PaaS
Altoros
 
Image Now Interact For Share Point
Marcus Hinterseer
 
Penny coventry auto-bp-spsbe31
BIWUG
 
What is Serverless Computing?
AIMDek Technologies
 
O365con14 - the new sharepoint online apps - napa in action
NCCOMMS
 
Accelerate Sitecore DevOps on Microsoft Azure
Perficient, Inc.
 
Duet Enterprise: Bring SAP data and workflow to SharePoint
Maarten Eekels
 
The citizen integrator
BizTalk360
 
Keynote speech
BizTalk360
 
D2 - Automate Custom Solutions Deployment on Office 365 and Azure - Paolo Pia...
SPS Paris
 
MSDN - SharePoint 2013 to app or not to app
Joris Poelmans
 
SharePoint Designer 2013 Workflows - SP Intersection
Asif Rehmani
 
SAP Teched for Integration takeaway 2017
Daniel Graversen
 
[Jansen] Transforming your classic team sites into modern group connected tea...
European Collaboration Summit
 
Rt camp..........a company overview
simplypari18
 
Office Online Server 2016 - a must for on-premises installation for SharePoin...
SPC Adriatics
 
Logic Apps – Deployments
BizTalk360
 
A Deep Dive into SharePoint 2016 architecture and deployment
SPC Adriatics
 
Creating reusable pieces in Logic Apps
BizTalk360
 
Alfresco activiti workflows
Muralidharan Deenathayalan
 

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...
aOS Community
 
PPTX
Biwug 20180410 - I developed a SharePoint Framework solution, what to do next...
Yannick Borghmans
 
PPTX
SPSNL - SPFx Deployment
Yannick Borghmans
 
PPTX
Introduction to SharePoint Framework
Małgorzata Borzęcka
 
PPTX
The Greatest Introduction to SharePoint Framework (SPFx) on earth!
Małgorzata Borzęcka
 
PPTX
Introduction to development using the share point framework mv ps
Usama Wahab Khan Cloud, Data and AI
 
PPTX
New SharePoint Features in Visual Studio 2012!
SPC Adriatics
 
PDF
Power Saturday 2019 F6 - I developed a SPFx solution, what to do next and how...
PowerSaturdayParis
 
PDF
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
PDF
Understanding SharePoint Framework Extensions
BIWUG
 
PPTX
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
aOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
Sébastien Levert
 
PPTX
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
Bram de Jager
 
PPTX
Deep dive into share point framework webparts
Prabhu Nehru
 
PPTX
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
Sébastien Levert
 
PDF
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
PDF
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
SUGES (SharePoint Users Group España)
 
PPTX
Uncovering the Latest in SharePoint Development
Eric Overfield
 
SPS Dakar 2018 - I developed a SharePoint framework solution, what to do next...
aOS Community
 
Biwug 20180410 - I developed a SharePoint Framework solution, what to do next...
Yannick Borghmans
 
SPSNL - SPFx Deployment
Yannick Borghmans
 
Introduction to SharePoint Framework
Małgorzata Borzęcka
 
The Greatest Introduction to SharePoint Framework (SPFx) on earth!
Małgorzata Borzęcka
 
Introduction to development using the share point framework mv ps
Usama Wahab Khan Cloud, Data and AI
 
New SharePoint Features in Visual Studio 2012!
SPC Adriatics
 
Power Saturday 2019 F6 - I developed a SPFx solution, what to do next and how...
PowerSaturdayParis
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Understanding SharePoint Framework Extensions
BIWUG
 
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
aOS Canadian Tour - Toronto - From SharePoint to Office 365 Development
Sébastien Levert
 
aOS Canadian Tour - Montreal - From SharePoint to Office 365 Development
Sébastien Levert
 
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
Sébastien Levert
 
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
Bram de Jager
 
Deep dive into share point framework webparts
Prabhu Nehru
 
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
Sébastien Levert
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
SUGES (SharePoint Users Group España)
 
Uncovering the Latest in SharePoint Development
Eric Overfield
 
Ad

More from aOS Community (20)

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

Recently uploaded (20)

PPTX
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
PPTX
The Yotta x CloudStack Advantage: Scalable, India-First Cloud
ShapeBlue
 
PPTX
Earn Agentblazer Status with Slack Community Patna.pptx
SanjeetMishra29
 
PDF
CIFDAQ'S Token Spotlight for 16th July 2025 - ALGORAND
CIFDAQ
 
PDF
HR agent at Mediq: Lessons learned on Agent Builder & Maestro by Tacstone Tec...
UiPathCommunity
 
PDF
Apache CloudStack 201: Let's Design & Build an IaaS Cloud
ShapeBlue
 
PPTX
Machine Learning Benefits Across Industries
SynapseIndia
 
PPTX
Lecture 5 - Agentic AI and model context protocol.pptx
Dr. LAM Yat-fai (林日辉)
 
PDF
Building Resilience with Digital Twins : Lessons from Korea
SANGHEE SHIN
 
PDF
UiPath on Tour London Community Booth Deck
UiPathCommunity
 
PDF
OpenInfra ID 2025 - Are Containers Dying? Rethinking Isolation with MicroVMs.pdf
Muhammad Yuga Nugraha
 
PDF
Shuen Mei Parth Sharma Boost Productivity, Innovation and Efficiency wit...
AWS Chicago
 
PDF
Novus-Safe Pro: Brochure-What is Novus Safe Pro?.pdf
Novus Hi-Tech
 
PDF
Integrating IIoT with SCADA in Oil & Gas A Technical Perspective.pdf
Rejig Digital
 
PDF
Bitcoin+ Escalando sin concesiones - Parte 1
Fernando Paredes García
 
PDF
Trading Volume Explained by CIFDAQ- Secret Of Market Trends
CIFDAQ
 
PDF
Meetup Kickoff & Welcome - Rohit Yadav, CSIUG Chairman
ShapeBlue
 
PDF
NewMind AI Journal - Weekly Chronicles - July'25 Week II
NewMind AI
 
PDF
How Current Advanced Cyber Threats Transform Business Operation
Eryk Budi Pratama
 
PPTX
python advanced data structure dictionary with examples python advanced data ...
sprasanna11
 
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
The Yotta x CloudStack Advantage: Scalable, India-First Cloud
ShapeBlue
 
Earn Agentblazer Status with Slack Community Patna.pptx
SanjeetMishra29
 
CIFDAQ'S Token Spotlight for 16th July 2025 - ALGORAND
CIFDAQ
 
HR agent at Mediq: Lessons learned on Agent Builder & Maestro by Tacstone Tec...
UiPathCommunity
 
Apache CloudStack 201: Let's Design & Build an IaaS Cloud
ShapeBlue
 
Machine Learning Benefits Across Industries
SynapseIndia
 
Lecture 5 - Agentic AI and model context protocol.pptx
Dr. LAM Yat-fai (林日辉)
 
Building Resilience with Digital Twins : Lessons from Korea
SANGHEE SHIN
 
UiPath on Tour London Community Booth Deck
UiPathCommunity
 
OpenInfra ID 2025 - Are Containers Dying? Rethinking Isolation with MicroVMs.pdf
Muhammad Yuga Nugraha
 
Shuen Mei Parth Sharma Boost Productivity, Innovation and Efficiency wit...
AWS Chicago
 
Novus-Safe Pro: Brochure-What is Novus Safe Pro?.pdf
Novus Hi-Tech
 
Integrating IIoT with SCADA in Oil & Gas A Technical Perspective.pdf
Rejig Digital
 
Bitcoin+ Escalando sin concesiones - Parte 1
Fernando Paredes García
 
Trading Volume Explained by CIFDAQ- Secret Of Market Trends
CIFDAQ
 
Meetup Kickoff & Welcome - Rohit Yadav, CSIUG Chairman
ShapeBlue
 
NewMind AI Journal - Weekly Chronicles - July'25 Week II
NewMind AI
 
How Current Advanced Cyber Threats Transform Business Operation
Eryk Budi Pratama
 
python advanced data structure dictionary with examples python advanced data ...
sprasanna11
 

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