Microsoft 365 Community Community Demos, 6 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to PnP Office 365 CLI GitHub Actions for SPFx solutions

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on February 6, 2020.

In this 15-minute video, Anoop Tatti - SharePoint developer at Content and Code in London and Velin Georgiev - SharePoint and Office 365 technical architect at Pramerica Ireland, setup and run a workflow in GitHub that includes Office 365 CLI Actions. Examples of typical event driven workflows in GitHub are push, pull request, issue opened, issue edited, label created, label deleted. Tasks in a push code workflow may include: Build, test, deploy code and send informational e-mail to multiple people in org. Velin gives viewers a brief overview of CLI – installation and syntax. Anoop shows running a workflow that moves a SPFx package into production.

Office 365 CLI contributors on this project include: Garry Trinder (CPS Solutions) | @garrytrinder, Velin Georgiev (Pramerica) | @VelinGeorgiev, and Waldek Mastykarz (Rencore) | @waldekm

Demo Presenters:
• Anoop Tatti (Content and Code) | @anooptells
• Velin Georgiev (Pramerica) | @VelinGeorgiev

Supporting materials:
• PnP Office 365 CLI | https://pnp.github.io/office365-cli/
• Blog post - Create GitHub Actions for SPFx solution | http://bit.ly/complete-workflow-using-all-actions
• GitHub Actions documentation | http://bit.ly/github-actions-documentation
• Office 365 CLI GitHub Actions | http://bit.ly/o365-cli-github-actions
• Office 365 CLI Login Action | http://bit.ly/o365-cli-login-action
• Office 365 CLI Deploy Action | http://bit.ly/o365-cli-deploy-action
• Office 365 CLI Runscript Action | http://bit.ly/o365-cli-runscript-action
• GitHub Actions Tips | http://bit.ly/github-actions-tips
• GitHub.com/marketplace | https://github.com/marketplace

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Hello, everyone today we'll be looking at ticket up some of the katha actions, in particular for SharePoint framework projects. So the this, the the demo will be a combination of presentation. First then, some demo in the end before starting I, would like to thank the office 365 CLI team, in particular Whalen, Carrie and Warlick, with with all the help and input they provided during during the development right. So my name is a nullity and I'm a chef one developer at content and core there's my Twitter and blog.

A

If you'd like to follow so what our github actions. So you know till last year or on github, we could only host the core and share it with our fellow developers or fellow community members. We didn't have the ability to run the core on github last year, github introduced something called a set of actions with which we can. We can run the code on github. How cool is that? So we will be looking at those github access today, but to understand github actions.

A

You know we need to understand what a gate of workflow is so a bit of workflow like any other workflow, is a set of tasks that get executed when an event happens in github. So, for example, when you push a file on to a repository, you might want to build the core test code, deploy it and then send an email to someone saying that it has been deployed or send say 200 emails to to the favorite person in your organization. You shouldn't do that, but yeah.

A

So you can, you know, basically run a workflow in github. So, let's, let's briefly, look at this workflow structure, so there are different elements in a workflow. So the first one is: you know we start with the with the event. So that's the you know whenever you push some code to with a github repo or you create a pull request or you open an issue, then that's when the triggers and after that you know, you decide on a host machine, whether it's when those legs are our Mac machine.

A

This is because you know, if you want to build the code that you have just post or deploy the code, then we want it to run something right. So that's where you know we decide on what host machine we want to use, and then there are a set of tasks that that you can keep running so at asking about who might be say a line of code just to print something or several lines of code. You can write these innovative workflow now.

A

If the task is a common one say like building the code or deploying the core, then someone would have already written the code for you. So all you can do is just consume that core in in in your workflow, so someone would have hosted the core in github somewhere else, and all we can do in our workflow is just consume that code rather than writing the code ourselves and this this core that is hosted somewhere else written by our fellow developers, are called s, Kitab actions so in in our workflow.

A

Instead of writing the whole code ourselves, we just start consuming these pieces of code, and these are called as github actions and we will see you know the structure of the workflow, which is Yaman file very soon, but before that, I just wanted to show you what it is exactly so just a word on the events that that trigger target of workflow. So this even can be anything like a push or a pull request on a particular branch and an issue is opened.

A

Label is created deleted, so many events you just name them get up, have you know triggers for all those events and regarding the DBMS or the or the host machine where these workflows run they're all hosted by github? And you know, if you think these are all open source and if you think there is any software that is missing on the VM, you can submit a pull request. Someone from github team will give you that and if ok they'll accept a pull request, so that's that's pretty cool now.

A

How do we create a workflow in India repository? So if you have a repository in github, all you have to do is just click on the the actions tab that I violated over here and then you get a button called setup for yourself, so that will automatically create a yeah Mel file for you and once you save that, that's it, you have created a workflow. It's it's that simple! So what I've done here is I've just highlighted a simple workflow and all that workflow does is just prints, hello world.

A

So, if he's, if you see that I am saying on on the push event, use the windows latest machine and then just write a script to say hello world. Of course we have to write hello world, because this is our first workflow and when we push some file onto this repository, what we get is a nice execution and then developer runs hand prints, hello world on the console. Now, if we have a SP FX project hosted in github, we don't want to just print hello world.

A

When someone pushes a file which we want to you know deprave. The code run some test cases, deploy the code and then maybe send an email. So for that we can make use of office 365 CLI and to explain office. 365 CLI I pass it on to when it okay.

B

