Create GitHub actions for SPFx solution
This post explains how to use the newly released GitHub actions/workflow with SharePoint Framework solutions. We will see how we can automate the build and deployment of an SPFx solution hosted in GitHub.
What are GitHub actions?
A GitHub Action is code that runs when an event happens on GitHub. A set of actions gives us a workflow. For example, there is push event on the repo a workflow, with actions to compile, build and test code, runs automatically. In this post we will be looking at how to write such a workflow for an SPFx solution. More details about GitHub Actions can be found here.
The required workflow
A workflow is written using YAML. We will be creating a workflow that does the following:
1. Run npm install
2. Run gulp build and package solution
3. Export the sppkg file
4. Using Office 365 CLI to upload and deploy the sppkg
Before proceeding make sure that you have created a repo in GitHub for your SPFx project and have pushed the code.
Secrets (environment variables)
Let’s start by creating some constants (secrets) that will be used in the workflow. These can be thought of as environment variables. Navigate to the GitHub repo and click on settings. Then click on secrets and the following:
- adminUsername — the email address of the tenant admin
- adminPassword — the password of that user
The workflow file
Click on “Actions”. GitHub will recognize that this is a node project, hence it will show us some predefined node js related workflow which can be used. However, we will not use a predefined one and instead start from scratch. So click on “Set up a workflow yourself”.
This will open a YAML file with some code in it. Delete all the code and add the following.
Make sure to update the name of the package on line number 7 and also the site URL and email address on lin number 55.
Here is a short explanation of what this does:
1. Run the workflow when anything is pushed to repo
2. Run a job named ‘build-and-deploy’ which does the following:
On a machine with the latest version of Ubuntu, install the npm packages
Perform a gulp build and gulp package solution
3. Using Office 365 CLI actions do the following:
Login to the tenant (using the secrets created earlier),
Deploy the sppkg (created in the previous step) and
Send an email.
More details on the structure of the file and definitions used can be found here.
Commit this file and we are done with creating the workflow.
Monitor the workflow
Since we have now pushed a file, the workflow will trigger. We can see this by clicking on the actions tab.
If we open the workflow that is running by clicking on it, we can see the steps in the jobs being executed. The “build” job executes first and once it is complete, the “deploy” job starts.
After the deploy job is complete, we can see that the app will be present in the app catalog site.
Summary
GitHub Actions are very powerful and help in automating a lot of tasks. We have seen how to make use of those to deploy an sppkg file. With more and more actions being created by developers we can think of creating an action for the whole workflow above and can use just that action to complete the build and deployment process.
