topic Re: How to "refresh" a widget's code while editing it in Web AppBuilder Custom Widgets Questions

How to "refresh" a widget's code while editing it

StephenLead — Tue, 20 Jan 2015 04:40:51 GMT

I'm playing around with Adam Drackley's excellent Local Layer Widget and am making changes in the Widget.js file

What is the best way refresh a web app when changes have been made to a widget's JS code?

1) re-loading an existing web app (eg http://localhost:3344/webappbuilder/?id=17) doesn't show the updated code

2) creating a new app from the homepage (http://localhost:3344/webappbuilder) doesn't show the updated code (edit: it seems to work now)

3) closing and reopening the Node window (opened by the startup.bat file) sometimes shows the updated code (but not consistently)

Is there a method to load the latest version of a widget's code without restarting the Node server?

Thanks,

Steve

Message was edited by: Stephen Lead

Re: How to "refresh" a widget's code while editing it

RobertScheitlin__GISP — Tue, 20 Jan 2015 13:13:34 GMT

Stephen,

Strange number 2 does not work for you. Recreating the app should ensure that your new app gets the latest changes of the widget code. This is what I do every day in widget development for WAB and do not have an issue with this workflow. The only time I have to re-start NodeJS is when I make a change in the nls strings.js file and occasionally when I make a html change that seems to be cached.

Here is my normal workflow:

What I find that works is this. When developing, I code my widget and save those changes and delete the old app in WAB and create a new one each time I make code changes (this is a workflow I started in Beta version so I just stuck with it.). I give the new app a simple name like "ID" and I do not configure anything but my widget I am developing. Then I go and make more changes in my widgets code and save and back in WAB I once again delete the old "ID" app and create a new one (this way I am sure that the "ID" app has the latest widget code).

If I make changes to the widgets nls/strings.js, I will have to restart Node to catch those changes. I have sometimes noticed the same for *.html file changes.

Creating a new app each code iteration is what I found to be the best workflow

Re: How to "refresh" a widget's code while editing it

StanMcShinsky — Tue, 20 Jan 2015 15:45:20 GMT

I find that by clearing the browser cache, I get the updated code. I clear mine very often when making changes. Clearing the cache it tells the browser to go and get the js files again and not look at the ones stored in the browser. I believe you can run your browser in incognito mode and it does not keep those files cached, but i have not gone down that road yet.

Re: How to "refresh" a widget's code while editing it

MahtabAlam1 — Tue, 20 Jan 2015 18:10:51 GMT

Generally simple refresh should work for javascript changes, but you can give try to CTRL+F5 try if this works or clearing the browser cache.

Re: How to "refresh" a widget's code while editing it

StephenLead — Tue, 20 Jan 2015 22:22:05 GMT

Thanks for the suggestions guys. I'm finding that CTRL-F5 definitely doesn't do the trick. I even tried the "delete everything" option, to no avail.

Today I'm finding that Robert's suggestion of re-creating the app is working. I'll keep trying that and see how it goes.

This is a bit of a pain, especially when making frequent small changes. If would be great if someone knew a way to refresh the app at the Node.js level

Cheers,

Steve

Re: How to "refresh" a widget's code while editing it

ReneRubalcava — Tue, 20 Jan 2015 22:25:33 GMT

Haven't tried it with WAB, but can you run nodemon? That will monitor changes to the code and restart node apps.

Re: How to "refresh" a widget's code while editing it

StephenLead — Tue, 20 Jan 2015 22:49:48 GMT

Hi Rene,

This looks promising. Simply switching out node with nodemon in the startup.bat file doesn't do the trick (ie, the app works but it doesn't automatically pick up changes in the widget.js file), but I'll explore it some more and report back.

REM START "Web AppBuilder for ArcGIS" /B %nodeFile% %serverjsFile%

START "Web AppBuilder for ArcGIS" /B nodemon %serverjsFile%

Cheers,

Steve

Re: How to "refresh" a widget's code while editing it

StephenLead — Tue, 20 Jan 2015 23:56:50 GMT

The documentation says: "nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application."

The startup.bat file first changes to the /server directory, then starts up node. I wonder if that means that only files under the /server directory are being monitored by nodemon?

9: SET serverPath=server

10: SET serverjsFile=server.js

18: CD %serverPath%

29: START "Web AppBuilder for ArcGIS" /B %nodeFile% %serverjsFile%

Re: How to "refresh" a widget's code while editing it

StephenLead — Wed, 21 Jan 2015 00:13:19 GMT

I can see via the file system that the files have not changed - C:\arcgis-web-appbuilder-1.0\server\apps\30\widgets\LocalLayerWidget shows the old code.

