SlideShare a Scribd company logo
Sharing code efficiently in
your organisation by
creating private packages
Elio Struyf - @eliostruyf
Solutions architect @ Valo Intranet
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf
Sharing is important!
What makes it so important?
LESS CODE
DUPLICATION
EASIER TO FIX
ISSUES
FASTER RELEASES NOT REINVENTING
THE WHEEL
What are your options?
Option 1:
The library component
OpDon 1: Library component
• GA since 1.9.1
• Allows you to share common logic (available on-demand)
• Installed as a sppkg file on the SP environment
• The bundles will be smaller, as common code gets shared
• Use it by selecting Library as component type in the generator
Be aware of some disadvantages
❗You can only host one version of the library component
❗It is not supported to have other component types in the project
❗Not supported on site collecTon app catalog
⚠ You need to reference library component type during development
npm link
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf
What is Lerna?
• A tool for managing JS projects with multiple packages
• Mono-repo à all your projects in one repository
• Automatically figures out the project local dependencies
• Almost no configuration is required
Start:
• lerna init
• lerna bootstrap (runs a npm ci on all projects)
Demo:
Lerna in combination with
SPFx
When to use the library component?
✅ When you maintain all projects which make use of the library
✅ When you can update all projects at once
✅ Sharing localizaTon across all projects
✅ To make your bundles smaller
✅ …
That was it!
Option 2:
Private npm dependencies
Azure ArDfacts
What is Azure Artifacts?
• Create, host, and share packages with your team/organization
• Sharing code efficiently $
• npm, NuGet, Python, …
• Allows you to create public and private feeds
But there is more
• It allows you to protect packages
• Keeps every public source (npmjs) safe in your feed
• Only you have control to delete it
• You know which versions are installed
Why a private dependency?
✅ Each of you projects can use its own version
✅ No impact when you implement breaking changes
✅ Not SPFx specific
✅ Will work for classic and on-prem projects
❗ Could lead to larger bundles (talking about KBs)
Pricing
Pricing
• First 5 users are free
à € 5,06 per user per month
• Storage:
• 0 - 2 GB = Free
• 2 - 10 GB = € 1.69 per GB
• 10 - 100 GB = € 0.85 per GB
• 100 - 1,000 GB = € 0.43 per GB
• 1,000+ GB = € 0.22 per GB
Some important things
• Immutability
• Once particular version is published, that is permanently reserved. You cannot
update it or delete it and re-upload it
• npm versioning (semantic versioning)
• Recycle bin
• You can recover deleted or unpublished packages from the recycle bin (30
days)
How to start?
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf
Demo:
Feed creation
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf
Why Lerna?
• Same reasons like for the library component
• Easier development without the need to install the dependency
locally
Demo:
The project
Build and release
What do we want to do in the pipeline?
• Install the npm dependencies
• Build the project
• Publish the project as a npm dependency
• DEV à beta version
• Master à latest version
YAML pipelines are the preferred way
• Pipelines as code
• Automated from your repo
• Easier to go back to earlier builds
• Defined in: azure-pipelines.yml
• Set secret variables via the web UI
or in variables group
Demo:
Azure DevOps Pipeline
Installing your private
dependency
How to install?
• Connect to your feed
à Add credentials to $home/.npmrc (every 90 days*)
à Use the vsts-npm-auth dependency (Windows only)
• Create a .npmrc file in your project
à Add the feed registry to it
• Start installing your dependencies
* You can also create a personal access token which can last longer then 90 days
Feed views
• @local (default)
à contains all packages published or saved from upstream sources
• @prerelease
à used for early tesTng (opTonal)
• @release
à used for released versions (opTonal)
Package acDons
• Promote
à Used for the (pre)release view, to only contain promoted versions
• Deprecate
• Unpublish
Demo:
Installing your dependency
Questions?
Office Servers & Services MVP
Azure / Office 365 / SharePoint
@eliostruyf
www.eliostruyf.com
elio@valointranet.com
Elio Struyf
Solutions Architect at Valo Intranet
O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf

More Related Content

