Azure / Office 365 / SharePoint Development / Search

Using the Office 365 CLI in your VSTS CI/CD pipelines for SharePoint Framework solutions

April 05, 2018

Automating installation/deployment processes of any type of solutions is so great, and in Visual Studio Team Services you can do this by a task-driven process. For many of the SharePoint Solutions I create, I have an automated CI/CD process behind the scenes running. So that once my code is ready, it will automatically deploy to my test environment.

Last year I documented my process in an article of how I achieved it: Configure a build and release pipeline for your SharePoint Framework solution deployments. That process makes use of a couple gulp tasks to upload the solution package and deploy in your tenant

Office 365 CLI

The Office 365 CLI is a cross-platform CLI which allows you to manage various configuration settings on Office 365. The CLI evolved so rapidly, but one thing what was missing for easily integrating it into a build/release pipeline was to authenticate via a username and password.

As of version 1.2.0 of the Office 365 CLI, it is now possible to authenticate by providing user credentials which makes it a lot easier to use the CLI in VSTS.

Important: at the moment this v1.2.0 is in beta, so you will need to install it via npm I -g @pnp/office365-cli@next.

Putting the default building blocks in place

The first things to create is your build pipeline/definition in which you will install the project dependencies and create an SPFx solution package. This process is similar as in the first article I referenced, the build definition looks like this:

Default build process

Default build process

Node tool installer task

This task allows you to specify the Node version to use during the process. In my definition, I am defining it to version 8.x, which is the version the SPFx generator supports. By changing the Node version during the process, I saw that my builds were completed 2 minutes faster than before with Node v6.

Node tool installer set to v8

Node tool installer set to v8

npm install

Default task to install the project dependencies.

npm install task

npm install task

Bundle the project

Gulp task to bundle the SharePoint Framework Solution.

Bundling the solution

Bundling the solution

Package solution

Gulp task to package the solution.

Package the solution

Package the solution

Using the Office 365 CLI in your build/release pipelines

The next things to define are the tasks that will use the Office 365 CLI. You can configure the tasks in the same build definition, or if you want to release it to multiple environments, it might be better to create some release definitions.

These are the tasks which you require to add and deploy the solution package to your tenant:

Adding the Office 365 CLI

Adding the Office 365 CLI

Install the Office 365 CLI

This is an npm task which has been set to command custom. The custom command allows you to define the npm command and arguments so that it allows you to install the Office 365 CLI as follows:

Install the Office 365 CLI

Install the Office 365 CLI

Important: I made use of @next, because the v1.2.0 was still in beta.

Connect to SP APP Catalog

This is a command line task which uses the Office 365 CLI to connect to the APP Catalog site with the following command: o365 spo connect https://estruyfdev2.sharepoint.com/sites/catalog --authType password --userName $(username) --password $(password)

Connecting to the APP Catalog via the O365 CLI

Connecting to the APP Catalog via the O365 CLI

Note: username and password are variables which I configured in my build pipeline.

Add the solution to SP APP Catalog

This is a command line task which adds the created SharePoint solution package to the APP Catalog with the following command: o365 spo app add -p $(System.DefaultWorkingDirectory)/sharepoint/solution/my-solution.sppkg --overwrite

Adding the solution to the app catalog

Adding the solution to the app catalog

Create a PS-script to deploy the solution

