Table of Contents



Introduction


While SharePoint Framework is evolving with new improvements in each version, it is recommended that old solution packages must be updated from time to time to receive the latest update & bug fixes. This article, explains the step to be followed for updating an existing SharePoint Framework(SPFx) solution to latest version.

Getting Started


In this article, we will take an existing SPFx solution from Technet gallery and upgrade it to latest version. These steps can be applied to almost all the SPFx solutions.

We have unzipped the downloaded file.

Check for outdated packages


In order to look for outdated packages, run the below command in windows powershell from the location where the package is placed.

npm outdated

This will return the set of outdated packages. Refer below screen shot.

All the packages will be listed in the Package.Json file present inside the project.



Here the packages which starts with @microsoft/sp- are related to SharePoint Framework.

Update the package


In order to update a specific package to latest version, run the below command

npm install @microsoft/sp-application-base@latest --save

Similarly, we can update all the packages by specifying its name. for example, in the above code @microsoft/sp-application-base is the package name.

In order to update the package to a specific version, run the below command

npm install @microsoft/sp-office-ui-fabric-core@1.6.0 --save

Here we have targeted the version 1.6.0 for the specific package.

For updating the package under dev dependencies, run the below command. The packages can be found in Package.Json file.

npm install @microsoft/sp-build-web@latest --save-dev

-dev after --save updates the package location under dev dependencies.

Clean the package


Once all the necessary packages have been updated, clean the package before build. In order to clean the package, run the below command.

gulp clean

By running the above command, all the old artifacts present in the solution is deleted.

Build the Package

To build the package, run the below command.

gulp build

If at a certain stage, an error is thrown during build stage, slight modification in the solution might have to be performed based on the error message.

Important : During the upgrade from version 1.4.1 to 1.7.0 in this article, a tslint.Json file was modified and moved from Config folder to parent location. 

Update Yeoman Generator


Yeoman generator receives updates time to time, so it is essential that we update & run the latest one.

Check for latest package


In order to check if it requires update, run the below command.

npm outdated -g

After executing, it will list down all that requires update related to Yeoman Generator. See the below screen shot for example.

Behind the scene it compares the version running globally in the system with npm registry. This also list down the current version and the wanted version.



Update the Yeoman Generator for SharePoint


In order to update the yeoman generator for SharePoint to latest version, run the below command.

npm install @microsoft/generator-sharepoint@latest -g

This will update the yeoman generator globally.

Conclusion


Thus we learned on how SPFx solution can be upgraded. Below screen shot shows the comparison of Old and New Package.Json file.

                           Old                                                           New                                 
 

See Also