How to use JS API Sample Apps

[GerardMartin]

I am newbie in Javascript development and in web development in general. I have installed  WebAppBuilder for developers and I have developed some widgets, but I have no idea about how to use these incredible JS API Apps published  by @RalucaNicola1 here:  https://ralucanicola.github.io/JSAPI_demos/

I'm very interested in this particular app: https://ralucanicola.github.io/JSAPI_demos/sanfrancisco-buildings/

With source code here:   https://github.com/RalucaNicola/JSAPI_demos/tree/master/sanfrancisco-buildings

Please JS gurus, I need a step by step guide to install and run these apps in a WAB local server. Any advice about how to learn to code from beginning with  ArcGIS JS API  for a python developer (like me) will be welcome. Thank you!

[GerardMartin]

May be ArcGIS AppStudio is the way? 

Or, Should I copy the App folder in some specific directory of WebAppBuilderForArcGIS (as I did with custom widgets)? 

[BlakeTerhune · Accepted solution]

It's going to be very troublesome to try and use custom JavaScript in Web AppBuilder. WAB is meant to build apps that don't need intense knowledge of the JS API. Depending on the thing, you might be able to make a custom widget.

If you want to reproduce an app from a sample using pure JavaScript, you'll need to create that outside of WAB. Get started | ArcGIS API for JavaScript

For that sanfrancisco-buildings app, you should be able to download all those source files, change any necessary service urls and API keys, and host it on your own web server. Again, WAB would not be needed.

[GerardMartin]

Thank you @BlakeTerhune!

[JeffreyWilkerson]

I think Blake's comment is spot on.  This is all done using the ArcGIS Javascript API, and going to the link he provided will help.  If you open the app in dev tools for the browser, and look at the sources page, you can get access to the primary html page ('index') and the App subdirectory with all of the separate Javascript files used to create it.  There'll probably be some images and other things that don't show up there but you can usually find those through URLs.  It'll be easier (in my view) than doing it in WAB as you just need to put it all into a folder structure that IIS (or Apache) can access it from.  If you have access to a WAB server then you probably also have access to it's IIS, or at leas someone who can install it for you, but to build/customize it you will need to pull in all of those files that I mentioned.

[GerardMartin]

Thanks @BlakeTerhune and @JeffreyWilkerson for your explanation!

First of all, my apologizes for this very simple question.

I follow @BlakeTerhune suggestion, and I have tried ArcGIS JS API code example from ESRI JS developers site. I have ESRI sample code in my_example_app.html file, and I follow these steps ( I have a WAB developer edition):
1. Start nodejs with C:\arcgis-web-appbuilder-2.13\WebAppBuilderForArcGIS\startup.bat
2. Folder App is here \WebAppBuilderForArcGIS\client\myApp\my_example_app.html
3. and call a URL like this in a web navigator: http://localhost:3344/webappviewer/myApp/my_example_app.html

My doubt is if this process is correct because I am using WAB (developer edition of course) and I understand in the answer that it is not recommended.
Should I have to copy myApp folder in other place?

Many thanks again !!!

[BlakeTerhune]

Again, ignore WAB for any custom JS apps. You don't need it running, you don't put the JS app in the WAB folder, and you don't call it with a WAB url.

As @JeffreyWilkerson mentioned, you'll need to host this on a web server. The same server you have WAB on probably also has IIS (the thing you need to make your server a web server). Copy the folder with your JS app files (html, js, etc) into ..\inetpub\wwwroot

Then you get your your app at https://myDomain.com/myAppFolder

[JeffreyWilkerson]

Following Blake's advice, and understanding that you are new to this, copy a one page Esri sample HTML page to the server's C:\inetpub\wwwroot directory.  Then you should be able to access it using your server's name and the name of the HTML page as he stated.

One example, which is close to the example you want to get to might be: Scenelayerview Query Stats 

I wouldn't leave things directly in wwwroot as they tend to pile up.  My current MO is to put the project in a folder on the another drive and then make a new 'application' in IIS that points to it.  My guess is that there's someone else managing your server so this will make a lot more sense to them. 

Also, this will provide you with an application that's exposed as 'anonymous', meaning anyone can access it.  You probably don't want to get into setting anything different in IIS, but if you start adding feature services that aren't shared to the world you will start to see login credentials needed.  Just an FYI.

Once you have a folder that you can access to put your project file(s) in, you can customize it by going back to the Raluca Nicola example and gathering up the default HTML page and accompanying Javascript files.  Put the Javascript files in directory and access them from your HTML page.  You might be able to figure out what functonality you want from them and just put it into the single web page example I mentioned above, but that all depends on you.  

If it was me, at this point, I would start a Visual Studio project for a 1 page HTML app and start to build out the Nicola sample.  Then you can upload it to the location you set up for the 1 page test sample and others can see your changes as well (when you publish that is).

[GerardMartin]

Yes, I  am so completely new to this topic that I don't have inetpub folder.  I have to activate IIS and its features in the Control Panel > Programs and Features > Turn Windows Features on or off

Thank you for your time and your patience!

[JeffreyWilkerson]

If you are developing something, you will usually do this on your personal computer using an Integrated Development Environment (IDE) like Visual Studio.  Visual Studio does not need IIS installed to run your code, it can use a temporary environment for that.  Usually you would only need to use IIS at the server that you will eventually publish your app.  If you don't have an IDE yet, Microsoft has a free version of Visual Studio out there.  I haven't used it but I know it exists.