topic Re: Debugging WAB App in Visual Studio 2012 in ArcGIS Web AppBuilder Questions

Debugging WAB App in Visual Studio 2012

AndrewHayden1 — Tue, 05 May 2015 22:49:00 GMT

I've built a simple app in WAB, downloaded it, unzipped it, run it off one of our web servers (successfully) but when I open it as a web site and try to debug it in VS (locally) I get "undefined(anonymous function) @ jimu.js/ConfigManager.js:105" in Chrome dev tools. Am I missing something? Any suggestions on how to successfully debug a WAB app in VS?

Though I'm not intending to use it, when I try to run it in Aptana I get:

Secure Connection Failed

The connection to 127.0.0.1:8020 was interrupted while the page was loading.

The page you are trying to view cannot be shown because the authenticity of the received data could not be verified.

Please contact the website owners to inform them of this problem.

Thoughts as to what this issue may be? Something between ide, ssl certificate and localhost?

Re: Debugging WAB App in Visual Studio 2012

RobertScheitlin__GISP — Wed, 06 May 2015 12:07:42 GMT

Andrew,

When you say you "downloaded the WAB app and added it to your web server", did you develop the app in AGOL and then download it or where did you initially configure your app? If you did download it from AGOL or Portal then the output is likely minified and and will extremely challenging to debug. This is what the WAB Developer edition if for. I have not ever considered trying to use VS for debugging a WAB site. I start with WAB Developer version and do all my debugging in Brackets (a free JS IDE).

Re: Debugging WAB App in Visual Studio 2012

AndrewHayden1 — Wed, 06 May 2015 15:52:58 GMT

Thank you Robert,

I configured the app in WAB Developer and downloaded it via the drop down to the right of the launch button (screen shot below). I'll be entirely honest, I'm a bit confused from the start if I should be chasing down that download or the \arcgis-web-appbuilder-1.1\server\apps\[app_number] folder. In simple terms, will one net me a minified version vs the other netting a non-minified version or is there some other difference? In either event, I've chased down both and not had any success debugging either in an IDE on a dev workstation (in VS or Aptana anyway). We were hoping to put the site under source control (VSS or TFS) to manage working on an app collaboratively. Is this not a "typical" workflow or is this generally handled differently? Also, I did just try Brackets and it gives me "The webpage at https://127.0.0.1:21561/index.html might be temporarily down or it may have moved permanently to a new web address" when I try to debug the app. I don't understand SSL but, between what Brackets and Aptana are telling me, is there is an issue with SSL, localhost and whatever web server each ide is using?

Re: Debugging WAB App in Visual Studio 2012

RobertScheitlin__GISP — Wed, 06 May 2015 16:21:12 GMT

Andrew,

So this is my development workflow.

Use WAB Dev edition to configure my app.
Once I am pretty comfortable with the apps data and widget configuration, I open the arcgis-web-appbuilder-1.1\server\apps\[app_number] folder in Brackets.
Now in Brackets I start changing code for the stemApp or any widgets I want to tweak.
Once I am ready to test deploy the app then I download the app using WAB "download" (like you have above).
If I find something still needs tweaking I don't do anything in the deployed test version, I just go back to Brackets and tweak the code there and repeat step 4.

I don't use SSL so I can't be of any help in that arena.

Re: Debugging WAB App in Visual Studio 2012

SubuSwaminathan1 — Wed, 06 May 2015 17:26:10 GMT

Adding to what Robert said, here is my two cents - You might want to think of using git for source control and combine that with using bitbucket for private repos or github for public repositories.

Also look at grunt or gulp for JS development related task automation that kind of take away the pain of not having a full fledged IDE. SublimeText is another paid option with a trial to try out.

I use brackets and notepad++ for now.

Subu

Re: Debugging WAB App in Visual Studio 2012

GerardoGarza — Thu, 07 May 2015 23:58:22 GMT

I'm finding myself in the same situation wanting to put project in source control.

Should I put the whole WAB folder in Git or just the app folder? What about WAB updates?

The WAB upgrade process sucks apps into new version so that'll mess up Git workflow.

Or should I download app to another location and put into Git?

Unfortunately, WAB builder is minifying the config.json of downloaded app making it harder to maintain versus WAB. I like Robert's workflow, but again I wonder about WAB upgrades and Git.

Any ideas?

Re: Debugging WAB App in Visual Studio 2012

RobertScheitlin__GISP — Fri, 08 May 2015 00:04:44 GMT

Gerardo,

I just beautify the config.json in brackets and it's back to normal. I don't use source control right now so I don't worry about those issues and as of right now the upgrade process for WAB is extremely manual.