PDF
NSA - No thanks - Build your own cloud with OpenStack and Cloud Foundry | any...
PDF
Securing Containers From Day One | null Ahmedabad Meetup
PPTX
Resources for Navigating Drupal Upgrades: Versions 6 Through 8 And What It Me...
PDF
Rebuilding Legacy Apps with Domain-Driven Design - Lessons learned
PPTX
AWS for the Java Developer
PPTX
Creating your own private Download Center with Bintray
PDF
Greenfields tech decisions
PDF
CI/CD with Azure DevOps and Azure Databricks
NSA - No thanks - Build your own cloud with OpenStack and Cloud Foundry | any...
Securing Containers From Day One | null Ahmedabad Meetup
Resources for Navigating Drupal Upgrades: Versions 6 Through 8 And What It Me...
Rebuilding Legacy Apps with Domain-Driven Design - Lessons learned
AWS for the Java Developer
Creating your own private Download Center with Bintray
Greenfields tech decisions
CI/CD with Azure DevOps and Azure Databricks

What's hot (20)

PDF
Getting Started with Infrastructure as Code (IaC)
PPTX
Cloud patterns
PDF
Devoxx PL 2018 - Microservices in action at the Dutch National Police
PDF
Monitor Micro-service with MicroProfile metrics
PPTX
An Azure of Things, a developer’s perspective
PPTX
ADF Basics and Beyond - Alfresco Devcon 2018
PPTX
AWS Meetup - Nordstrom Data Lab and the AWS Cloud
PPTX
Vs java (1)
PPTX
Flynn Bundy - 60 micro-services in 6 months
PDF
SDL Trados Studio 2014... what's new?
PPT
Nordstrom Data Lab Recommendo API with Node.js
PDF
Why Not Public Cloud?
PDF
Kubernetes, The Day After
PDF
Gradual migration to MicroProfile
PDF
Secure JAX-RS
PPTX
Blue Chip Tek AWS Connect and Protect Presentation #2
PPTX
JPA 2.1 on Payara Server
PPTX
Elm - Could this be the Future of Web Dev?
PDF
Micro Service – The New Architecture Paradigm
PPTX
Upgrading your Infrastructure via Terraform
Getting Started with Infrastructure as Code (IaC)
Cloud patterns
Devoxx PL 2018 - Microservices in action at the Dutch National Police
Monitor Micro-service with MicroProfile metrics
An Azure of Things, a developer’s perspective
ADF Basics and Beyond - Alfresco Devcon 2018
AWS Meetup - Nordstrom Data Lab and the AWS Cloud
Vs java (1)
Flynn Bundy - 60 micro-services in 6 months
SDL Trados Studio 2014... what's new?
Nordstrom Data Lab Recommendo API with Node.js
Why Not Public Cloud?
Kubernetes, The Day After
Gradual migration to MicroProfile
Secure JAX-RS
Blue Chip Tek AWS Connect and Protect Presentation #2
JPA 2.1 on Payara Server
Elm - Could this be the Future of Web Dev?
Micro Service – The New Architecture Paradigm
Upgrading your Infrastructure via Terraform
Ad

Similar to O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf (20)

PPTX
GDG Morgantown, WV: Write code you can depend on!
PPTX
Anton Cherednikov "Modules and Artifacts in NPM"
PDF
Modules and artifacts in NPM by Anton Cherednikov
PDF
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
PPTX
Client-Side Packages
PDF
React Apps at AirHelp. Lessons learned.
PPTX
A Real ADF Experience Part II
PPTX
Javascript Apps at Build Artifacts
PPTX
Introduction to NodeJS JSX is an extended Javascript based language used by R...
KEY
Nodeconf npm 2011
PPTX
Modular development in Node.js
PDF
Cover Your Apps While Still Using npm
PDF
DownTheRabbitHole.js – How to Stay Sane in an Insane Ecosystem
PDF
Why You Should Use MERN Stack for Startup Apps?
PPTX
Getting Started with Azure Artifacts
PDF
Bringing Open-Source Practices to Your Day Job
PPTX
Building Open-Source React Components
PPTX
Building Open-source React Components
PDF
Cross-Platform Desktop Apps with Electron (CodeStock Edition)
PDF
Building a Desktop Streaming console with Electron and ReactJS
GDG Morgantown, WV: Write code you can depend on!
Anton Cherednikov "Modules and Artifacts in NPM"
Modules and artifacts in NPM by Anton Cherednikov
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Client-Side Packages
React Apps at AirHelp. Lessons learned.
A Real ADF Experience Part II
Javascript Apps at Build Artifacts
Introduction to NodeJS JSX is an extended Javascript based language used by R...
Nodeconf npm 2011
Modular development in Node.js
Cover Your Apps While Still Using npm
DownTheRabbitHole.js – How to Stay Sane in an Insane Ecosystem
Why You Should Use MERN Stack for Startup Apps?
Getting Started with Azure Artifacts
Bringing Open-Source Practices to Your Day Job
Building Open-Source React Components
Building Open-source React Components
Cross-Platform Desktop Apps with Electron (CodeStock Edition)
Building a Desktop Streaming console with Electron and ReactJS
Ad

