[GIS] Refreshing web appbuilder widget during development

arcgis-web-appbuilderdevelopmentwidget

I'm beginning to learn widget creating in Esri's Web Appbuilder for ArcGIS, but I'm having some problems getting the code to display when I make changes.

Coming from a Visual Studio-based web/Windows development background, I'm used to being able to make a few minor changes and then hit the debug button to see the changes in action. With the widget development, I'll make changes to my code (widget.js or widget.html) but then I'm unable to view the changes in the Web App (it always shows the last visible version).

Simply refreshing the page does not work, nor does clearing the cache or other web data. I've even tried restarting the node server and Web Appbuilder itself, but no go. The only thing that has worked so far is to delete the app I put the widget into, then create a new app and load the widget into that one. This seems to work most times, but it is tedious and time consuming. I got the idea from https://geonet.esri.com/thread/120241, but that is from the beta of Web Appbuilder nearly 2 years ago. Is there a better method for regularly refreshing a widget during development?

Best Answer

Robert Scheitlin, one of the most knowledgeable contributors for Web AppBuilder development on GeoNet, uses this workflow for developing new widgets:

When developing new custom widgets the widget/theme development work flow I use for all my work is this.

  1. Copy the [install dir]\client\stemapp\widgets\samplewidgets\CustomWidgetTemplate folder to the stemapp widget folder and rename it to your custom widgets name.
  2. Open the manifest.json and change the name property to the exact name of the widget folder from step one.
  3. I now work on changing the icon and some basics of the widget.
  4. Now I create a new app (normally the app will be named the same as my custom widgets name) and will see that my new custom widget is a choice in the widget choices.
  5. Add my custom widget to the new app.
  6. Now I do ALL my development in the [install dir]\server\apps[app #]\widgets\my custom widget name folder.
  7. Once I am done will my development I copy the widget folder back into the stemapp widgets folder so that new apps will use the completed widget code.
Related Question