nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Debugging WAB App in Visual Studio 2012

AndrewHayden1

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?

Find more posts tagged with

Accepted answers

All comments

JordanBaumgardner

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.

JunshanLiu

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.

JunshanLiu

For debugging, I suggest chrome.

SubuSwaminathan1

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

RobertScheitlin__GISP

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.

GerardoGarza

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?

SubuSwaminathan1

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

RobertScheitlin__GISP

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.

AndrewHayden1

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?

RobertScheitlin__GISP

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).

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.