More from NCCOMMS (20)

PDF
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
PDF
O365Con19 - Model-driven Apps or Canvas Apps? - Rick Bakker
PDF
O365Con19 - Office 365 Groups Surviving the Real World - Jasper Oosterveld
PDF
O365Con19 - Developing Timerjob and Eventhandler Equivalents - Adis Jugo
PDF
O365Con19 - Sharepoint with (Artificial) Intelligence - Adis Jugo
PDF
O365Con19 - What Do You Mean 90 days Isn't Enough - Paul Hunt
PDF
O365Con19 - Tips and Tricks for Complex Migrations to SharePoint Online - And...
PDF
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
PDF
O365Con19 - Start Your Journey from Skype for Business to Teams - Sasja Beere...
PDF
O365Con19 - Lets Get Started with Azure Container Instances - Jussi Roine
PDF
O365Con19 - Azure Blackbelt - Jussi Roine
PDF
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
PDF
O365Con19 - Be The Protagonist of Your Modern Workplace - Corinna Lins
PDF
O365Con19 - How to Really Manage all your Tasks Across Microsoft 365 - Luise ...
PDF
O365Con19 - Things I've Learned While Building a Product on SharePoint Modern...
PDF
O365Con19 - Keep Control of Your Data with AIP and CA - Bram de Jager
PDF
O365Con19 - Kaizala a Dive Into the Unknown - Rick van Rousselt
PDF
O365Con19 - How to Inspire Users to Unstick from Email - Luise Freese
PDF
O365Con19 - O365 Identity Management and The Golden Config - Chris Goosen
PDF
O365Con19 - Exposing Multi-Geo Capabilities in Office 365 - Paul Hunt
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - Model-driven Apps or Canvas Apps? - Rick Bakker
O365Con19 - Office 365 Groups Surviving the Real World - Jasper Oosterveld
O365Con19 - Developing Timerjob and Eventhandler Equivalents - Adis Jugo
O365Con19 - Sharepoint with (Artificial) Intelligence - Adis Jugo
O365Con19 - What Do You Mean 90 days Isn't Enough - Paul Hunt
O365Con19 - Tips and Tricks for Complex Migrations to SharePoint Online - And...
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
O365Con19 - Start Your Journey from Skype for Business to Teams - Sasja Beere...
O365Con19 - Lets Get Started with Azure Container Instances - Jussi Roine
O365Con19 - Azure Blackbelt - Jussi Roine
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Be The Protagonist of Your Modern Workplace - Corinna Lins
O365Con19 - How to Really Manage all your Tasks Across Microsoft 365 - Luise ...
O365Con19 - Things I've Learned While Building a Product on SharePoint Modern...
O365Con19 - Keep Control of Your Data with AIP and CA - Bram de Jager
O365Con19 - Kaizala a Dive Into the Unknown - Rick van Rousselt
O365Con19 - How to Inspire Users to Unstick from Email - Luise Freese
O365Con19 - O365 Identity Management and The Golden Config - Chris Goosen
O365Con19 - Exposing Multi-Geo Capabilities in Office 365 - Paul Hunt

Recently uploaded (20)

PDF
Machine learning based COVID-19 study performance prediction
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PPTX
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
PDF
GamePlan Trading System Review: Professional Trader's Honest Take
PPTX
Big Data Technologies - Introduction.pptx
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Network Security Unit 5.pdf for BCA BBA.
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Advanced Soft Computing BINUS July 2025.pdf
PDF
[발표본] 너의 과제는 클라우드에 있어_KTDS_김동현_20250524.pdf
Machine learning based COVID-19 study performance prediction
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
GamePlan Trading System Review: Professional Trader's Honest Take
Big Data Technologies - Introduction.pptx
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
20250228 LYD VKU AI Blended-Learning.pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Network Security Unit 5.pdf for BCA BBA.
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Unlocking AI with Model Context Protocol (MCP)
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
The AUB Centre for AI in Media Proposal.docx
Chapter 3 Spatial Domain Image Processing.pdf
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Advanced Soft Computing BINUS July 2025.pdf
[발표본] 너의 과제는 클라우드에 있어_KTDS_김동현_20250524.pdf

O365Con19 - Sharing Code Efficiently in your Organisation - Elio Struyf

  • 1. Sharing code efficiently in your organisation by creating private packages Elio Struyf - @eliostruyf Solutions architect @ Valo Intranet
  • 4. What makes it so important? LESS CODE DUPLICATION EASIER TO FIX ISSUES FASTER RELEASES NOT REINVENTING THE WHEEL
  • 5. What are your options?
  • 7. OpDon 1: Library component • GA since 1.9.1 • Allows you to share common logic (available on-demand) • Installed as a sppkg file on the SP environment • The bundles will be smaller, as common code gets shared • Use it by selecting Library as component type in the generator
  • 8. Be aware of some disadvantages ❗You can only host one version of the library component ❗It is not supported to have other component types in the project ❗Not supported on site collecTon app catalog ⚠ You need to reference library component type during development npm link
  • 11. What is Lerna? • A tool for managing JS projects with multiple packages • Mono-repo à all your projects in one repository • Automatically figures out the project local dependencies • Almost no configuration is required Start: • lerna init • lerna bootstrap (runs a npm ci on all projects)
  • 13. When to use the library component? ✅ When you maintain all projects which make use of the library ✅ When you can update all projects at once ✅ Sharing localizaTon across all projects ✅ To make your bundles smaller ✅ …
  • 15. Option 2: Private npm dependencies
  • 17. What is Azure Artifacts? • Create, host, and share packages with your team/organization • Sharing code efficiently $ • npm, NuGet, Python, … • Allows you to create public and private feeds
  • 18. But there is more • It allows you to protect packages • Keeps every public source (npmjs) safe in your feed • Only you have control to delete it • You know which versions are installed
  • 19. Why a private dependency? ✅ Each of you projects can use its own version ✅ No impact when you implement breaking changes ✅ Not SPFx specific ✅ Will work for classic and on-prem projects ❗ Could lead to larger bundles (talking about KBs)
  • 21. Pricing • First 5 users are free à € 5,06 per user per month • Storage: • 0 - 2 GB = Free • 2 - 10 GB = € 1.69 per GB • 10 - 100 GB = € 0.85 per GB • 100 - 1,000 GB = € 0.43 per GB • 1,000+ GB = € 0.22 per GB
  • 22. Some important things • Immutability • Once particular version is published, that is permanently reserved. You cannot update it or delete it and re-upload it • npm versioning (semantic versioning) • Recycle bin • You can recover deleted or unpublished packages from the recycle bin (30 days)
  • 28. Why Lerna? • Same reasons like for the library component • Easier development without the need to install the dependency locally
  • 31. What do we want to do in the pipeline? • Install the npm dependencies • Build the project • Publish the project as a npm dependency • DEV à beta version • Master à latest version
  • 32. YAML pipelines are the preferred way • Pipelines as code • Automated from your repo • Easier to go back to earlier builds • Defined in: azure-pipelines.yml • Set secret variables via the web UI or in variables group
  • 35. How to install? • Connect to your feed à Add credentials to $home/.npmrc (every 90 days*) à Use the vsts-npm-auth dependency (Windows only) • Create a .npmrc file in your project à Add the feed registry to it • Start installing your dependencies * You can also create a personal access token which can last longer then 90 days
  • 36. Feed views • @local (default) à contains all packages published or saved from upstream sources • @prerelease à used for early tesTng (opTonal) • @release à used for released versions (opTonal)
  • 37. Package acDons • Promote à Used for the (pre)release view, to only contain promoted versions • Deprecate • Unpublish
  • 40. Office Servers & Services MVP Azure / Office 365 / SharePoint @eliostruyf www.eliostruyf.com elio@valointranet.com Elio Struyf Solutions Architect at Valo Intranet