For this task, I make use of the file creator task (https://marketplace.visualstudio.com/items?itemName=eliostruyf.build-task) which allows you to create a file during the build/release process. I use the task to create a PowerShell file which retrieves the list of available SharePoint apps, finds the one we are currently interested in, and deploys it.

Script file creation

Script file creation

Note: I use the title of the solution, instead of the filename. You can find this in the package-solution.json file.

This is the content of the file content:

Info: it may be that this task is no longer necessary in the future: https://github.com/SharePoint/office365-cli/issues/404

Run the PS-script

This is the last step in the process. You can use a PowerShell task to execute the script which was created in the previous task.

Execute the script

Execute the script

Build output

Here is the full build definition and its output:

Complete build process

Complete build process

Here you can see a run which completed successfully:

Complete build run

Complete build run

Comments

  • Pingback: Azure / Office 365 – 2 wekelijks overzicht – deel 36 - SP&C NL()

  • Pingback: Azure / Office 365 – Bi-weekly Summary – Part 36 - Sjoukje Zaal()

  • Devaraj Gowda Mudigere

    Hi Elio, I have the set of tasks created, my build works without issues locally with all commands.
    When i configure the same in VSTS it works fine without using –ship.

    If i use –ship anywhere in build/bundle then it fails at the end, here still the build is succesfull, but terminates ship.
    here is the log, it would be very helpful if this issue fixed
    ************************************************************************************************
    Finished subtask ‘copy-assets’ after 2.18 s
    Starting subtask ‘write-manifests’…
    Finished subtask ‘write-manifests’ after 399 ms
    Finished ‘bundle’ after 36 s
    ==================[ Finished ]==================
    Warning – Setting build task
    Project version: 0.0.1
    Build tools version: 3.2.7
    Node version: v8.11.1
    Total duration: 40 s
    Task warnings: 1
    Gulp failed with error: C:NPMModulesgulp.cmd failed with return code: 1

    • It is because of the warning. The VSTS task sees the warning as an error, so it will stop the process. So check in your output what the warning is, and fix it. You can also specify in the task itself to just continue on errors, or you can add suppression for the warning in the gulpfile.js file like this:

      • Devaraj Gowda Mudigere

        I have this build.addSuppression in my code but still its breaking because warning from tslint rules. anyhow build got partially succeeded on ‘continue with error’.

        but now there is another problem with release when i am extracting,
        ***********************************************************
        2018-04-19T06:34:55.0273567Z Physical Size = 154338155
        2018-04-19T06:34:55.0273647Z 64-bit = +
        2018-04-19T06:34:55.0273698Z
        2018-04-19T06:34:55.0273745Z
        2018-04-19T06:34:55.0273848Z Would you like to replace the existing file:
        2018-04-19T06:34:55.0273941Z Path: D:ar1aReleases.editorconfig
        2018-04-19T06:34:55.0274030Z Size: 499 bytes (1 KiB)
        2018-04-19T06:34:55.0274130Z Modified: 2018-04-19 06:14:41
        2018-04-19T06:34:55.0274237Z with the file from archive:
        2018-04-19T06:34:55.0274322Z Path: s.editorconfig
        2018-04-19T06:34:55.0274406Z Size: 499 bytes (1 KiB)
        2018-04-19T06:34:55.0274587Z Modified: 2018-04-19 06:14:41
        2018-04-19T06:34:55.0274685Z ? (Y)es / (N)o / (A)lways / (S)kip all / A(u)to rename all / (Q)uit?
        2018-04-19T06:34:55.0274777Z Archives with Errors: 1
        2018-04-19T06:34:55.0274830Z
        2018-04-19T06:34:55.0274901Z
        2018-04-19T06:34:55.0274994Z stderr:
        2018-04-19T06:34:55.0275079Z ERROR: Can’t allocate required memory!
        2018-04-19T06:34:55.0275158Z
        2018-04-19T06:34:55.0275235Z error: undefined;
        2018-04-19T06:34:55.0276893Z ##[section]Finishing: Extract files
        **************************************************************
        ERROR: Can’t allocate required memory!

      • Devaraj Gowda Mudigere

        Thank you Elio, That works !.
        All steps are successful, but i am not seeing the package deployed in app catalog. What could be the reason ?

        • 1. Is the package added?
          2. If it is added, it might went wrong it the deployment process. In that case check if you provided the right title + flags.
          3. If it is not added, check if you can run it from your own machine with the same credentials?

        • Devaraj Gowda Mudigere

          Its giving me so many problems from morning..

          More packages we add the more problems are!

          https://uploads.disquscdn.com/images/7c078a59a11fe128ec6abf592a7d7342d590959a108fa88dc04d6e49919023bd.png

        • Check the logs for the actual error. You could try the “Hosted” agent instead of the “Hosted VS2017” one. I always use the “hosted” one.

        • Devaraj Gowda Mudigere

          Yeah! Tried hosted first, then tried vs2017

        • John H

          Elio. We too are recently seeing the same issue (Gulp failed with error: C:npmprefixgulp.cmd). This is with deployments that have previously worked ok end-to-end.

          When I check the logs, I can see a 404 response due to ‘undefined’ in path name when getting the app catalog and attempting to upload the sppkg (/undefined/_api/web/GetFolderByServerRelativeUrl(…).

          Does this suggest anything obvious? I am unsure as to where I should start debugging.

        • Are you also using the Office 365 CLI for adding the package? If yes, does it work on your own machine?

        • John H

          Thanks for the quick response. We are not using CLI, but Gulp with the NPM package.

        • Devaraj Gowda Mudigere

          Elio, it’s working for me, thanks for your suggestion.

          John – Check logs line by line, fix warnings and erros if there are any.. Warnings are not marked with any diff color, so that will be the case, keep an eye!

  • Raymond Little

    I’ve been using these build process in our company and while we’re only starting out I can see the potential. We’re are currently on the basic package for VSTS and as such only get 240 min each month of build time and have just gone over that. I was wondering do you actively use this in practice and have you found you need to upgrade to Microsoft-hosted CI/CD?

    Cheers