How to do the SPFx CICD using GitHub Actions?

Summary

Use following very simple steps to get any PnP SPFx web part or extensions to your tenant using Github Actions.

I recommend use the following two links to get any sample code.

https://aka.ms/spfx-webparts

https://aka.ms/spfx-extensions

Prerequisite is that you have already cloned the PnP repo. Or if you like you can download the repo as a Zip file.

c:\PnPSPFX\>git clone https://github.com/pnp/sp-dev-fx-webparts.git

Step by Step Solution

Step #1 Lets assume you want to get the “js-application-alert-message“. Create a Git Hub Repo.

Create a Git repo/

Step #2 Copy entire directory “js-application-alert-message” to a new location say ‘c:\demo\js-application-alert-message’ e.g.

xcopy react-application-festivals*.* c:\demo2\js-application-alert-message*.* /E /F

Step #3 Push the new directory with the code to the NEW GitHub repo using the following commands.

 git init
 git add *.*
 git commit -m "first draft"
 git remote add origin https://github.com/pankajsurti/react-application-festivals.git
 git push -u origin master 

Step #4 Your source in the GitHub repo. It is time for creating two new secrets.

adminUsername (I used the admin@[TENANT_NAME].onmicrosoft.com)

adminPassword (password for the tenant)

on your repo click on “Settings” then click on the “Secrets”.

Add above two new secrets.

Step #5 It is time to add the GitHub Actions Workflow.

Step #6 Check the build and deploy is complete.

About Pankaj

I am a Developer and my linked profile is https://www.linkedin.com/in/pankajsurti/
This entry was posted in SharePoint. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s