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

12829
23
Jump to solution
01-19-2015 08:40 PM
StephenLead
Regular Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
LarryStout
Occasional Contributor III

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

View solution in original post

23 Replies
RobertScheitlin__GISP
MVP Emeritus

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

StanMcShinsky
Occasional Contributor III

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.

0 Kudos
MahtabAlam1
Occasional Contributor

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.

0 Kudos
StephenLead
Regular Contributor III

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

0 Kudos
ReneRubalcava
Frequent Contributor

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

0 Kudos
StephenLead
Regular Contributor III

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

0 Kudos
StephenLead
Regular Contributor III

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%

0 Kudos
StephenLead
Regular Contributor III

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.

0 Kudos
LarryStout
Occasional Contributor III

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