Create GitHub actions for SPFx solution

Introduction

Anoop
Anoop
Nov 26, 2019 · 4 min read

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:

  1. adminUsername — the email address of the tenant admin
  2. adminPassword — the password of that user
Secrets

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”.

Setting up new workflow

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.

Commit the workflow file

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.

View the running workflow
Details of the running workflow

After the deploy job is complete, we can see that the app will be present in the app catalog site.

App in app catalog

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.

Anoop

Written by

Anoop

SharePoint developer at Content and Code.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade