Web App Builder Has Horrible Experience

270
2
Jump to solution
12-05-2019 02:58 PM
Joel-Hickok-1978
New Contributor II

Am I missing something?  When I make code changes to my custom widget, it's absolutely horrible getting my app to show the changes.  I created a demo app to test my widget and add my web map.  This is, of course, to save time so you can just test in the same app over and over.  But my widget code changes don't show up in the widget after the app has been created, it just keeps using the widget in the exact same code state it was when first added to the app.

The only way I can see my tiny little code changes and debug is to create a brand new app, re-add my web map to the app, and then add the widget again to the app.  THEN, and only then do my most recent code updates show up.

Is this a joke?  Am I doing something wrong?

I come most recently from the world of Webpack with an amazing dev server and hot module replacement, so this is an absolutely miserable experience so far.

Please help, or at least confirm that the Web App Builder dev environment is horrible so I know it's not just me!

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Joel,

   It is just you are not understanding the Cloning nature of WAB. Because WAB uses the stemapp and cloning workflow you are likely making your coding changes in the client\stemapp\widgets folder and thus not seeing any of your changes until you create a new app. See my workflow below.

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.

There are other ways to do development in WAB too. This is just my chosen workflow. If you are more of a utility user then you can use Grunt or Gulp to automate much of this and there is even a widget scaffolding utility called Yeoman.

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Joel,

   It is just you are not understanding the Cloning nature of WAB. Because WAB uses the stemapp and cloning workflow you are likely making your coding changes in the client\stemapp\widgets folder and thus not seeing any of your changes until you create a new app. See my workflow below.

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.

There are other ways to do development in WAB too. This is just my chosen workflow. If you are more of a utility user then you can use Grunt or Gulp to automate much of this and there is even a widget scaffolding utility called Yeoman.

View solution in original post

JoelHickok
New Contributor II

Perfect, thanks.  Works great.  This is the missing piece from the documentation I used.  Of course, in typical fashion, the docs omit the instructions that are most critical to a developer.