I'll just pop up for two minutes: I won't even share that screen. Maybe an OOP. You can open the official side, so the office 365 CLI is just a command line, interface similar to PNP powershell, where you can execute commands in IT, pros or devops guys or administrators second many to their tenants. They can also run automated scripts or they can use the see a line to an automated pipelines.

B

What we'll end up going to show another nice piece of functionalities that you can upgrade espy FX projects with the CLI and you can run multiple reports and and pull data reporting data out of office 265?

B

Maybe you know if you can go to the examples or just go download a bit to show how easy is to install so the CLI can be installed with that single command. It runs on all rating systems. That means that you can run on Linux, Mac, OS or Windows. Whatever you decide, if you can go on the examples just to show very quickly how the syntax looks, it's example is there and just open one of those open that the last one lists activate SharePoint?

B

So you can see that syntax here we have a variable in PowerShell and after that variable it's the CLI command and the CRI command. Pretty much looks like Asia, CLI or NPM, or get if you're familiar with those in Texas, but once you run that command, it's collecting data from office 365 and then we are outputting that data in a typical powershell manner down below.

B

So it's briefly held to catch on the syntax and and- and this is pretty much from my side now on- it will show how we can use the CLI in an automated pipeline and in progress and move SPF x package all the way to production. Maybe you can just move yeah.

A

Thank You Alan so as well in explain what we have done is we have created some get of actions using offices if I CLI that we can consume in our workflows in a negative workflows for SharePoint framework projects. So the first action is: is a login action. So what this does? Is it logs you in into the office list or into your tenant using CLI? We have to pass in the admin username and password.

A

Now these are stored in something called a secret sin in a github repo, 6:8 secrets or something which you create once and then you cannot edit them or no one can view them except the actions all you can do is just delete them, so they are very, very secret and the the next action is deploy app action. So what this does is it deploys the SP pkg file on to your tenant?

A

So before running the section, we would have run a girl package ship and that would have created created a file in the in the SharePoint, a slash solution, folder and that's what we will be using to deploy. So we passed a part of that and with a couple of other attributes, and then that takes care of deploying the ESP because you file onto your tenant and finally, we have a generic action called as a run script to this this action. You know you can execute any office in 64 CLS script.

A

So in this case you know, I've shown an example on how you can send an email so just to quickly explain the workflow that I'll be showing next so we'll be using something or C ICD workflow in which you know on on push. We will use the host machine as Linux, and then we will do the basic things that we do for all SPF X projects, which is NPM, install called bundle and called package solution, and after that we will use the CLI login, deploy and run script actions.

A

So basically, these actions that I just explained are hosted in the PNP repository on github. So we will be consuming those in our flow as tasks just.

B

Just to say our word, they are also available in github. Actions were snoring, yes, marketplace. Sorry yeah.

A

Thank you so before moving on to the demo, here are some of the helpful resources which will be pasted in the chat window and yeah. So you can take a look at this for all the helpful information right. So that's a lot of sites. Let's move on to the to the demo, so over here I have a get of github repository with a basic SharePoint framework web part.

A

So what what we have done here is set up workflow and, as you can see in the workflow I have said on push use the Ubuntu latest machine and then use the node 10 or text version. After that, the tasks are to install the dependencies using NPM CI, which is the come on specifically designed for continuous integration, and then we do a bundle on called package solution. This is create the DSP pkg file in SharePoint solution, and then we log in to the tenant using the CLI log in action.

A

Then we deploy the deployed a package onto our tenant and finally, we run a script which will just send an email to to say that the deployment is complete. So let's go ahead and quickly change the file, so I'll call source part 1. Of course you'll be. You know using an editor to change the file, but for this demo, I'll just use github itself come with those changes. So this means I have now pushed a file into the repository and when I click on actions, I should see the people flow that has kicked off.

A

So that is one job which is a build and deploy. And then you click on that. It gives you a nice entry user interface of how things progress. So, as you can see the actions that are the steps that I just explained, so we are using node node es, 10 or Tex, and then we are doing the NPM CI, which installs all the dependencies take about 25 to 30 seconds so again, depending upon the host machine. It varies so if it's Windows it might takes slightly longer or slightly less.

A

So it all depends on on the host machine that you choose and then after the dependencies are installed, we are doing a cull bundle and package solution. So these are the common tasks that we do with the shell framework project, and then we do run the office if I, CLE login. So as part of this command, we are installing office, 365, see ally as well.

A

So this is because on the host machine of historicity of a CLI is not pre-installed, so the login command takes care of that and since CLI is installed, the next one, which is deploy, recognizes the script and deploys the the app. And finally you know we send an email saying that the deployment was complete. The whole works were took one minute and 12 seconds.

A

So if I just come over here and refresh the my hacker dog, you can see that the package was deployed just a few minutes back and if it is quickly open, my email, I should have received an email saying the deployment is, is done so yeah. That's that's cute of actions for you. So hopefully you like to the move and yeah. That's it from my side, yeah.

B

How to get started just can you open the marketplace and just show everyone where they can find those actions, because this is important like once you go on, you can just type github actions marketplace in Google and yeah and then, if you type there is a search box here and if you type office, 365 CLI, you have one those actions. This is basically your starting point, because here the three actions and every action has a nice explanation.

B

In it, the run script and deploy are dependent on login, so login will always be present in your flow and the other one will be on depending on your need. But this is where, like a starting point where you can go search for those and just install them in your pipelines, thanks Anoop all right. Thank you. What.

C

Excellent. Thank you enough. Thank You valence upper super super helpful for everybody who is automating things in a khatam.