Re: Debugging WAB App in Visual Studio 2012

GerardoGarza — Fri, 08 May 2015 00:10:02 GMT

Thanks Robert. Config back to normal.

I used Notepad++ with the JSTool plugin.

Re: Debugging WAB App in Visual Studio 2012

SubuSwaminathan1 — Fri, 08 May 2015 15:36:41 GMT

Gerardo,

Git keeps track of every change to your code under its watch - nothing ever gets lost. If you use a remote repository like github or bitbucket, you have another extra layer of protection. So you can go back in time pretty easily - of course one has to learn to do commits and branches and create a process that works for your team - one more thing to learn and keep track of.

Whether you put the whole WAB or individual WAB application projects in git, that is up to you. With all the custom widgets that the community is creating, it might be worth putting the whole WAB folder in git.

For full version upgrades, I would mothball the old version (zip the whole WAB folder up and back it up somewhere) and create a new git repo for the new WAB version before you start importing. Having multiple WABs in the same machine/location would require changing the ports that WAB(node js) is listening on - not tried yet but appears to be theoretically possible - maybe others can chime in on that.

Anyway things go wrong, you now have multiple ways of getting back to the previous working status quo quickly.

Subu

Re: Debugging WAB App in Visual Studio 2012

GerardoGarza — Fri, 08 May 2015 20:08:36 GMT

Thanks Subu.

I ended up putting entire WAB folder in a Git repository as a subfolder. When an update comes along, I can add new WAB folder to the same Git repo, do the upgrade procedure, and delete (or keep) previous versions subfolder. I also created some development branches. This is where I ran into an issue switching branches. I am running node as a windows service and apparently it locks the files in the server/db folder, so when I switched branches I got some Git permission errors. I just turn off service if I need to switch.

On a related note, regarding the files in the server/db folder. They are pointers to items in the application like widgets and themes. They seem to change every time I restart node service. Do you know how they interact with node?

Re: Debugging WAB App in Visual Studio 2012

SubuSwaminathan1 — Fri, 08 May 2015 21:06:41 GMT

From just reading the content of those files, the server/db appears to contain json maintaining the state of the WAB apps, locale info and such misc things - makes sense why node might be writing to them on stop and restart.

I would suggest that you start a new discussion/thread documenting your experience with WAB + git and post your questions there. Maybe other WAB developers and even esri staff might chime in if they choose to.

Keep posting. Very useful info here.

Subu

Re: Debugging WAB App in Visual Studio 2012

AndrewHayden1 — Mon, 11 May 2015 21:06:04 GMT

I appreciate all the thoughts here. Although I've not been able to get \\arcgis-web-appbuilder-1.1\server\apps\[app_number] running in out of VS, I've been able to download the app host it on my local iis and then open the website from VS and debug it. Once open, I am able to add the app to source control (in this case VSS). I'm not familiar enough with GitHub but the upgrade path in either scenario concerns me.

Re: Debugging WAB App in Visual Studio 2012

JunshanLiu — Fri, 15 May 2015 02:04:18 GMT

For debugging, I suggest chrome.

Re: Debugging WAB App in Visual Studio 2012

JunshanLiu — Wed, 03 Feb 2016 07:30:51 GMT

Depends on what you want to do, I have this suggestion:

* If you want to create custom widget/theme, I suggest

* Put the widget/theme under stemapp folder and use http://your host/webappbuilder/?id=stemapp to run and debug your widget/theme

* Put your widget/theme in source control

* If you need to do the deep customization of the created app, such as change jimu.js code, I suggest:

* Use WAB to create a new app as a starter app, and use http://your host/webappbuilder/apps/<appid> to run and debug your app.

* Put your app in source control.

Re: Debugging WAB App in Visual Studio 2012

JordanBaumgardner — Wed, 03 Feb 2016 14:14:41 GMT

We use VS2015 for our web development and really enjoy it. We mostly follow Robert's work flow as above and we use TFS for our code repository. After much debate we went with the following:

tfs\wab <- we pulled the latest dev ver of WAB and added it to source control just in case.

tfs\wab\custom\widget <- our custom widget code, we place here when we are done.

tfs\client\project\ <- our configured client setup, the code we deliver to the client. We develop the widget here at first then move it to the custom repo.

From Wab, we create the project and get it setup.

We develop the widget in place, then move it to the general repo when complete for use in other projects. That becomes the master. Any further mods are done there.

We then combine and deploy.

During development we generally debug the back end C# with VS2015 and use Chrome or IE's F12 to debug the JS.