How to Upgrade SharePoint Framework solutions

Suggested Articles


What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Office 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

Build SharePoint client side web part using SharePoint Framework (SPFx) – I

Build SharePoint client side web part using SharePoint Framework (SPFx) – II

Build SharePoint client side web part using SharePoint Framework (SPFx) – III

How to Debug SharePoint Framework Solutions in Visual Studio Code

What is the Developers Point of View on SharePoint Framework

What is Required Toolchain for SharePoint Framework

How to Integrate gulp tasks with SharePoint Framework Toolchain

How to Provision SharePoint assets with solution packages


It is a continuation of previous article, if you’ve missed it. I recommend you to first walkthrough the links provided above suggestion for SharePoint Framework.

Let’s begin

In this article, I’ve used same project which I had created in previous article “How to Provision SharePoint assets with solution packages“.



Here, I’ll demonstrate, how to upgrade existing SharePoint Framework (SPFx) app in SharePoint Online.

Now, open existing project in Visual Studio Code and add a new element file named as “elements-v2.xml” with content showed below:




Add another XML file “upgrade-actions-v2.xml” for upgrade action. It should’ve location based on the folder name as a GUID which is placed under SharePoint -> Solution -> debug.




Now make below highlighted changes in “package-solution.json”. You must change below mentioned attributes:



  1. version – It should be increased.
  2. elementManifests – It will also include “elements-v2.xml” file.
  3. upgradeActions – It will hold file name of upgrade actions i.e. “upgrade-actions-v2.xml”




Now run below command:

gulp bundle –ship




Thereafter, create a package for our solution using below command:

gulp package-solution –ship




Now, again deploy (refer “How to Provision SharePoint assets with solution packages”) package .sppkg file. After deployment, you’ll see upgraded version of file in app catalog as below:





If you click on app’s tile, you shall see message to to get upgraded version of app.




Click on Get IT button and see the effect. You’ll see additional new list under site contents.




Thank you for reading…

I hope you enjoyed learning this tutorial and It will help you to move forward in SharePoint Framework (SPFx) world.



Please share your suggestions in the comment box below about this tutorial. This will help me to provide useful content moving forward .

Also don’t forget to share, subscribe and follow Three Queries on social media.

Thank You for your Time!



About Satyendra Mishra

An Engineer by education, Satyendra is a PMP certified Project Manager, Author, Blogger and Learner with 13+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (Angular), Xamarin for Android and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →