SharePoint Framework (SPFx) DevOps

SHAREPOINT FRAMEWORK: DEVELOPMENT AUTOMATION 

While working on a SharePoint – based project for the Veterans’ Affairs, I had difficulty maintaining the different environments. Specifically, I ran into problems with versioning and partitioning SharePoint Framework (SPFx) components. In modern development practice the ideal scenario is to maintain true development, test, and production workspaces. Using SPFx, I have found it is best to use a SharePoint site as production and subsites for development and test. In this case, the App Catalog would be located on the production site. It would contain all components for the subsites as well. However, using this setup creates a predicament. The SPFx App requires a unique GUID for each environment. This means with each deployment you must change the GUID for the webpart (in multiple places).

Perhaps the easiest way to automate this is to create a task in your gulp file:

Note that package-solution.json and .manifest.json are the two files requiring our attention. They contain the GUIDs we need to update. The next step is to parse the environment argument and assign GUIDs accordingly. You can find a GUID generator online to generate 6 (2 per environment) unique GUIDs to use. You only need to generate these GUIDs once. When they are defined, they should never change! When deploying a WebPart the GUID will be consistent for that environment.

Next, we need to overwrite the selected files with the updated information. SharePoint will use the designated GUIDs to distinguish your different apps in the shared App Catalog.

Lastly, set up the ‘deploy’ gulp task definition that you will run when you are ready to deploy. This will run all the necessary tasks to have a clean .sppkg file for deployment:

When you run the Gulp task, the syntax will be something like this: gulp deploy –env “dev”.

If you are implementing this for an application customizer, there is an additional step. You will need to update two additional .xml files with the new GUIDs you used for the manifestJson.Id. This code extracts the xml content and converts it to JSON. Then it updates the JSON with your value and writes the file back to xml.

And you’re done! Using this new gulp task, you can easily rename and update the GUID’s for your SPFx Webparts and Application Customizers. This is appropriate for use in the same SharePoint Site Collection. With this, you have created an easy to manage site with a logical structure. You also have a streamlined method to deploy your SPFx projects easily across your different environments.

Author:
Zachary Johnson
Solutions Developer at Definitive Logic

Suggested content for you