This explains why CTRL-F5 has no effect - it is correctly updating the page based on the latest code. Creating a new app (#31) shows the new code.

Can you guys possibly do a quick check? Make an app, and check its code in the arcgis-web-appbuilder-1.0\server\apps\APP_NUMBER\ directory, then make a simple change (eg add an alert) and see if the widget code changes?

This definitely suggests that a node-level change needs to occur.

Re: How to "refresh" a widget's code while editing it

LarryStout — Thu, 22 Jan 2015 23:01:49 GMT

I make my app and then edit the code in the <web app builder>\server\apps\<app name> folder. All I need to do to see edits is refresh the browser.

Once I'm happy with my changes, I shut down the node.js server and copy the widget and/or other files to the <web app builder>\client\stemapp folder. There may be some good reason to do it another way, but I've been doing it this way since Beta 1 last April, and have never had a problem with it.

Larry

Re: How to "refresh" a widget's code while editing it

StephenLead — Thu, 22 Jan 2015 23:26:04 GMT

Thanks Larry, that's a good workaround.

Re: How to "refresh" a widget's code while editing it

DouglasGennetten — Fri, 23 Jan 2015 16:32:29 GMT

What I have found works best is this process:

1) make code changes (directly in stemapp/widgets/mywidget)

2) delete widget in app, save.

3) F5 refresh browser

4) Re-add widget.

On annoyance I've had, when pulling a widget from source control into stemapp, if I don't first shut down the server, that widget gets added to the widget picker a bunch of times, and seems to stay that way. To remove the extras, I've done a full wab install replacement. There's got to be a much better way, I presume?

Re: How to "refresh" a widget's code while editing it

LarryStout — Fri, 23 Jan 2015 16:43:36 GMT

I have a batch file that checks port 3344 to see if all of the listeners have been released. Sometimes it takes a minute or two after you stop node.js. The batch file has one line:

cmd /K "netstat -aon | findstr "3344""

Larry

Re: How to "refresh" a widget's code while editing it

BedaKuster — Fri, 27 Feb 2015 09:30:27 GMT

We are doing the same. If you are using Google Chrome or Opera, you can connect the Developer Tools (F12 / CTRL + SHIFT + I) to your local filesystem. After this point you have full access to all your js/css/html files from Developer Tools. If you make changes with the css property inspector, the changes are saved to the stylesheets instantly and you don't have to copy them everytime.

JS-Debugging works great, you even can edit js code while debugging and you don't have to refresh the page anymore (except you are implementing new object-based functions). The js editor brings some simple kind of code completion.

Since we detected this feature, we are only using this "IDE" to develop widgets.

Workspaces - Persistent authoring in the DevTools - Google Chrome

Re: How to "refresh" a widget's code while editing it

DavidWendelken — Fri, 03 Mar 2017 18:52:19 GMT

Hi,

I use the workflow in this thread: https://community.esri.com/thread/170066#comment-576497

I'm using v2.3.

In addition, I go to the \server\apps\{app#}\init.js file where {app#} is a 1, 2, 3, etc. that matches the application map I'm working in.

In it, there is a line of code like this, but with various fields inside the curly braces:

dojoConfig = {

};

I added this to the list and haven't had a problem since:

dojoConfig = {

cacheBust: true

};

Of course, that will probably need to be removed in the deployed version to get the advantages of caching in a production environment.

Hope that helps!

Re: How to "refresh" a widget's code while editing it

GisGKAuckland — Sun, 12 Dec 2021 10:12:56 GMT

Larry's suggestion works but has anyone had any luck with the nodemonitor?

Helps me avoid big copy of files for small changes. I found this page nodemon

and the syntax I believe is

nodemon ./server.js localhost 8080

Not sure what the parameters should be when it's WAB?

Re: How to "refresh" a widget's code while editing it

RebeccaStrauch__GISP — Mon, 27 Mar 2017 03:22:53 GMT

I have no idea really, but have you tried 3344 instead of 8080?

Re: How to "refresh" a widget's code while editing it

GisGKAuckland — Mon, 27 Mar 2017 20:03:51 GMT

Yes I tried that but DevMon doesn't like it.

What I can infer is that Nodemon is working in the server directory and that's why all changes are reflected. I would like to do the same in the client folder.

Re: How to "refresh" a widget's code while editing it

DavidWendelken — Tue, 04 Apr 2017 14:55:02 GMT

I no longer recommend setting cacheBust = true. The v2.3 product has a serious bug that will cause widgets and icons not to display. (Of course, a future version might fix the problem.)

javascript - CacheBust in dojoConfig breaks paths - Stack Overflow

Re: How to "refresh" a widget's code while editing it

AndrewDavis5 — Tue, 05 Sep 2017 11:40:43 GMT

Thanks for the information. It is helpful to me at this stage of my understanding. coming up to speed on this has been hit and miss for me. But this information is helping. Andy