How to Setup Azure DevOps with SharePoint Framework
Azure DevOps privileges you to target any language to any platform to plan your project/product with Agile tools, manage code through VSTS or Git and deploy through CI/CD. SharePoint framework solution being extensively used technological platform — geeks like you are surely curious to know the coordination setup for Azure DevOps SharePoint Framework.
This article explains the high-level steps for setting up Azure DevOps Continuous Integration and Azure DevOps Continuous Delivery to automate your SharePoint Framework deployment.
Outlining the Scenario
SharePoint Consultants and Architects at Stridely Solutions had a narrated requirement for a client who is keen in using Microsoft services and enthusiastically willing to embrace Azure Automation, to meet the crucial requirement, below are the steps followed to achieve the setup of SharePoint Framework with Azure DevOps -
Create SharePoint Framework Client-Side Web Part:
● Considering that developer has already setup development environment of SharePoint Framework.
● Write following commands in command prompt to create new client-side web part: -
- md SPFxWelcome-webpart
2. cd SPFxWelcome-webpart
3. yo @microsoft/sharepoint
● Let’s create new SharePoint solution: -
1. Enter SPFxWelcome as Solution Name
2. Select SharePoint Online only (Latest)
3. Select Use the current folder for where to place the files
4. Select N to allow solution to be deployed to all sites immediately
5. Select WebPart as the client-side component type to be created
6. Enter SPFXWelcome as your web part name
7. Enter Web Part description if any
8. Select No JavaScript Framework as default
9. Now, Yeoman install require dependencies and scaffolding the solution files. It will take few mins to complete process.
● If process is completed successfully, then open solution in Visual Studio code by writing below command:
1. code
● To preview/run web part in local workbench, write below command:
1. glup serve
It will take some time to execute series of gulp tasks to create local, node-base https server on localhost and open your default browser to preview web part on workbench.html. Kindly click on + sign to add you web part on page. Once web part is added successfully, you can see similar blow screen based on your developed client-side web part.
Now, let’s set up build and deployment process automate with Azure DevOps CI and CD.
Continue Integration: -
● Considering developer has already setup the Azure DevOps account properly.
● Install Azure Repos Extension to connect Visual Studio Code with Git or VSTS and do make necessary configuration if required.
● SharePoint Framework client-side web part source code must be committed and Pushed in VSTS (i.e. Azure DevOps).
● Let’s follow the below steps to create Azure Build Pipeline:
o Sign in with Azure DevOps Credentials on URL — https://dev.azure.com
o Click on SharePoint Project, user will redirect on Summary Page.
o Click on Pipelines → Builds → New → New build pipelines
o Now, select your repository as per below screenshot and click on continue button.
o Select Empty Job to start creating new build definitions. Build definition can be described as a process template. Let’s start setup list of tasks for Continuous integration:
o Kindly add an Agent Job, if it’s not added and add list of tasks one by one in Agent Job 1.
▪ Add “Node Tool Installer” and set Node Version 8.x
▪ Add “npm Install”
▪ Add “gulp” and set bundle as Gulp Task, — ship as Arguments, Select Publish to Azure Pipeline under Junit Test Result and Set **/TEST-*.xml as Test Results Files
▪ Add “gulp” and set package-solution as Gulp Task, — ship as Arguments
▪ Add “Copy Files” and set **/*.sppkg as Contents, $(Build.ArtifactStagingDirectory)/drop as target folder.
▪ Add “Publish Build Artifacts” and set $(Build.ArtifactStagingDirectory) as Path to Publish, drop as Artifact name, Select Azure Pipelines/TFS as Artifact Publish location
▪ Click on Triggers tab and checked checkbox “Enabled Continuous Integration” and select branch for setup continuous integration.
▪ Finally, click on Save and Queue button to start build process for selected branch.
Continue Deployment: -
● Continuous Deployment takes validate committed code from build process and automatically released into the staging or production environment. Developer or DevOps Engineer can monitoring/track which deployment were successful or failed to narrow down any issues for specific versions.
● Let’s follow the below steps to create Azure Build Releases Pipeline:
o Click on Pipelines → Releases → New → New release pipelines
o Start with Empty Job → Enter Staging as Stage 1 name
o There are two sections under pipeline a) Artifacts b) Stages as per below screenshot
o Click on Add an artifact,
▪ Select Build Pipeline.
▪ Select Latest as default version.
▪ Write “SPFxFramework” as Source alias. You can write your own name.
o By clicking on Schedule not set icon, it will open properties panel where user can schedule release trigger on a day and time based on specified respective time zone.
o Create your continuous environment like staging, production deployment under Stages Section. Each stage has job and list of tasks to deploy build on staging and production server/sites respectively.
o Let’s setting up job and tasks for staging Office 365 site to deploy SharePoint Framework web part. Click on 1 Job, 0 task link, it will open Tasks tab.
o Kindly add Agent Job if it’s not added and add list of tasks one by one in Agent Job 1.
▪ Add “Node Tool Installer” and set Node Version 8.x
▪ Add “npm” and set Custom as command, install -g @pnp/office365-cli as Command and arguments.
▪ Add “Command Line” and set Display name “Connect SPO” and set below command as Script:
o365 spo login https://$(tenant).sharepoint.com/$(catalogsite) — authType password — userName $(username) — password $(password)
Note: — If you are using Office 365 CLI to connect your tenant for the first time then you need to perform an iterative logon with the account first. It’s must require granting access to PnP Office 365 Management Shell application which is used by Office 365 CLI to access your tenant on the behalf of your account else task will failed to non-iterative logon.
▪ Add “Command Line” and set Display name “SP add solution” and set below command as Script:
o365 spo app add -p $(System.DefaultWorkingDirectory)/ SPFxFramework/drop/drop/sharePoint/solution/spfx-welcome.sppkg — overwrite
▪ Add “Command Line” and set Display name “Deploy Solution” and set below command as Script:
o365 spo app deploy — name spfx-welcome.sppkg — appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite)
▪ Now, click on variable tab and setting up variables for environment:
● Catelogsite → URL of catalog site
● Username → Username of Office 365 account with admin permission
● Password → Password of Office 365 account
● Tenant → Name of tenant
▪ Click on Save button for save release definition
▪ Click on Create Release to deploy SharePoint Framework package in SharePoint Online Catalog site.
▪ If everything is successfully completed then you can check on site catalog that spfx-welcome.sppkg file has been deployed successfully.
Concluding to the flow, hoping the blog helped you to establish the setup, moreover in case of any query feel free to contact us, we believe if our efforts can come up brightly as the part of the solution for the huge SharePoint Community.
