Search code examples
node.jssharepointgulpribbon

Debugging Sharepoint Framework Webpart without running gulp serve --ship and gulp package-solution --ship every time


I'm currently developing a Sharepoint WebPart using the Sharepoint Framework environment. I'm currently working with the ribbon(adding buttons and dropdowns) so I am obliged to deploy the webpart online so I can test the ribbon related tasks(there is no ribbon in the workbench).

My steps for testing a simple change in a js file are these: 1)Running "gulp clean" command to clean old solution files ~10sec
2)Running "gulp bundle --ship" command ~80 sec
3)Running "gulp package-solution --ship" command to get the .sppkg file ~20sec
4)Uploading the sppkg file to the App catalog of my online Sharepoint environment
5) Refresh page with webpart to see changes

As you can see this adds to more than 2 minutes of "work" before actually seeing the change I made.

The question is: Is there a way I can test the changes made in the js files inside the Sharepoint Framework solution faster on the sharepoint online environment??

Thanks!


Solution

  • You described making of a production build. During development you can use following steps:

    1. gulp bundle (without ship)
    2. gulp package-solution (without ship)
    3. uploading the sppkg file to the App catalog
    4. gulp serve --nobrowser

    After that sharepoint will load js files from your localhost and you dont need to repeat all these steps after every change. You change js file, gulp automatically rebuild app and you can refresh page with webpart to see changes