Office 365 & SharePoint Connect 2019 Session

1. Sharing code efficiently in
your organisation by
creating private packages
Elio Struyf - @eliostruyf
Solutions architect @ Valo Intranet

3. Sharing is important!

4. What makes it so important?
LESS CODE
DUPLICATION
EASIER TO FIX
ISSUES
FASTER RELEASES NOT REINVENTING
THE WHEEL

5. What are your options?

6. Option 1:
The library component

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)

12. Demo:
Lerna in combination with
SPFx

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
✅ …

14. That was it!

15. Option 2:
Private npm dependencies

16. Azure ArDfacts

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)

20. Pricing

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)

23. How to start?

26. Demo:
Feed creation

28. Why Lerna?
• Same reasons like for the library component
• Easier development without the need to install the dependency
locally

29. Demo:
The project

30. Build and release

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

33. Demo:
Azure DevOps Pipeline

34. Installing your private
dependency

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

38. Demo:
Installing your dependency

39. Questions?

40. Office Servers & Services MVP
Azure / Office 365 / SharePoint
@eliostruyf
www.eliostruyf.com
elio@valointranet.com
Elio Struyf
Solutions Architect at Valo Intranet